/* eslint-disable */
/* tslint:disable */
/**
 * This is an autogenerated file created by the Stencil compiler.
 * It contains typing information for all components that exist in this project.
 */
import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
import { ActionBarItem } from "./components/action-bar/action-bar.types";
import { ListItem, ListSeparator } from "./components/list/list-item.types";
import { DateType, Languages } from "./components/date-picker/date.types";
import { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types";
import { Icon } from "./global/shared-types/icon.types";
import { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
import { Button } from "./components/button/button.types";
import { CalloutType } from "./components/callout/callout.types";
import { Image } from "./global/shared-types/image.types";
import { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
import { ChartItem } from "./components/chart/chart.types";
import { Label, LabelValue } from "./components/dynamic-label/label.types";
import { Link } from "./global/shared-types/link.types";
import { Chip, ChipType } from "./components/chip-set/chip.types";
import { MenuItem as MenuItem1 } from "./components";
import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
import { Action } from "./components/collapsible-section/action";
import { Config } from "./global/config";
import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
import { DockItem } from "./components/dock/dock.types";
import { FileInfo } from "./global/shared-types/file.types";
import { OfficeViewer } from "./components/file-viewer/file-viewer.types";
import { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from "./components/flex-container/flex-container.types";
import { FormError, FormSchema, ValidationError, ValidationStatus } from "./components/form/form.types";
import { IconSize } from "./components/icon/icon.types";
import { InfoTileProgress } from "./components/info-tile/info-tile.types";
import { InputType } from "./components/input-field/input-field.types";
import { ListType } from "./components/list/list.types";
import { CustomElementDefinition } from "./global/shared-types/custom-element.types";
import { PickerValue } from "./components/picker/value.types";
import { Searcher } from "./components/picker/searcher.types";
import { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
import { ResizeOptions } from "./util/image-resize";
import { FlowItem } from "./components/progress-flow/progress-flow.types";
import { EditorImage, EditorMetadata, ImageInserter, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
import { EditorUiType } from "./components/text-editor/types";
import { Option } from "./components/select/option.types";
import { SpinnerSize } from "./components/spinner/spinner.types";
import { Tab } from "./components/tab-bar/tab.types";
import { Column, ColumnAggregate, ColumnSorter, RowData, TableParams } from "./components/table/table.types";
import { Layout } from "./components/table/layout";
import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
export { ActionBarItem } from "./components/action-bar/action-bar.types";
export { ListItem, ListSeparator } from "./components/list/list-item.types";
export { DateType, Languages } from "./components/date-picker/date.types";
export { MenuItem, MenuSearcher, OpenDirection, SurfaceWidth } from "./components/menu/menu.types";
export { Icon } from "./global/shared-types/icon.types";
export { BreadcrumbsItem } from "./components/breadcrumbs/breadcrumbs.types";
export { Button } from "./components/button/button.types";
export { CalloutType } from "./components/callout/callout.types";
export { Image } from "./global/shared-types/image.types";
export { ListSeparator as ListSeparator1 } from "./global/shared-types/separator.types";
export { ChartItem } from "./components/chart/chart.types";
export { Label, LabelValue } from "./components/dynamic-label/label.types";
export { Link } from "./global/shared-types/link.types";
export { Chip, ChipType } from "./components/chip-set/chip.types";
export { MenuItem as MenuItem1 } from "./components";
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 { Config } from "./global/config";
export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
export { DockItem } from "./components/dock/dock.types";
export { FileInfo } from "./global/shared-types/file.types";
export { OfficeViewer } from "./components/file-viewer/file-viewer.types";
export { FlexContainerAlign, FlexContainerDirection, FlexContainerJustify } from "./components/flex-container/flex-container.types";
export { FormError, FormSchema, 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 { ListType } from "./components/list/list.types";
export { CustomElementDefinition } from "./global/shared-types/custom-element.types";
export { PickerValue } from "./components/picker/value.types";
export { Searcher } from "./components/picker/searcher.types";
export { ActionPosition, ActionScrollBehavior } from "./components/picker/actions.types";
export { ResizeOptions } from "./util/image-resize";
export { FlowItem } from "./components/progress-flow/progress-flow.types";
export { EditorImage, EditorMetadata, ImageInserter, TriggerCharacter, TriggerEventDetail } from "./components/text-editor/text-editor.types";
export { EditorUiType } from "./components/text-editor/types";
export { Option } from "./components/select/option.types";
export { SpinnerSize } from "./components/spinner/spinner.types";
export { Tab } from "./components/tab-bar/tab.types";
export { Column, ColumnAggregate, ColumnSorter, RowData, TableParams } from "./components/table/table.types";
export { Layout } from "./components/table/layout";
export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
export namespace Components {
    /**
     * This component enhances the visual effects, when the `tiltFollowingTheCursor`
     * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
     * This component should be added to the HTML structure of the consumer component.
     * This component carries its own styles which are needed to create a glow effect on the
     * 3D element within the parent element, when the parent is hovered.
     * The parent element must be using the `tiltFollowingTheCursor` utility function
     * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
     * affect parts of the styles of this 3D glow effect.
     * @private 
     */
    interface Limel3dHoverEffectGlow {
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-action-bar-overflow-menu
     * @exampleComponent limel-example-action-bar-selected-item
     * @exampleComponent limel-example-action-bar-colors
     * @exampleComponent limel-example-action-bar-floating
     * @exampleComponent limel-example-action-bar-floating-expand
     * @exampleComponent limel-example-action-bar-styling
     * @exampleComponent limel-example-action-bar-as-primary-component
     * @exampleComponent limel-example-action-bar-icon-title
     */
    interface LimelActionBar {
        /**
          * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar"
         */
        "accessibleLabel"?: string;
        /**
          * Items that are placed in the action bar. These represent primary actions.
         */
        "actions": Array<ActionBarItem | ListSeparator>;
        /**
          * When set to `true`, the action bar will be collapsible.
         */
        "collapsible": boolean;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * - When set to `fullWidth`, the component will take the entire width of its container. - When set to `floating`, the component will get basic stylings to visualize the floating state. :::note You should still properly position the component according to the structure of your user interface. For example, use an `absolute` or `fixed` position. :::
         */
        "layout"?: 'fullWidth' | 'floating';
        /**
          * Defines the location that the content of the overflow menu appears, in relation to its trigger.
         */
        "openDirection": OpenDirection;
    }
    /**
     * @private 
     */
    interface LimelActionBarItem {
        /**
          * When the item is displayed in the available width, this will be `false`.
         */
        "isVisible": boolean;
        /**
          * Item that is placed in the action bar.
         */
        "item": ActionBarItem | ListSeparator;
        /**
          * When the item is selected, this will be `true`.
         */
        "selected": boolean;
    }
    /**
     * @private 
     */
    interface LimelActionBarOverflowMenu {
        /**
          * List of the items that should be rendered in the overflow menu.
         */
        "items": Array<MenuItem | ListSeparator>;
        /**
          * Defines the location that the content of the overflow menu appears, in relation to its trigger. It defaults to `bottom-end`, since in normal scenarios (for example when the action bar is not floating at the bottom of the screen) this menu is the right-most item in the user interface of the component.
         */
        "openDirection": OpenDirection;
        /**
          * Icon to display in the overflow menu trigger. If not provided, the number of items in the overflow menu will be displayed.
         */
        "overFlowIcon"?: Icon;
    }
    /**
     * This component displays an avatar, representing Lime AI assistants.
     * :::warning
     * This is a private component used internally in the Lime's various applications,
     * which is the reason for having it in Lime Elements —to ease the distribution
     * of the component across all our apps.
     * 3rd party developers are not allowed use this component directly.
     * :::
     * @private 
     * @exampleComponent limel-example-ai-avatar-basic
     * @exampleComponent limel-example-ai-avatar-colors
     */
    interface LimelAiAvatar {
        /**
          * Set to `true` to trigger animations that indicate that the AI is "thinking" or processing something.
         */
        "isThinking": boolean;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
    }
    /**
     * 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
         */
        "close": () => Promise<void>;
        /**
          * Set icon for the banner
         */
        "icon": string;
        /**
          * The text to show on the banner.
         */
        "message": string;
        /**
          * Open the banner
         */
        "open": () => Promise<void>;
    }
    /**
     * A Breadcrumb consists of a list of distinct "places" that a user has gone through,
     * before ending up where they are right now, in a website or an application.
     * These "places" can be for example _pages_ of a website, which are hierarchically
     * laid out before the current page that the user is looking at.
     * They could also be _steps_ which the user has gone through, which perhaps have no
     * hierarchical relation with each other, but has eventually led the user "here".
     * :::note
     * - Where the user currently is, is always the last step of the breadcrumb.
     * - A breadcrumbs never shows where users can go after this place.
     * It only illustrates where user has been before ending up here.
     * If the path that a user can take is not changing and if next steps are clear,
     * you can use the [Progress flow component](#/component/limel-progress-flow) instead.
     * :::
     * Breadcrumbs are often placed horizontally before the main content of the current screen.
     * @exampleComponent limel-example-breadcrumbs-links
     * @exampleComponent limel-example-breadcrumbs-buttons
     * @exampleComponent limel-example-breadcrumbs-icons
     * @exampleComponent limel-example-breadcrumbs-divider
     * @exampleComponent limel-example-breadcrumbs-icon-color
     * @exampleComponent limel-example-breadcrumbs-styling
     */
    interface LimelBreadcrumbs {
        /**
          * The visual divider that separates items. It must be a single character such as `-` or `,`.
         */
        "divider": string;
        /**
          * List of items in the breadcrumbs, each representing a step or a page.
         */
        "items": BreadcrumbsItem[];
    }
    /**
     * @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.
         */
        "disabled": boolean;
        /**
          * Set icon for the button
         */
        "icon": string | Icon;
        /**
          * The text to show on the button.
         */
        "label": string;
        /**
          * Set to `true` to put the button in the `loading` state. This also disables the button.
         */
        "loading": boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
         */
        "loadingFailed": boolean;
        /**
          * Set to `true` to make the button outlined.
         */
        "outlined": boolean;
        /**
          * Set to `true` to make the button primary.
         */
        "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
         */
        "disabled": boolean;
        /**
          * List of buttons for the group
         */
        "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`.
         */
        "heading"?: string;
        /**
          * Icon of the callout, which can be used to override the default icon which is displayed based on the chosen `type`.
         */
        "icon"?: string;
        /**
          * Defines the language for translations. Will translate the default headings for supported languages.
         */
        "language": Languages;
        /**
          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
         */
        "type"?: CalloutType;
    }
    /**
     * Card is a component that displays content about a single topic,
     * in a structured way. It can contain a header, and some supporting media such
     * as an image or an icon, a body of text, or optional actions.
     * @exampleComponent limel-example-card-basic
     * @exampleComponent limel-example-card-image
     * @exampleComponent limel-example-card-actions
     * @exampleComponent limel-example-card-clickable
     * @exampleComponent limel-example-card-orientation
     * @exampleComponent limel-example-card-slot
     * @exampleComponent limel-example-card-styling
     */
    interface LimelCard {
        /**
          * Actions to display in the card, to provide the user with options to interact with the content.
         */
        "actions"?: Array<ActionBarItem | ListSeparator1>;
        /**
          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
         */
        "clickable": boolean;
        /**
          * Heading of the card, to provide a short title about the context.
         */
        "heading"?: string;
        /**
          * An icon, to display along with the heading and subheading.
         */
        "icon"?: string | Icon;
        /**
          * A hero image to display in the card, to enrich the content with visual information.
         */
        "image"?: Image;
        /**
          * The orientation of the card, specially useful when the card has an image.
         */
        "orientation": 'landscape' | 'portrait';
        /**
          * Subheading of the card to provide a short description of the context.
         */
        "subheading"?: string;
        /**
          * The content of the card. Supports markdown, to provide a rich text experience.
         */
        "value"?: string;
    }
    /**
     * A chart is a graphical representation of data, in which
     * visual symbols such as such bars, dots, lines, or slices, represent
     * each data point, in comparison to others.
     * @exampleComponent limel-example-chart-stacked-bar
     * @exampleComponent limel-example-chart-orientation
     * @exampleComponent limel-example-chart-max-value
     * @exampleComponent limel-example-chart-type-bar
     * @exampleComponent limel-example-chart-type-dot
     * @exampleComponent limel-example-chart-type-area
     * @exampleComponent limel-example-chart-type-line
     * @exampleComponent limel-example-chart-type-pie
     * @exampleComponent limel-example-chart-type-doughnut
     * @exampleComponent limel-example-chart-type-ring
     * @exampleComponent limel-example-chart-type-gantt
     * @exampleComponent limel-example-chart-type-nps
     * @exampleComponent limel-example-chart-multi-axis
     * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
     * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
     * @exampleComponent limel-example-chart-axis-increment
     * @exampleComponent limel-example-chart-clickable-items
     * @exampleComponent limel-example-chart-accessibility
     * @exampleComponent limel-example-chart-styling
     * @exampleComponent limel-example-chart-creative-styling
     * @beta 
     */
    interface LimelChart {
        /**
          * Helps users of assistive technologies to understand what the items in the chart represent.
         */
        "accessibleItemsLabel"?: string;
        /**
          * Helps users of assistive technologies to understand the context of the chart, and what is being displayed.
         */
        "accessibleLabel"?: string;
        /**
          * Specifies the increment for the axis lines.
         */
        "axisIncrement"?: number;
        /**
          * List of items in the chart, each representing a data point.
         */
        "items": ChartItem[];
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language": Languages;
        /**
          * Indicates whether the chart is in a loading state.
         */
        "loading": boolean;
        /**
          * Specifies the range that items' values could be in. This is used in calculation of the size of the items in the chart. When not provided, the sum of all values in the items will be considered as the range.
         */
        "maxValue"?: number;
        /**
          * Defines whether the chart is intended to be displayed wide or tall. Does not have any effect on chart types which generate circular forms.
         */
        "orientation"?: 'landscape' | 'portrait';
        /**
          * Defines how items are visualized in the chart.
         */
        "type"?: | 'area'
        | 'bar'
        | 'doughnut'
        | 'line'
        | 'nps'
        | 'pie'
        | 'ring'
        | 'dot'
        | 'stacked-bar';
    }
    /**
     * The Checkbox component is a classic and essential element in UI design that allows
     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
     * select one or more items from a list of choices.
     * ## States of a Checkbox
     * When a user clicks or taps on the box, it toggles between two states:
     * Checked and Unchecked.
     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
     * The Indeterminate state is typically used when dealing with checkbox groups
     * that have hierarchical relationships or when the group contains sub-items.
     * This state is used to indicate that that some, but not all, of the items in a group are selected.
     * :::important
     * Checkboxes are sometimes used interchangeably with switches in user interfaces.
     * But there is an important difference between the two! Please read our guidelines about
     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
     * @exampleComponent limel-example-checkbox
     * @exampleComponent limel-example-checkbox-helper-text
     * @exampleComponent limel-example-checkbox-readonly
     */
    interface LimelCheckbox {
        /**
          * The value of the checkbox. Set to `true` to make the checkbox checked.
         */
        "checked": boolean;
        /**
          * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled.
         */
        "disabled": boolean;
        /**
          * Optional helper text to display below the checkbox
         */
        "helperText": string;
        /**
          * Enables indeterminate state. Set to `true` to signal indeterminate check.
         */
        "indeterminate": boolean;
        /**
          * Set to `true` to indicate that the current value is invalid.
         */
        "invalid": boolean;
        /**
          * The checkbox label.
         */
        "label": string;
        /**
          * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
         */
        "readonly": boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * Set to `true` to indicate that the checkbox must be checked.
         */
        "required": boolean;
    }
    /**
     * Chips and buttons are both interactive elements in UI design,
     * but they serve different purposes and are used in different contexts.
     * :::warning
     * Do not use the chip component carelessly, as an alternative for
     * [`limel-button`](#/component/limel-button/) in the UI design!
     * **Buttons:**
     * Buttons are used to trigger actions. They are typically used to
     * submit forms, open dialogs, initiate a process, or perform any action
     * that changes the state of the application.
     * Buttons' labels usually contain action words, in other words, the labels is
     * a _verb in imperative mood_ such as "Submit" or "Delete".
     * Buttons are placed in areas where it's clear they will initiate
     * an action when clicked.
     * **Chips:**
     * Chips however are elements which may look like buttons, but they are
     * representing choices, filters, or tags, in a small block
     * or clearly bundled into a group. Chips are rarely used alone in the
     * user interface.
     * They are often used in a so called "chip-set", or placed together in
     * a section of the UI, where the user can expect more than one chip to be present.
     * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
     * or an item in a shopping list.
     * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
     * or opening a page with all posts tagged with the tag represented by the chip,
     * or navigating to a page with more information about the item in the shopping list.
     * :::
     * @exampleComponent limel-example-chip-button
     * @exampleComponent limel-example-chip-link
     * @exampleComponent limel-example-chip-icon-colors
     * @exampleComponent limel-example-chip-image
     * @exampleComponent limel-example-chip-badge
     * @exampleComponent limel-example-chip-filter
     * @exampleComponent limel-example-chip-removable
     * @exampleComponent limel-example-chip-menu
     * @exampleComponent limel-example-chip-loading
     * @exampleComponent limel-example-chip-progress
     * @exampleComponent limel-example-chip-size
     * @exampleComponent limel-example-chip-readonly-border
     * @exampleComponent limel-example-chip-aria-role
     */
    interface LimelChip {
        /**
          * The value of the badge, displayed on the chip.
         */
        "badge"?: string | number;
        /**
          * Set to `true` to disable the chip.
         */
        "disabled": boolean;
        /**
          * Icon of the chip.
         */
        "icon"?: string | Icon;
        /**
          * Identifier for the chip. Must be unique.
         */
        "identifier"?: number | string;
        /**
          * A picture to be displayed instead of the icon on the chip.
         */
        "image"?: Image;
        /**
          * Set to `true` to visualize the chip in an "invalid" or "error" state.
         */
        "invalid": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language": Languages;
        /**
          * If supplied, the chip will become a clickable link.
         */
        "link"?: Omit<Link, 'text'>;
        /**
          * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside the chip. This does _not_ disable the interactivity of the chip!
         */
        "loading"?: boolean;
        /**
          * When provided, the chip will render an ellipsis menu with the supplied items. Also, this will hide the "remove button" when `removable={true}`, as the remove button will automatically become the last item in the menu.
         */
        "menuItems"?: Array<MenuItem1 | ListSeparator>;
        /**
          * Reflects the current value of a progress bar on the chip, visualizing the percentage of an ongoing process. Must be a number between `0` and `100`.
         */
        "progress"?: number;
        /**
          * Set to `true` to render the chip as a static UI element. Useful when the parent component has a `readonly` state.
         */
        "readonly": boolean;
        /**
          * Set to `true` to render a remove button on the chip.
         */
        "removable": boolean;
        /**
          * Set to `true` to visualize the chip in a "selected" state. This is typically used when the chip is used in a chip-set along with other chips.
         */
        "selected": boolean;
        /**
          * Defines the size of the chip.
         */
        "size": 'small' | 'default';
        /**
          * Label displayed on the chip
         */
        "text": string;
        /**
          * Set to `filter` to render the chip with a distinct style suitable for visualizing filters.
         */
        "type"?: ChipType;
    }
    /**
     * :::note
     * **Regarding `click` and `interact` events:**
     * The `interact` event is emitted when a chip is interacted with, and is
     * the recommended way to listen for chip interactions.
     * However, if you need to handle clicks differently depending on which chip
     * was clicked, or whether the click was on a chip or elsewhere, you need to
     * listen to the native `click` event instead.
     * Native `click` events are passed through, and if the click came from
     * a chip, the chip object is available in the event object under
     * `<event object>.Lime.chip`.
     * Example usage:
     * ```ts
     * private handleClick(event: Event) {
     *     if (event && 'Lime' in event && (event.Lime as any).chip) {
     *         if ((event.Lime as { chip: Chip }).chip.href) {
     *             // Chip has href, so let the browser open the link.
     *             return;
     *         }
     *         // handle click on chip without href
     *     } else {
     *         // handle click elsewhere
     *     }
     * }
     * ```
     * :::
     * @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-with-menu-items
     * @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-image
     * @exampleComponent limel-example-chip-set-composite
     */
    interface LimelChipSet {
        /**
          * For chip-set of type `input`, defines whether the input field should have autocomplete enabled. Read more about the `autocomplete` attribute [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
         */
        "autocomplete": string;
        /**
          * Whether the "Clear all" buttons should be shown
         */
        "clearAllButton": boolean;
        /**
          * For chip-set of type `input`. Sets delimiters between chips.
         */
        "delimiter": string;
        /**
          * True if the chip set should be disabled
         */
        "disabled": boolean;
        /**
          * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the consumer control when the input is emptied.
          * @returns does not return anything, but methods have to be async
         */
        "emptyInput": () => Promise<void>;
        /**
          * Whether the input field should be emptied when the chip-set loses focus.
         */
        "emptyInputOnBlur": boolean;
        /**
          * Used to find out whether the chip-set is in edit mode.
          * @returns `true` if the chip-set is in edit mode, `false` otherwise.
         */
        "getEditMode": () => Promise<boolean>;
        /**
          * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation.
         */
        "helperText": string;
        /**
          * For chip-sets of type `input`. Value to use for the `type` attribute on the input field inside the chip-set.
         */
        "inputType": 'search' | 'text';
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
         */
        "invalid": boolean;
        /**
          * Label for the chip-set
         */
        "label": string;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components. For example, the clear all chips label.
         */
        "language": Languages;
        /**
          * For chip-sets of type `input`. When the value is null, no leading icon is used. Leading icon to show to the far left in the text field
         */
        "leadingIcon": string;
        /**
          * For chip-sets of type `input`. Limits the maximum number of chips. When the value is `0` or not set, no limit is applied.
         */
        "maxItems": number;
        /**
          * For chip-sets of type `input`, set to `true` to disable adding and removing chips, but allow interaction with existing chips in the set. For any other types, setting either `readonly` or `disabled` disables the chip-set.
         */
        "readonly": boolean;
        /**
          * True if the control requires a value
         */
        "required": boolean;
        /**
          * Search label to display when type is `input` and component is in search mode
         */
        "searchLabel": string;
        /**
          * Used to set focus to the chip-set input field.
          * @param emptyInput - if `true`, any text in the input is discarded
          * @returns does not return anything, but methods have to be async
         */
        "setFocus": (emptyInput?: boolean) => Promise<void>;
        /**
          * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
         */
        "type"?: 'choice' | 'filter' | 'input';
        /**
          * List of chips for the set
         */
        "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%.
         */
        "displayPercentageColors": boolean;
        /**
          * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
         */
        "maxValue": number;
        /**
          * The prefix which is displayed before the `value`, must be a few characters characters long.
         */
        "prefix"?: string;
        /**
          * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.
         */
        "size": CircularProgressSize;
        /**
          * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
         */
        "suffix": string;
        /**
          * The value of the progress bar.
         */
        "value": number;
    }
    /**
     * @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
         */
        "colorScheme": ColorScheme;
        /**
          * Allows the user to fold code
         */
        "fold": boolean;
        /**
          * The language of the code
         */
        "language": Language;
        /**
          * Displays line numbers in the editor
         */
        "lineNumbers": boolean;
        /**
          * Enables linting of JSON content
         */
        "lint": boolean;
        /**
          * Disables editing of the editor content
         */
        "readonly": boolean;
        /**
          * The code to be rendered
         */
        "value": string;
    }
    /**
     * A collapsible section can be used to group related content together
     * and hide the group when not needed.
     * Using this component can help to:
     * - Save vertical space by hiding non-essential content
     * - Improve content organization and scannability of the user interface
     * - Reduce cognitive load by displaying only a set of relevant information at a time
     * - Or disclose complex information, progressively to the user
     * @exampleComponent limel-example-collapsible-section-basic
     * @exampleComponent limel-example-collapsible-section-actions
     * @exampleComponent limel-example-collapsible-section-with-custom-header-component
     * @exampleComponent limel-example-collapsible-section-external-control
     * @exampleComponent limel-example-collapsible-section-with-slider
     * @exampleComponent limel-example-collapsible-section-invalid
     * @exampleComponent limel-example-collapsible-section-icon
     * @exampleComponent limel-example-collapsible-section-css-props
     */
    interface LimelCollapsibleSection {
        /**
          * Actions to place to the far right inside the header
         */
        "actions": Action[];
        /**
          * Text to display in the header of the section
         */
        "header": string;
        /**
          * Icon to display in the header of the section
         */
        "icon"?: string | Icon;
        /**
          * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
         */
        "invalid": boolean;
        /**
          * `true` if the section is expanded, `false` if collapsed.
         */
        "isOpen": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language": Languages;
    }
    /**
     * 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
         */
        "helperText": string;
        /**
          * The label of the input field
         */
        "label": string;
        /**
          * Set to `true` if a value is readonly. This makes the component un-interactive.
         */
        "readonly": boolean;
        /**
          * Set to `true` if a value is required
         */
        "required": boolean;
        /**
          * Displayed as tooltips when picker is hovered.
         */
        "tooltipLabel": string;
        /**
          * Name or code of the chosen color
         */
        "value": string;
    }
    /**
     * @private 
     */
    interface LimelColorPickerPalette {
        /**
          * Helper text of the input field
         */
        "helperText": string;
        /**
          * Label of the input field
         */
        "label": string;
        /**
          * Set to `true` if a value is required
         */
        "required": boolean;
        /**
          * Color value that is manually typed by the user
         */
        "value": string;
    }
    /**
     * Component used to set global configuration for Lime Elements.
     * :::warning
     * **Building something for Lime CRM?** Then you should _NOT_ use this component.
     * Lime CRM already uses this component to set the global configuration for
     * Lime Elements. No matter what problem you are facing at the moment, using
     * this component will not help, and might cause other problems.
     * :::
     * Building your own software, which is using Lime Elements?
     * Then you _might_ need to use this component.
     * @private 
     */
    interface LimelConfig {
        /**
          * Global configuration for Lime Elements.
         */
        "config": Config;
    }
    /**
     * @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.
         */
        "disabled": boolean;
        /**
          * Format to display the selected date in.
         */
        "format": string;
        /**
          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language` :::
         */
        "formatter"?: (date: Date) => string;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the date picker is invalid.
         */
        "invalid": boolean;
        /**
          * Text to display next to the date picker
         */
        "label": string;
        /**
          * Defines the localisation for translations and date formatting. Property `format` customizes the localized date format.
         */
        "language": Languages;
        /**
          * The placeholder text shown inside the input field, when the field is focused and empty
         */
        "placeholder": string;
        /**
          * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
         */
        "required": boolean;
        /**
          * Type of date picker.
         */
        "type": DateType;
        /**
          * The value of the field.
         */
        "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 [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
     * 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-heading-actions
     * @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.
         */
        "closingActions": ClosingActions;
        /**
          * Set to `true` to make the dialog "fullscreen".
         */
        "fullscreen": boolean;
        /**
          * The heading for the dialog, if any.
         */
        "heading": string | DialogHeading;
        /**
          * `true` if the dialog is open, `false` otherwise.
         */
        "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"
         */
        "accessibleLabel"?: string;
        /**
          * Set to `false` if you do not want to allow end-users to exapnd or shrink the Dock. This will hide the expand/shrink button, and the only things that defines the layout will be the `expanded` property, and the `mobileBreakPoint`.
         */
        "allowResize"?: boolean;
        /**
          * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.)
         */
        "dockFooterItems"?: DockItem[];
        /**
          * Items that are placed in the dock.
         */
        "dockItems": DockItem[];
        /**
          * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip.  Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below…
         */
        "expanded"?: boolean;
        /**
          * Defines the breakpoint in pixles, at which the component will be rendered in a hoizontal layout. Default breakpoint is `700` pixels, which means when the screen size is smaller than `700px`, the component will automatically switch to a horizontal layout.
         */
        "mobileBreakPoint"?: number;
    }
    /**
     * @private 
     */
    interface LimelDockButton {
        /**
          * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
         */
        "expanded"?: boolean;
        /**
          * Item that is placed in the dock.
         */
        "item": DockItem;
        /**
          * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout.
         */
        "useMobileLayout"?: boolean;
    }
    /**
     * This components displays a different label depending on the current given
     * value. A label can consist of a text and an optional icon. If no matching
     * label is found among the given `labels`, the `defaultLabel` will be displayed.
     * One use case of the component is to enhance the visualization of a `boolean`
     * field like a checkbox or switch in a `readonly` state.
     * The reason we offer this component is that the default styling
     * of the Checkbox or Toggle switch in the `readonly` state may not always
     * provide the best way of _visualizing information_, potentially leading to
     * confusion and negatively affecting the end-users' experience.
     * @exampleComponent limel-example-dynamic-label
     * @exampleComponent limel-example-dynamic-label-readonly-boolean
     */
    interface LimelDynamicLabel {
        /**
          * The label to display when no matching value is found in the `labels` array. This is a fallback label that ensures there's always a label displayed for the component.
         */
        "defaultLabel": Omit<Label, 'value'>;
        /**
          * A list of available labels. Each label has a corresponding value that will be matched with the current `value` of the component to determine what label to display.
         */
        "labels": Label[];
        /**
          * The current value of the component which is used to match with the given `labels` to determine what label to display.  If not matching label is found, the `defaultLabel` is displayed.
         */
        "value": LabelValue;
    }
    /**
     * 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-menu-items
     * @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)
         */
        "accept": string;
        /**
          * True if the input should be disabled
         */
        "disabled": boolean;
        /**
          * Set to `true` to indicate that the current value of the chosen file is invalid.
         */
        "invalid": boolean;
        /**
          * The input label.
         */
        "label": string;
        /**
          * Defines the localisation for translations.
         */
        "language": Languages;
        /**
          * Set to `true` to disable adding and removing files, but allow interaction with any already existing file.
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
         */
        "required": boolean;
        /**
          * The selected file.
         */
        "value": FileInfo;
    }
    /**
     * This component enables you to seamlessly convert any region of the user interface into
     * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.
     * The file dropzone can then be used to allow end-users to upload files
     * by dragging and dropping them into the specified area, for example to trigger an upload process.
     * After receiving the files, the component emits a `filesSelected` event. For unsupported
     * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
     * The event detail would be an array of `FileInfo` objects,
     * each representing a file dropped into the dropzone.
     * @exampleComponent limel-example-file-dropzone
     * @exampleComponent limel-example-file-dropzone-type-filtering
     * @private 
     */
    interface LimelFileDropzone {
        /**
          * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.  For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`. Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`. A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or `.png, .jpg, .jpeg`.
          * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more details.
         */
        "accept": string;
        /**
          * Set to `true` to disable the file dropzone.
         */
        "disabled": boolean;
        /**
          * Is displayed to provide supplementary information to the end users, for instance, which filetypes or file sizes are accepted.
         */
        "helperText"?: string;
        /**
          * Is displayed when the user is dragging a file over the dropzone. A suitable text could for instance be "Drop your files here".
         */
        "text": string;
    }
    /**
     * This component enables you to seamlessly transform any other clickable component that
     * generates a `click` event into a file input selector.
     * To use it, just wrap any clickable component inside the `limel-file-input` component.
     * Upon reception of the `click` event this component will open the native file selection
     * dialog.
     * After receiving the files, the component emits a `filesSelected` event.
     * The event detail would be an array of `FileInfo` objects,
     * each representing a file dropped into the dropzone.
     * @exampleComponent limel-example-file-input
     * @exampleComponent limel-example-file-input-type-filtering
     * @private 
     */
    interface LimelFileInput {
        /**
          * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.  For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`. Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`. A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or `.png, .jpg, .jpeg`.
          * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more details.
         */
        "accept": string;
        /**
          * Set to `true` to disable file input selection.
         */
        "disabled": boolean;
        /**
          * Set to `true` to enable selection of multiple files
         */
        "multiple": boolean;
    }
    /**
     * This is a smart component that automatically detects
     * the most common file types such as image, audio, video, and text,
     * and properly displays them in the browser.
     * The component is also capable to render the most common office files.
     * :::note
     * Image files will always be contained in their containers, which means
     * they automatically increase or decrease in size to fill their containing box
     * whilst preserving their aspect-ratio.
     * Text and PDF files will also always respect the width and height of the
     * container in which the `limel-file-viewer` is loaded.
     * :::
     * For some file types such as text and images, the component will display a
     * download button and a button to open the file in a new browser tab.
     * This will allow users to preview the file in a fullscreen mode with the
     * browser and take advantage of for example native zooming and panning
     * functionalities.
     * @exampleComponent limel-example-file-viewer-basic
     * @exampleComponent limel-example-file-viewer-office
     * @exampleComponent limel-example-file-viewer-filename
     * @exampleComponent limel-example-file-viewer-inbuilt-actions
     * @exampleComponent limel-example-file-viewer-custom-actions
     * @exampleComponent limel-example-file-viewer-with-picker
     * @beta 
     */
    interface LimelFileViewer {
        /**
          * An array of custom actions that can be displayed as an action menu on the file which is being displayed.
         */
        "actions": ListItem[];
        /**
          * Displays a button that allows the user to download the file. Note that due to the browser's security policies, the file should be hosted on the same domain for the download button to work properly. Not displayed for office files!
         */
        "allowDownload"?: boolean;
        /**
          * Displays a button that allows the user to view the file in fullscreen mode. Not displayed for office files!
         */
        "allowFullscreen"?: boolean;
        /**
          * Displays a button that allows the user to open the file in a new browser tab. Not displayed for office files!
         */
        "allowOpenInNewTab"?: boolean;
        /**
          * An optional alternative text, mainly for assistive technologies and screen readers. It is used for only image files, as an `alt` attribute. Should optimally hold a description of the image, which is also displayed on the page if the image can't be loaded for some reason.
         */
        "alt"?: string;
        /**
          * The name of the file that must also contains its extension. This overrides the filename that the `url` ends with. Useful when the `url` does not contain the filename. When specified, the `filename` will be used as filename of the downloaded file.
         */
        "filename"?: string;
        /**
          * Defines the localization for translations.
         */
        "language": Languages;
        /**
          * Defines the third-party viewer that should be used to render the content of office files, such as word processing documents, presentations, or spreadsheets.
         */
        "officeViewer": OfficeViewer;
        /**
          * Link to the file
         */
        "url": string;
    }
    /**
     * 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.
         */
        "format": string;
        "formatter": (date: Date) => string;
        /**
          * The native input element to use with flatpickr.
         */
        "inputElement": HTMLElement;
        /**
          * Set to `true` if the calendar should be open.
         */
        "isOpen": boolean;
        /**
          * Defines the localisation for translations and date formatting. Property `format` customizes the localized date format.
         */
        "language": Languages;
        /**
          * Type of date picker.
         */
        "type": DateType;
        /**
          * The value of the field.
         */
        "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 - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
     * @private 
     */
    interface LimelFlexContainer {
        /**
          * Specify how items are aligned along the cross axis
         */
        "align": FlexContainerAlign;
        /**
          * Direction of the main axis
         */
        "direction": FlexContainerDirection;
        /**
          * Specify how items are aligned along the main axis
         */
        "justify": FlexContainerJustify;
        /**
          * Reverse the order of the items
         */
        "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-with-help
     * @exampleComponent limel-example-form-row-layout
     */
    interface LimelForm {
        /**
          * Set to `true` to disable the whole form.
         */
        "disabled": boolean;
        /**
          * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
         */
        "errors": ValidationError;
        /**
          * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
         */
        "propsFactory"?: (schema: FormSchema) => Record<string, any>;
        /**
          * The schema used to render the form
         */
        "schema": FormSchema;
        /**
          * Custom function to customize the default error messages
         */
        "transformErrors"?: (errors: FormError[]) => FormError[];
        /**
          * Value of the form
         */
        "value": object;
    }
    /**
     * This component is deprecated and will be removed in a future version of
     * Lime Elements. Please use CSS for your flexible container needs 🙂
     * @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
     * @private 
     */
    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-slot-actions
     * @exampleComponent limel-example-header-colors
     * @exampleComponent limel-example-header-responsive
     * @exampleComponent limel-example-header-narrow
     */
    interface LimelHeader {
        /**
          * Title to display
         */
        "heading"?: string;
        /**
          * Icon to display
         */
        "icon"?: string | Icon;
        /**
          * Subheading to display
         */
        "subheading"?: string;
        /**
          * The visual divider that separates the `subheading` and the `supportingText`. It must be a single character such as `-` or `,`.
         */
        "subheadingDivider"?: string;
        /**
          * An extra string of text to display along with with the Subheading
         */
        "supportingText"?: string;
    }
    /**
     * A good design is self-explanatory! However, sometimes concepts are
     * too complex to understand, no matter how well-designed a user interface is.
     * In such cases, contextual help can be a great way to provide users with
     * help precisely where and when users need it.
     * In app interface design, providing contextual help emerges as a viable practice
     * for enhancing user experience and usability.
     * Contextual help serves as a quick-to-access guiding,
     * empowering users to more easily understand and navigate through
     * the intricacies of an application.
     * Using this component designers empower users to grasp the functionality
     * of an app more effortlessly, minimizes the learning curve,
     * transforming complex features into accessible opportunities for exploration.
     * @exampleComponent limel-example-help
     * @exampleComponent limel-example-read-more
     * @exampleComponent limel-example-open-direction
     * @exampleComponent limel-example-placement
     */
    interface LimelHelp {
        /**
          * {@inheritdoc Help.openDirection}
         */
        "openDirection": OpenDirection;
        /**
          * {@inheritdoc Help.readMoreLink}
         */
        "readMoreLink"?: Link;
        /**
          * {@inheritdoc Help.trigger}
         */
        "trigger": string;
        /**
          * {@inheritdoc Help.value}
         */
        "value": string;
    }
    /**
     * Help content
     * This is scrollable content that is placed in the popover of the Help component.
     * Moved here mostly to avoid having inlined styles in the parent component.
     * Since you cannot send styles to the Portal component, we need to have this
     * child component.
     * @private 
     */
    interface LimelHelpContent {
        "readMoreLink"?: Link;
        "value": 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.
     * @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
     * @exampleComponent limel-example-helper-line-empty
     * @exampleComponent limel-example-helper-line-animation
     * @private 
     */
    interface LimelHelperLine {
        /**
          * The helper text that is displayed on the left side.
         */
        "helperText"?: string;
        /**
          * Used by `aria-controls` and `aria-describedby` in the parent component.
         */
        "helperTextId"?: string;
        /**
          * Turns `true`, when the parent component is invalid. For example, when the parent component is `required` but is left empty. Or when the input format is invalid.
         */
        "invalid"?: boolean;
        /**
          * Length of the current input value, coming from the parent component. Used in the character counter section on the right side.
         */
        "length"?: number;
        /**
          * Maximum length of the characters, defined on the parent component. Used in the character counter section on the right side.
         */
        "maxLength"?: number;
    }
    /**
     * :::important
     * To install your icon set correctly, please read the [documentation here](#/).
     * :::
     * The size and color of the icon is normally set in CSS, however there are a few
     * standard sizes defined that can be used with the `size` property.
     * @exampleComponent limel-example-icon-name
     * @exampleComponent limel-example-icon-size
     * @exampleComponent limel-example-icon-color
     */
    interface LimelIcon {
        /**
          * Set to `true` to give the icon a round background with some padding. Only works when the `size` attribute is also set.
         */
        "badge": boolean;
        /**
          * Name of the icon
         */
        "name": string;
        /**
          * Size of the icon
         */
        "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-icon
     * @exampleComponent limel-example-icon-button-composite
     */
    interface LimelIconButton {
        /**
          * Set to `true` to disable the button.
         */
        "disabled": boolean;
        /**
          * Set to `true` to give the button our standard "elevated" look, lifting it off the flat layout.
         */
        "elevated": boolean;
        /**
          * The icon to display.
         */
        "icon": string | Icon;
        /**
          * The text to show to screenreaders and other assistive tech.
         */
        "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-primary-slot
     * @exampleComponent limel-example-info-tile-styling
     */
    interface LimelInfoTile {
        /**
          * If supplied, the info tile will display a notification badge.
         */
        "badge"?: number | string;
        /**
          * Set to `true` if info tile is disabled.
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the info tile.
         */
        "icon"?: string;
        /**
          * The text to show below the info tile. Long labels will be truncated.
         */
        "label"?: string;
        /**
          * If supplied, the info tile will be a clickable link.  Supplying a value also adds an elevated effect using a shadow, as well as `cursor: pointer`, which appears on hover. While we strongly recommend supplying a link whenever the component should act as a link, if this is not possible, and you need to provide interaction through a click handler, you can still get the correct styling by supplying a `Link` object with the `href` property set to `'#'`.
         */
        "link"?: Link;
        /**
          * Set to `true` to put the component in the `loading` state. This does _not_ disable the link. To do so, the `disabled` property should be set to `true` as well.
         */
        "loading"?: boolean;
        /**
          * A string of text that is visually placed before the value.
         */
        "prefix"?: string;
        /**
          * Properties of the optional circular progress bar.  Defaults: - `maxValue`: 100 - `suffix`: % - `displayPercentageColors`: false  Colors change with intervals of 10 %.
         */
        "progress"?: InfoTileProgress;
        /**
          * A string of text that is visually placed after the value.
         */
        "suffix"?: string;
        /**
          * A piece of text or number that is the main piece of information which the component is intended to visualize.
         */
        "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.
         */
        "completions": string[];
        /**
          * 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.
         */
        "disabled": boolean;
        /**
          * Set to `true` to format the current value of the input field only if the field is of type number. The number format is determined by the current language of the browser.
         */
        "formatNumber": boolean;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
         */
        "invalid": boolean;
        /**
          * The input label.
         */
        "label": string;
        /**
          * Leading icon to show to the far left in the field.
         */
        "leadingIcon": string;
        /**
          * The locale to use for formatting numbers.
         */
        "locale": string;
        /**
          * Maximum allowed value if input type is `number`.
         */
        "max": number;
        /**
          * Maximum length of the value if type is `password`, `search`, `tel`, `text`, `url`, or `urlAsText`.
         */
        "maxlength": number;
        /**
          * Minimum allowed value if input type is `number`.
         */
        "min": number;
        /**
          * Minimum length of the value if type is `password`, `search`, `tel`, `text`, `url`, or `urlAsText`.
         */
        "minlength": number;
        /**
          * Regular expression that the current value of the input field must match. No forward slashes should be specified around the pattern. Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`, `password`, or `search`.
         */
        "pattern": string;
        /**
          * The placeholder text shown inside the input field, when the field is focused and empty.
         */
        "placeholder": string;
        /**
          * A short piece of text to display before the value inside the input field. Displayed for all types except `textarea`.
         */
        "prefix": string;
        /**
          * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
         */
        "required": boolean;
        /**
          * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link, respectively. The default icon can be overridden using the `trailingIcon` property.
         */
        "showLink": boolean;
        /**
          * Incremental values that are valid if the field type is `number`.
         */
        "step": number | 'any';
        /**
          * A short piece of text to display after the value inside the input field. Displayed for all types except `textarea`.
         */
        "suffix": string;
        /**
          * Trailing icon to show to the far right in the field.
         */
        "trailingIcon": string;
        /**
          * Type of input.  Note** regarding type `url`: `limel-input` uses the native validation built into the browser for many types of input fields. The native validation for `url` is very strict, and does not allow relative urls, nor any other formats that are not a "fully qualified" url. To allow such urls, use the type `urlAsText` instead. `urlAsText` works exactly like `text` in all regards, except that it enables use of the `showLink` property.
         */
        "type": InputType;
        /**
          * The value of the field.
         */
        "value": string;
    }
    /**
     * The linear progress component can be used to visualize the current state of a progress in a scale;
     * for example percentage of completion of a task.
     * @exampleComponent limel-example-linear-progress
     * @exampleComponent limel-example-linear-progress-indeterminate
     * @exampleComponent limel-example-linear-progress-accessible-label
     * @exampleComponent limel-example-linear-progress-color
     */
    interface LimelLinearProgress {
        /**
          * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. If not provided, the generic word of "Progress bar" will be used.
         */
        "accessibleLabel"?: string;
        /**
          * Puts the progress bar in an indeterminate state
         */
        "indeterminate": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language": Languages;
        /**
          * The value of the progress bar. Should be between `0` and `1`.
         */
        "value": number;
    }
    /**
     * @exampleComponent limel-example-list
     * @exampleComponent limel-example-list-secondary
     * @exampleComponent limel-example-list-separator
     * @exampleComponent limel-example-list-icons
     * @exampleComponent limel-example-list-badge-icons
     * @exampleComponent limel-example-list-pictures
     * @exampleComponent limel-example-list-selectable
     * @exampleComponent limel-example-list-checkbox-icons
     * @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
         */
        "badgeIcons": boolean;
        /**
          * Size of the icons in the list
         */
        "iconSize": IconSize;
        /**
          * List of items to display
         */
        "items": Array<ListItem | ListSeparator>;
        /**
          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
         */
        "maxLinesSecondaryText": number;
        /**
          * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection.
         */
        "type": ListType;
    }
    /**
     * The Markdown component receives markdown syntax
     * and renders it as HTML.
     * @exampleComponent limel-example-markdown-headings
     * @exampleComponent limel-example-markdown-emphasis
     * @exampleComponent limel-example-markdown-lists
     * @exampleComponent limel-example-markdown-links
     * @exampleComponent limel-example-markdown-images
     * @exampleComponent limel-example-markdown-code
     * @exampleComponent limel-example-markdown-footnotes
     * @exampleComponent limel-example-markdown-tables
     * @exampleComponent limel-example-markdown-html
     * @exampleComponent limel-example-markdown-keys
     * @exampleComponent limel-example-markdown-blockquotes
     * @exampleComponent limel-example-markdown-horizontal-rule
     * @exampleComponent limel-example-markdown-composite
     * @exampleComponent limel-example-markdown-custom-component
     */
    interface LimelMarkdown {
        /**
          * Enable lazy loading for images
         */
        "lazyLoadImages": boolean;
        /**
          * The input text. Treated as GitHub Flavored Markdown, with the addition that any included HTML will be parsed and rendered as HTML, rather than as text.
         */
        "value": string;
        /**
          * Whitelisted html elements.  Any custom element added here will not be sanitized and thus rendered. Can also be set via `limel-config`. Setting this property will override the global config.
          * @alpha
         */
        "whitelist"?: CustomElementDefinition[];
    }
    /**
     * @exampleComponent limel-example-menu-basic
     * @exampleComponent limel-example-menu-disabled
     * @exampleComponent limel-example-menu-open-direction
     * @exampleComponent limel-example-menu-surface-width
     * @exampleComponent limel-example-menu-separators
     * @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-sub-menus
     * @exampleComponent limel-example-menu-sub-menu-lazy-loading
     * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
     * @exampleComponent limel-example-menu-searchable
     * @exampleComponent limel-example-menu-composite
     */
    interface LimelMenu {
        /**
          * Defines whether the menu should show badges.
         */
        "badgeIcons": boolean;
        /**
          * :::warning Internal Use Only This property is for internal use only. We need it for now, but want to find a better implementation of the functionality it currently enables. If and when we do so, this property will be removed without prior notice. If you use it, your code _will_ break in the future. :::
         */
        "currentSubMenu": MenuItem;
        /**
          * Sets the disabled state of the menu.
         */
        "disabled": boolean;
        /**
          * Message to display when search returns 0 results.
         */
        "emptyResultMessage"?: string;
        /**
          * Renders list items in a grid layout, rather than a vertical list
         */
        "gridLayout": boolean;
        /**
          * A list of items and separators to show in the menu.
         */
        "items": Array<MenuItem | ListSeparator>;
        /**
          * :::warning Internal Use Only This property is for internal use only. We need it for now, but want to find a better implementation of the functionality it currently enables. If and when we do so, this property will be removed without prior notice. If you use it, your code _will_ break in the future. :::
         */
        "loading": boolean;
        /**
          * Sets the open state of the menu.
         */
        "open": boolean;
        /**
          * Decides the menu's location in relation to its trigger
         */
        "openDirection": OpenDirection;
        /**
          * A root breadcrumb item to show above the menu items. Clicking it navigates back from a sub-menu to the root menu.
         */
        "rootItem": BreadcrumbsItem;
        /**
          * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `MenuItem`:s.  See the docs for the type `MenuSearcher` for type information on the searcher function itself.
         */
        "searcher": MenuSearcher;
        /**
          * Decides the width of menu's dropdown
         */
        "surfaceWidth": SurfaceWidth;
    }
    /**
     * @private 
     */
    interface LimelMenuList {
        /**
          * Set to `true` if the list should display larger icons with a background
         */
        "badgeIcons": boolean;
        /**
          * Size of the icons in the list
         */
        "iconSize": IconSize;
        /**
          * List of items to display
         */
        "items": Array<MenuItem | ListSeparator>;
        /**
          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
         */
        "maxLinesSecondaryText": number;
    }
    /**
     * @private 
     */
    interface LimelMenuSurface {
        /**
          * Clicks in this element should not be prevented when the menu surface is open
         */
        "allowClicksElement": HTMLElement;
        /**
          * True if the menu surface is open, false otherwise
         */
        "open": boolean;
    }
    /**
     * This is a private component, used to render a notched outline
     * around all input elements that can have a floating label.
     * Inspired by Material Design's styles for input fields.
     * We use it in various components to unify styles and avoid
     * repeating code.
     * :::note
     * The component has `shadow: false`. This is to improve performance,
     * and ensure that its internal elements are considered as internal parts
     * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
     * would be correctly associated with the input element's `id`, in the consumer component.
     * :::
     * @exampleComponent limel-example-notched-outline-basic
     * @private 
     */
    interface LimelNotchedOutline {
        /**
          * Set to `true` to indicate that the input element is disabled. This applies proper visual styles, such as making the outlines and the label transparent.
         */
        "disabled": boolean;
        /**
          * Set to `true` when the consumer element needs to render the label above the input element, despite existence of a `value`. For example in the `text-editor` or `limel-select`, where the default layout requires a floating label.
         */
        "hasFloatingLabel": boolean;
        /**
          * Set to `true` when the consumer element displays a leading icon. This applies proper visual styles, such as rendering the label correctly placed beside the leading icon.
         */
        "hasLeadingIcon": boolean;
        /**
          * Set to `true` when the user has entered a value for the input element, shrinking the label in size, and visually rendering it above the entered value.
         */
        "hasValue": boolean;
        /**
          * Set to `true` to indicate that the current value of the input element is invalid. This applies proper visual styles, such as making the outlines red.
         */
        "invalid": boolean;
        /**
          * Label to display for the input element. :::important Note that the input element of the consumer component will be labeled by this label, using the `labelId` prop. :::
         */
        "label"?: string;
        /**
          * The `id` of the input element which should be labeled by the provided label.
         */
        "labelId"?: string;
        /**
          * Set to `true` when the input element is readonly. This applies proper visual styles, such as making the outline transparent.
         */
        "readonly": boolean;
        /**
          * Set to `true` when the input element is required. This applies proper visual styles, such as inclusion of an asterisk beside the label.
         */
        "required": boolean;
    }
    /**
     * @exampleComponent limel-example-picker-basic
     * @exampleComponent limel-example-picker-multiple
     * @exampleComponent limel-example-picker-icons
     * @exampleComponent limel-example-picker-pictures
     * @exampleComponent limel-example-picker-value-as-object
     * @exampleComponent limel-example-picker-value-as-object-with-actions
     * @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'`.
         */
        "actionPosition": ActionPosition;
        /**
          * Scroll behavior of the custom static actions, when user scrolls in the picker's results dropdown. Can be set to `'scroll'` which means the action items will scroll together with the list, or `'sticky'` which retains their position at the top or bottom of the drop down while scrolling.
         */
        "actionScrollBehavior": ActionScrollBehavior;
        /**
          * Static actions that can be clicked by the user.
         */
        "actions": Array<ListItem<Action>>;
        /**
          * Only used if no `searcher` is provided. The picker will then use a default search function that filters the `allItems` based on the `text` and `secondaryText` properties of the items. This way, custom search functions are typically only needed when the search is done on the server. For performance reasons, the default searcher will never return more than 20 items, but if there are more than 20 items, the rest can be found by typing more characters in the search field.
         */
        "allItems"?: Array<ListItem<PickerValue>>;
        /**
          * Whether badge icons should be used in the result list or not
         */
        "badgeIcons": boolean;
        /**
          * Sets delimiters between chips. Works only when `multiple` is `true`.
         */
        "delimiter": string;
        /**
          * True if the picker should be disabled
         */
        "disabled": boolean;
        /**
          * A message to display when the search returned an empty result
         */
        "emptyResultMessage": string;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
         */
        "invalid": boolean;
        /**
          * Text to display for the input field of the picker
         */
        "label": string;
        /**
          * Leading icon to show to the far left in the text field
         */
        "leadingIcon": string;
        /**
          * True if multiple values are allowed
         */
        "multiple": boolean;
        /**
          * Set to `true` to disable adding and removing items, but allow interaction with existing items.
         */
        "readonly": boolean;
        /**
          * True if the control requires a value
         */
        "required": boolean;
        /**
          * Search label to display in the input field when searching
         */
        "searchLabel": string;
        /**
          * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `ListItem`:s.  See the docs for the type `Searcher` for type information on the searcher function itself.
         */
        "searcher"?: Searcher;
        /**
          * Currently selected value or values. Where the value can be an object.
         */
        "value": ListItem<PickerValue> | Array<ListItem<PickerValue>>;
    }
    /**
     * 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.
     * ## 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-basic
     * @exampleComponent limel-example-popover-trigger-interaction
     * @exampleComponent limel-example-popover-styling
     */
    interface LimelPopover {
        /**
          * True if the content within the popover should be visible
         */
        "open": boolean;
        /**
          * Decides the popover's location in relation to its trigger
         */
        "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.
     * When the limel-portal component is used, it creates a new DOM node (a div element)
     * and appends it to a parent element (by default, the body of the document).
     * The child elements of the limel-portal are then moved from
     * their original location in the DOM to this new div element.
     * This technique is often used to overcome CSS stacking context issues,
     * or to render UI elements like modals, dropdowns, tooltips, etc.,
     * that need to visually "break out" of their container.
     * Using this component, we ensure that the content is always rendered in the
     * correct position, and never covers its own trigger, or another component
     * that is opened in the stacking layer. This way, we don't need to worry about
     * z-indexes, or other stacking context issues.
     * :::important
     * There are some caveats when using this component
     * 1. Events might not bubble up as expected since the content is moved out to
     * another DOM node.
     * 2. Any styling that is applied to content from the parent will be lost, if the
     * content is just another web-component it will work without any issues.
     * Alternatively, use the `style=""` html attribute.
     * 3. 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.
     * 4. 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-basic
     */
    interface LimelPortal {
        /**
          * The element that the content should be positioned relative to. Defaults to the limel-portal element.
         */
        "anchor"?: HTMLElement;
        /**
          * A unique ID.
         */
        "containerId": string;
        /**
          * Dynamic styling that can be applied to the container holding the content.
         */
        "containerStyle": object;
        /**
          * Used to make a dropdown have the same width as the trigger, for example in `limel-picker`.
         */
        "inheritParentWidth": boolean;
        /**
          * Decides which direction the portal content should open.
         */
        "openDirection": OpenDirection;
        /**
          * Position of the content.
         */
        "position": 'fixed' | 'absolute';
        /**
          * True if the content within the portal should be visible.  If the content is from within a dialog for instance, this can be set to true from false when the dialog opens to position the content properly.
         */
        "visible": boolean;
    }
    /**
     * This component displays a profile picture, while allowing the user
     * to change it via a file input or drag-and-drop.
     * It supports client-side image resizing and conversion,
     * as well as a simple lazy-loading mechanism.
     * @exampleComponent limel-example-profile-picture-basic
     * @exampleComponent limel-example-profile-picture-helper-text
     * @exampleComponent limel-example-profile-picture-icon
     * @exampleComponent limel-example-profile-picture-with-value
     * @exampleComponent limel-example-profile-picture-loading
     * @exampleComponent limel-example-profile-picture-image-fit
     * @exampleComponent limel-example-profile-picture-composite
     * @exampleComponent limel-example-profile-picture-resize-contain
     * @exampleComponent limel-example-profile-picture-resize-cover
     * @exampleComponent limel-example-profile-picture-resize-fallback
     * @exampleComponent limel-example-profile-picture-styling
     * @beta 
     */
    interface LimelProfilePicture {
        /**
          * A comma-separated list of accepted file types.
         */
        "accept": string;
        /**
          * Disables user interaction. Prevents uploading new pictures or removing existing ones.
         */
        "disabled": boolean;
        /**
          * Helper text shown as a tooltip on hover or focus.
         */
        "helperText"?: string;
        /**
          * Placeholder icon of the component, displayed when no image is present.
         */
        "icon": string | Icon;
        /**
          * How the image should fit within the container. - `cover` will fill the container and crop excess parts. - `contain` will scale the image to fit within the container without cropping.
         */
        "imageFit": 'cover' | 'contain';
        /**
          * Marks the control as invalid.
         */
        "invalid": boolean;
        /**
          * Accessible label for the the browse button.
         */
        "label": string;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language": Languages;
        /**
          * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside. This does _not_ disable the interactivity of the component!
         */
        "loading": boolean;
        /**
          * Readonly prevents changing the value but allows interaction like focus.
         */
        "readonly": boolean;
        /**
          * Marks the control as required.
         */
        "required": boolean;
        /**
          * Optional client-side resize before emitting the file. If provided, the selected image will be resized on the client device. :::note HEIC may not decode in all browsers; when decoding fails, the original file will be emitted. See the examples for more info. :::
         */
        "resize"?: ResizeOptions;
        /**
          * Current image to display. Either a URL string or a `FileInfo` with an href.
         */
        "value"?: string | FileInfo;
    }
    /**
     * @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.
         */
        "disabled": boolean;
        /**
          * What flow items to render
         */
        "flowItems": FlowItem[];
        /**
          * Disables the progress flow when `true`. This does not visualize the component that much differently. But since the component does not provide any feedback that users can interact with the component, it makes it perfect for illustrative and informative porpuses.
         */
        "readonly": boolean;
    }
    /**
     * @private 
     */
    interface LimelProgressFlowItem {
        /**
          * True for current step
         */
        "currentStep": boolean;
        /**
          * True if the flow item should be disabled
         */
        "disabled": boolean;
        /**
          * The flow item that should be rendered
         */
        "item": FlowItem;
        /**
          * True if the flow item should be readonly
         */
        "readonly": boolean;
    }
    /**
     * The ProseMirror adapter offers a rich text editing experience with markdown support.
     * [Read more...](https://prosemirror.net/)
     * @exampleComponent limel-example-prosemirror-adapter-basic
     * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
     * @beta 
     * @private 
     */
    interface LimelProsemirrorAdapter {
        /**
          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
         */
        "contentType": 'markdown' | 'html';
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha
         */
        "customElements": CustomElementDefinition[];
        /**
          * 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.
         */
        "disabled"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha
         */
        "triggerCharacters": TriggerCharacter[];
        /**
          * Specifies the visual appearance of the editor.
         */
        "ui": EditorUiType;
        /**
          * The value of the editor, expected to be markdown
         */
        "value": string;
    }
    /**
     * The Radio Button component provides a convenient way to create a group of radio buttons
     * from an array of options. Radio buttons allow users to select a single option from
     * multiple choices, making them ideal for exclusive selections.
     * :::note
     * A single radio button is never useful in a UI. Radio buttons should always come in groups
     * of at least 2 options where only one can be selected at a time.
     * :::
     * @exampleComponent limel-example-radio-button-group-basic
     * @exampleComponent limel-example-radio-button-group-deselect-selected
     * @exampleComponent limel-example-radio-button-group-icons
     * @exampleComponent limel-example-radio-button-group-multiple-lines
     * @beta 
     */
    interface LimelRadioButtonGroup {
        /**
          * Set to `true` if the radio button group should display larger icons with a background
         */
        "badgeIcons": boolean;
        /**
          * Disables all radio buttons when `true`
         */
        "disabled": boolean;
        /**
          * Array of radio button options to display
         */
        "items": Array<ListItem | ListSeparator>;
        /**
          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
         */
        "maxLinesSecondaryText": number;
        /**
          * The currently selected item in the radio button group. This is a ListItem object that contains the value and other properties of the selected item. If no item is selected, this will be `undefined`.
         */
        "selectedItem"?: ListItem<string | number>;
    }
    /**
     * @exampleComponent limel-example-select
     * @exampleComponent limel-example-select-with-icons
     * @exampleComponent limel-example-select-with-separators
     * @exampleComponent limel-example-select-with-secondary-text
     * @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-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.
         */
        "disabled": boolean;
        /**
          * Optional helper text to display below the input field when it has focus.
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the select is invalid.
         */
        "invalid": boolean;
        /**
          * Text to display next to the select.
         */
        "label": string;
        /**
          * Set to `true` to allow multiple values to be selected.
         */
        "multiple": boolean;
        /**
          * List of options.
         */
        "options": Array<Option | ListSeparator>;
        /**
          * Set to `true` to make the field read-only. This visualizes the component slightly differently. But shows no visual sign indicating that the component is disabled or can ever become interactable.
         */
        "readonly": boolean;
        /**
          * True if the control requires a value.
         */
        "required": boolean;
        /**
          * Currently selected value or values. If `multiple` is `true`, this must be an array. Otherwise it must be a single value.
         */
        "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.
         */
        "badge"?: number | string;
        /**
          * Set to `true` if shortcut is disabled.
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the shortcut.
         */
        "icon": string;
        /**
          * The text to show below the shortcut. Long label will be truncated.
         */
        "label"?: string;
        /**
          * If supplied, the shortcut will be a clickable link.
         */
        "link"?: Link;
    }
    /**
     * @exampleComponent limel-example-slider-basic
     * @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.
         */
        "disabled": boolean;
        /**
          * Default value: 1. The factor that the properties `value`, `valuemax`, `valuemin`, and `step` are multiplied by. On `change` divides the value by the factor, so the original format stays the same.
         */
        "factor": number;
        /**
          * Optional helper text to display below the slider
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the slider is invalid.
         */
        "invalid": boolean;
        /**
          * Label to display next to the input
         */
        "label": string;
        /**
          * Disables the slider when `true`. This visualizes the slider slightly differently. But shows no visual sign indicating that the slider field is disabled or can ever become interactable.
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the slider is required.
         */
        "required": boolean;
        /**
          * The stepping interval to use when adjusting the value
         */
        "step": number;
        /**
          * Unit to display next to the value
         */
        "unit": string;
        /**
          * The value of the input
         */
        "value": number;
        /**
          * The maximum value allowed
         */
        "valuemax": number;
        /**
          * The minimum value allowed
         */
        "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-with-action
     * @exampleComponent limel-example-snackbar-with-changing-messages
     * @exampleComponent limel-example-snackbar-dismissible
     * @exampleComponent limel-example-snackbar-persistent
     * @exampleComponent limel-example-snackbar-persistent-non-dismissible
     */
    interface LimelSnackbar {
        /**
          * The text to display for the action button.
         */
        "actionText": string;
        /**
          * When `true` displays a dismiss button on the snackbar, allowing users to close it.
         */
        "dismissible": boolean;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * The text message to display.
         */
        "message": string;
        /**
          * Whether to show the snackbar with space for multiple lines of text
          * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.
         */
        "multiline": boolean;
        /**
          * `true` if the snackbar is open, `false` otherwise.
         */
        "open": boolean;
        /**
          * Show the snackbar
          * @deprecated Use the `open` property instead.
         */
        "show": () => Promise<void>;
        /**
          * The amount of time in milliseconds to show the snackbar. If set to `-1`, the snackbar will be persistent. This means: - either the end user will need to close it manually, which requires the `dismissible` property to be set to `true`. - or the snackbar needs to be closed programmatically.
         */
        "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
         */
        "limeBranded": boolean;
        /**
          * Determines the size of the spinner.
         */
        "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-loading
     * @exampleComponent limel-example-split-button-repeat-default-command
     */
    interface LimelSplitButton {
        /**
          * Set to `true` to disable the button.
         */
        "disabled": boolean;
        /**
          * Set icon for the button
         */
        "icon": string;
        /**
          * A list of items and separators to show in the menu.
         */
        "items": Array<MenuItem | ListSeparator>;
        /**
          * The text to show on the default action part of the button.
         */
        "label": string;
        /**
          * Set to `true` to put the button in the `loading` state. This also disables the button.
         */
        "loading": boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
         */
        "loadingFailed": boolean;
        /**
          * Set to `true` to make the button primary.
         */
        "primary": boolean;
    }
    /**
     * The Switch component is a fundamental element in UI design that serves as a toggle switch
     * to control the state of a specific setting or option in an application or website.
     * The two distinct positions of the Switch are visually indicative of the two states:
     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
     * The Switch component is widely used in user interfaces to enable users to
     * quickly and intuitively change binary settings.
     * :::important
     * Checkboxes are sometimes used interchangeably with switches in user interfaces.
     * But there is an important difference between the two! Please read our guidelines about
     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
     * @exampleComponent limel-example-switch
     * @exampleComponent limel-example-switch-helper-text
     * @exampleComponent limel-example-switch-readonly
     */
    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.
         */
        "disabled": boolean;
        /**
          * Optional helper text to display below the switch
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value is invalid.
         */
        "invalid": boolean;
        /**
          * Label to display next to the switch
         */
        "label": string;
        /**
          * Disables the switch when `true`. This visualizes the switch slightly differently. But shows no visual sign indicating that the switch is disabled or can ever become interactable.
         */
        "readonly": boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * The value of the switch
         */
        "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
         */
        "activeRow": RowData;
        /**
          * Column aggregates to be displayed in the table
         */
        "aggregates": ColumnAggregate[];
        /**
          * Columns used to display the data
         */
        "columns": Column[];
        /**
          * Data to be displayed in the table
         */
        "data": object[];
        /**
          * A message to display when the table has no data
         */
        "emptyMessage": string;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * Defines the layout of the table, based on how width of the columns are calculated.  - `default`: makes columns as wide as their contents. - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width. - `stretchColumns`: stretches all columns to fill the available width when possible. - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
         */
        "layout": Layout;
        /**
          * Set to `true` to trigger loading animation
         */
        "loading": boolean;
        /**
          * Set to either `local` or `remote` to change how the table handles the loaded data. When in `local` mode, all sorting and pagination will be done locally with the data given. When in `remote` mode, the consumer is responsible to give the table new data when a `load` event occurs
         */
        "mode": 'local' | 'remote';
        /**
          * Set to `true` to enable reordering of the columns by dragging them
         */
        "movableColumns": boolean;
        /**
          * The page to show
         */
        "page": number;
        /**
          * Number of rows per page
         */
        "pageSize": number;
        /**
          * Enables row selection
         */
        "selectable": boolean;
        /**
          * Selected data. Requires `selectable` to be true.
         */
        "selection": object[];
        /**
          * The initial sorted columns
         */
        "sorting": ColumnSorter[];
        /**
          * The number of total rows available for the data
         */
        "totalRows": number;
    }
    /**
     * A rich text editor that offers a rich text editing experience with markdown support,
     * in the sense that you can easily type markdown syntax and see the rendered
     * result as rich text in real-time. For instance, you can type `# Hello, world!`
     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
     * @exampleComponent limel-example-text-editor-basic
     * @exampleComponent limel-example-text-editor-as-form-component
     * @exampleComponent limel-example-text-editor-with-markdown
     * @exampleComponent limel-example-text-editor-with-html
     * @exampleComponent limel-example-text-editor-with-tables
     * @exampleComponent limel-example-text-editor-with-inline-images-file-storage
     * @exampleComponent limel-example-text-editor-with-inline-images-base64
     * @exampleComponent limel-example-text-editor-allow-resize
     * @exampleComponent limel-example-text-editor-size
     * @exampleComponent limel-example-text-editor-ui
     * @exampleComponent limel-example-text-editor-custom-element
     * @exampleComponent limel-example-text-editor-triggers
     * @exampleComponent limel-example-text-editor-composite
     * @beta 
     */
    interface LimelTextEditor {
        /**
          * Set to `true` to allow the user to vertically resize the editor. Set to `false` to disable the resize functionality.
         */
        "allowResize": boolean;
        /**
          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
         */
        "contentType": 'markdown' | 'html';
        /**
          * A list of custom elements  Any `CustomElement` that should be used inside the text editor needs to be defined here.
          * @private 
          * @alpha
         */
        "customElements": CustomElementDefinition[];
        /**
          * 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.
         */
        "disabled"?: boolean;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the editor is invalid.
         */
        "invalid"?: boolean;
        /**
          * The label of the editor
         */
        "label"?: string;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * The placeholder text shown inside the input field, when the field is empty.
         */
        "placeholder"?: string;
        /**
          * Set to `true` to make the component read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit. :::note Consider that it might be better to use `limel-markdown` instead of `limel-text-editor` when the goal is visualizing data. :::
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.  :::important An empty but required field is not automatically considered invalid. You must make sure to check the validity of the field on your own, and properly handle the `invalid` state. :::
         */
        "required"?: boolean;
        /**
          * A set of trigger characters  Defining a character here will enable trigger events to be sent if the character is detected in the editor.
          * @private 
          * @alpha
         */
        "triggers": TriggerCharacter[];
        /**
          * Specifies the visual appearance of the editor.  - `standard`: The default editor appearance with a full toolbar and    standard layout. - `minimal`: A compact editor appearance, ideal for limited space    scenarios such as mobile devices. In this mode, the toolbar is hidden    until the editor is focused. - `no-toolbar`: A basic textarea appearance without any text styling toolbar.    This mode is suitable for scenarios where you want to provide a simple    text input without any visible formatting options; but still provide    support for markdown syntax and rich text, using hotkeys or when pasting.
         */
        "ui"?: EditorUiType;
        /**
          * Description of the text inside the editor as markdown
         */
        "value": string;
    }
    /**
     * This component is a menu for editing a link in the text editor.
     * It allows the user to input the text and url for the link.
     * @beta 
     * @private 
     */
    interface LimelTextEditorLinkMenu {
        /**
          * Open state of the link-menu dialog
         */
        "isOpen": boolean;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * The link
         */
        "link": EditorTextLink;
    }
    /**
     * 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 (the same shadowRoot).
     * Often, it's easiest to just place them next to each other like in the example
     * below, but if you need to, you can place them differently.
     * ```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-basic
     * @exampleComponent limel-example-tooltip-max-character
     * @exampleComponent limel-example-tooltip-composite
     */
    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.
         */
        "elementId": string;
        /**
          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
         */
        "helperLabel"?: string;
        /**
          * Short descriptive text of the owner element.
         */
        "label": string;
        /**
          * The maximum amount of characters before rendering 'label' and 'helperLabel' in two rows.
         */
        "maxlength"?: number;
        /**
          * Decides the tooltip's location in relation to its trigger.
         */
        "openDirection": OpenDirection;
    }
    /**
     * This component is used internally by `limel-tooltip`.
     * @private 
     */
    interface LimelTooltipContent {
        /**
          * Read more in tooltip.tsx
         */
        "helperLabel"?: string;
        /**
          * Read more in tooltip.tsx
         */
        "label": string;
        /**
          * Read more in tooltip.tsx
         */
        "maxlength"?: number;
    }
}
export interface LimelActionBarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelActionBarElement;
}
export interface LimelActionBarItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelActionBarItemElement;
}
export interface LimelActionBarOverflowMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelActionBarOverflowMenuElement;
}
export interface LimelBreadcrumbsCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelBreadcrumbsElement;
}
export interface LimelButtonGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelButtonGroupElement;
}
export interface LimelCardCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelCardElement;
}
export interface LimelChartCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelChartElement;
}
export interface LimelCheckboxCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelCheckboxElement;
}
export interface LimelChipCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelChipElement;
}
export interface LimelChipSetCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelChipSetElement;
}
export interface LimelCodeEditorCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelCodeEditorElement;
}
export interface LimelCollapsibleSectionCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelCollapsibleSectionElement;
}
export interface LimelColorPickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelColorPickerElement;
}
export interface LimelColorPickerPaletteCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelColorPickerPaletteElement;
}
export interface LimelDatePickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelDatePickerElement;
}
export interface LimelDialogCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelDialogElement;
}
export interface LimelDockCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelDockElement;
}
export interface LimelDockButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelDockButtonElement;
}
export interface LimelFileCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelFileElement;
}
export interface LimelFileDropzoneCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelFileDropzoneElement;
}
export interface LimelFileInputCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelFileInputElement;
}
export interface LimelFileViewerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelFileViewerElement;
}
export interface LimelFlatpickrAdapterCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelFlatpickrAdapterElement;
}
export interface LimelFormCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelFormElement;
}
export interface LimelInputFieldCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelInputFieldElement;
}
export interface LimelListCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelListElement;
}
export interface LimelMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelMenuElement;
}
export interface LimelMenuListCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelMenuListElement;
}
export interface LimelMenuSurfaceCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelMenuSurfaceElement;
}
export interface LimelPickerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelPickerElement;
}
export interface LimelPopoverCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelPopoverElement;
}
export interface LimelProfilePictureCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelProfilePictureElement;
}
export interface LimelProgressFlowCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelProgressFlowElement;
}
export interface LimelProgressFlowItemCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelProgressFlowItemElement;
}
export interface LimelProsemirrorAdapterCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelProsemirrorAdapterElement;
}
export interface LimelRadioButtonGroupCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelRadioButtonGroupElement;
}
export interface LimelSelectCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelSelectElement;
}
export interface LimelSliderCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelSliderElement;
}
export interface LimelSnackbarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelSnackbarElement;
}
export interface LimelSplitButtonCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelSplitButtonElement;
}
export interface LimelSwitchCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelSwitchElement;
}
export interface LimelTabBarCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelTabBarElement;
}
export interface LimelTabPanelCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelTabPanelElement;
}
export interface LimelTableCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelTableElement;
}
export interface LimelTextEditorCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelTextEditorElement;
}
export interface LimelTextEditorLinkMenuCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelTextEditorLinkMenuElement;
}
declare global {
    /**
     * This component enhances the visual effects, when the `tiltFollowingTheCursor`
     * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
     * This component should be added to the HTML structure of the consumer component.
     * This component carries its own styles which are needed to create a glow effect on the
     * 3D element within the parent element, when the parent is hovered.
     * The parent element must be using the `tiltFollowingTheCursor` utility function
     * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
     * affect parts of the styles of this 3D glow effect.
     * @private 
     */
    interface HTMLLimel3dHoverEffectGlowElement extends Components.Limel3dHoverEffectGlow, HTMLStencilElement {
    }
    var HTMLLimel3dHoverEffectGlowElement: {
        prototype: HTMLLimel3dHoverEffectGlowElement;
        new (): HTMLLimel3dHoverEffectGlowElement;
    };
    /**
     * 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-basic
     * @exampleComponent limel-example-action-bar-overflow-menu
     * @exampleComponent limel-example-action-bar-selected-item
     * @exampleComponent limel-example-action-bar-colors
     * @exampleComponent limel-example-action-bar-floating
     * @exampleComponent limel-example-action-bar-floating-expand
     * @exampleComponent limel-example-action-bar-styling
     * @exampleComponent limel-example-action-bar-as-primary-component
     * @exampleComponent limel-example-action-bar-icon-title
     */
    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;
    };
    /**
     * This component displays an avatar, representing Lime AI assistants.
     * :::warning
     * This is a private component used internally in the Lime's various applications,
     * which is the reason for having it in Lime Elements —to ease the distribution
     * of the component across all our apps.
     * 3rd party developers are not allowed use this component directly.
     * :::
     * @private 
     * @exampleComponent limel-example-ai-avatar-basic
     * @exampleComponent limel-example-ai-avatar-colors
     */
    interface HTMLLimelAiAvatarElement extends Components.LimelAiAvatar, HTMLStencilElement {
    }
    var HTMLLimelAiAvatarElement: {
        prototype: HTMLLimelAiAvatarElement;
        new (): HTMLLimelAiAvatarElement;
    };
    /**
     * 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;
    };
    /**
     * A Breadcrumb consists of a list of distinct "places" that a user has gone through,
     * before ending up where they are right now, in a website or an application.
     * These "places" can be for example _pages_ of a website, which are hierarchically
     * laid out before the current page that the user is looking at.
     * They could also be _steps_ which the user has gone through, which perhaps have no
     * hierarchical relation with each other, but has eventually led the user "here".
     * :::note
     * - Where the user currently is, is always the last step of the breadcrumb.
     * - A breadcrumbs never shows where users can go after this place.
     * It only illustrates where user has been before ending up here.
     * If the path that a user can take is not changing and if next steps are clear,
     * you can use the [Progress flow component](#/component/limel-progress-flow) instead.
     * :::
     * Breadcrumbs are often placed horizontally before the main content of the current screen.
     * @exampleComponent limel-example-breadcrumbs-links
     * @exampleComponent limel-example-breadcrumbs-buttons
     * @exampleComponent limel-example-breadcrumbs-icons
     * @exampleComponent limel-example-breadcrumbs-divider
     * @exampleComponent limel-example-breadcrumbs-icon-color
     * @exampleComponent limel-example-breadcrumbs-styling
     */
    interface HTMLLimelBreadcrumbsElement extends Components.LimelBreadcrumbs, HTMLStencilElement {
    }
    var HTMLLimelBreadcrumbsElement: {
        prototype: HTMLLimelBreadcrumbsElement;
        new (): HTMLLimelBreadcrumbsElement;
    };
    /**
     * @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;
    };
    /**
     * Card is a component that displays content about a single topic,
     * in a structured way. It can contain a header, and some supporting media such
     * as an image or an icon, a body of text, or optional actions.
     * @exampleComponent limel-example-card-basic
     * @exampleComponent limel-example-card-image
     * @exampleComponent limel-example-card-actions
     * @exampleComponent limel-example-card-clickable
     * @exampleComponent limel-example-card-orientation
     * @exampleComponent limel-example-card-slot
     * @exampleComponent limel-example-card-styling
     */
    interface HTMLLimelCardElement extends Components.LimelCard, HTMLStencilElement {
    }
    var HTMLLimelCardElement: {
        prototype: HTMLLimelCardElement;
        new (): HTMLLimelCardElement;
    };
    /**
     * A chart is a graphical representation of data, in which
     * visual symbols such as such bars, dots, lines, or slices, represent
     * each data point, in comparison to others.
     * @exampleComponent limel-example-chart-stacked-bar
     * @exampleComponent limel-example-chart-orientation
     * @exampleComponent limel-example-chart-max-value
     * @exampleComponent limel-example-chart-type-bar
     * @exampleComponent limel-example-chart-type-dot
     * @exampleComponent limel-example-chart-type-area
     * @exampleComponent limel-example-chart-type-line
     * @exampleComponent limel-example-chart-type-pie
     * @exampleComponent limel-example-chart-type-doughnut
     * @exampleComponent limel-example-chart-type-ring
     * @exampleComponent limel-example-chart-type-gantt
     * @exampleComponent limel-example-chart-type-nps
     * @exampleComponent limel-example-chart-multi-axis
     * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
     * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
     * @exampleComponent limel-example-chart-axis-increment
     * @exampleComponent limel-example-chart-clickable-items
     * @exampleComponent limel-example-chart-accessibility
     * @exampleComponent limel-example-chart-styling
     * @exampleComponent limel-example-chart-creative-styling
     * @beta 
     */
    interface HTMLLimelChartElement extends Components.LimelChart, HTMLStencilElement {
    }
    var HTMLLimelChartElement: {
        prototype: HTMLLimelChartElement;
        new (): HTMLLimelChartElement;
    };
    /**
     * The Checkbox component is a classic and essential element in UI design that allows
     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
     * select one or more items from a list of choices.
     * ## States of a Checkbox
     * When a user clicks or taps on the box, it toggles between two states:
     * Checked and Unchecked.
     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
     * The Indeterminate state is typically used when dealing with checkbox groups
     * that have hierarchical relationships or when the group contains sub-items.
     * This state is used to indicate that that some, but not all, of the items in a group are selected.
     * :::important
     * Checkboxes are sometimes used interchangeably with switches in user interfaces.
     * But there is an important difference between the two! Please read our guidelines about
     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
     * @exampleComponent limel-example-checkbox
     * @exampleComponent limel-example-checkbox-helper-text
     * @exampleComponent limel-example-checkbox-readonly
     */
    interface HTMLLimelCheckboxElement extends Components.LimelCheckbox, HTMLStencilElement {
    }
    var HTMLLimelCheckboxElement: {
        prototype: HTMLLimelCheckboxElement;
        new (): HTMLLimelCheckboxElement;
    };
    /**
     * Chips and buttons are both interactive elements in UI design,
     * but they serve different purposes and are used in different contexts.
     * :::warning
     * Do not use the chip component carelessly, as an alternative for
     * [`limel-button`](#/component/limel-button/) in the UI design!
     * **Buttons:**
     * Buttons are used to trigger actions. They are typically used to
     * submit forms, open dialogs, initiate a process, or perform any action
     * that changes the state of the application.
     * Buttons' labels usually contain action words, in other words, the labels is
     * a _verb in imperative mood_ such as "Submit" or "Delete".
     * Buttons are placed in areas where it's clear they will initiate
     * an action when clicked.
     * **Chips:**
     * Chips however are elements which may look like buttons, but they are
     * representing choices, filters, or tags, in a small block
     * or clearly bundled into a group. Chips are rarely used alone in the
     * user interface.
     * They are often used in a so called "chip-set", or placed together in
     * a section of the UI, where the user can expect more than one chip to be present.
     * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
     * or an item in a shopping list.
     * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
     * or opening a page with all posts tagged with the tag represented by the chip,
     * or navigating to a page with more information about the item in the shopping list.
     * :::
     * @exampleComponent limel-example-chip-button
     * @exampleComponent limel-example-chip-link
     * @exampleComponent limel-example-chip-icon-colors
     * @exampleComponent limel-example-chip-image
     * @exampleComponent limel-example-chip-badge
     * @exampleComponent limel-example-chip-filter
     * @exampleComponent limel-example-chip-removable
     * @exampleComponent limel-example-chip-menu
     * @exampleComponent limel-example-chip-loading
     * @exampleComponent limel-example-chip-progress
     * @exampleComponent limel-example-chip-size
     * @exampleComponent limel-example-chip-readonly-border
     * @exampleComponent limel-example-chip-aria-role
     */
    interface HTMLLimelChipElement extends Components.LimelChip, HTMLStencilElement {
    }
    var HTMLLimelChipElement: {
        prototype: HTMLLimelChipElement;
        new (): HTMLLimelChipElement;
    };
    /**
     * :::note
     * **Regarding `click` and `interact` events:**
     * The `interact` event is emitted when a chip is interacted with, and is
     * the recommended way to listen for chip interactions.
     * However, if you need to handle clicks differently depending on which chip
     * was clicked, or whether the click was on a chip or elsewhere, you need to
     * listen to the native `click` event instead.
     * Native `click` events are passed through, and if the click came from
     * a chip, the chip object is available in the event object under
     * `<event object>.Lime.chip`.
     * Example usage:
     * ```ts
     * private handleClick(event: Event) {
     *     if (event && 'Lime' in event && (event.Lime as any).chip) {
     *         if ((event.Lime as { chip: Chip }).chip.href) {
     *             // Chip has href, so let the browser open the link.
     *             return;
     *         }
     *         // handle click on chip without href
     *     } else {
     *         // handle click elsewhere
     *     }
     * }
     * ```
     * :::
     * @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-with-menu-items
     * @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-image
     * @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;
    };
    /**
     * @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;
    };
    /**
     * A collapsible section can be used to group related content together
     * and hide the group when not needed.
     * Using this component can help to:
     * - Save vertical space by hiding non-essential content
     * - Improve content organization and scannability of the user interface
     * - Reduce cognitive load by displaying only a set of relevant information at a time
     * - Or disclose complex information, progressively to the user
     * @exampleComponent limel-example-collapsible-section-basic
     * @exampleComponent limel-example-collapsible-section-actions
     * @exampleComponent limel-example-collapsible-section-with-custom-header-component
     * @exampleComponent limel-example-collapsible-section-external-control
     * @exampleComponent limel-example-collapsible-section-with-slider
     * @exampleComponent limel-example-collapsible-section-invalid
     * @exampleComponent limel-example-collapsible-section-icon
     * @exampleComponent limel-example-collapsible-section-css-props
     */
    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;
    };
    /**
     * Component used to set global configuration for Lime Elements.
     * :::warning
     * **Building something for Lime CRM?** Then you should _NOT_ use this component.
     * Lime CRM already uses this component to set the global configuration for
     * Lime Elements. No matter what problem you are facing at the moment, using
     * this component will not help, and might cause other problems.
     * :::
     * Building your own software, which is using Lime Elements?
     * Then you _might_ need to use this component.
     * @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 [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
     * 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-heading-actions
     * @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 components displays a different label depending on the current given
     * value. A label can consist of a text and an optional icon. If no matching
     * label is found among the given `labels`, the `defaultLabel` will be displayed.
     * One use case of the component is to enhance the visualization of a `boolean`
     * field like a checkbox or switch in a `readonly` state.
     * The reason we offer this component is that the default styling
     * of the Checkbox or Toggle switch in the `readonly` state may not always
     * provide the best way of _visualizing information_, potentially leading to
     * confusion and negatively affecting the end-users' experience.
     * @exampleComponent limel-example-dynamic-label
     * @exampleComponent limel-example-dynamic-label-readonly-boolean
     */
    interface HTMLLimelDynamicLabelElement extends Components.LimelDynamicLabel, HTMLStencilElement {
    }
    var HTMLLimelDynamicLabelElement: {
        prototype: HTMLLimelDynamicLabelElement;
        new (): HTMLLimelDynamicLabelElement;
    };
    /**
     * 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-menu-items
     * @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 enables you to seamlessly convert any region of the user interface into
     * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.
     * The file dropzone can then be used to allow end-users to upload files
     * by dragging and dropping them into the specified area, for example to trigger an upload process.
     * After receiving the files, the component emits a `filesSelected` event. For unsupported
     * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
     * The event detail would be an array of `FileInfo` objects,
     * each representing a file dropped into the dropzone.
     * @exampleComponent limel-example-file-dropzone
     * @exampleComponent limel-example-file-dropzone-type-filtering
     * @private 
     */
    interface HTMLLimelFileDropzoneElement extends Components.LimelFileDropzone, HTMLStencilElement {
    }
    var HTMLLimelFileDropzoneElement: {
        prototype: HTMLLimelFileDropzoneElement;
        new (): HTMLLimelFileDropzoneElement;
    };
    /**
     * This component enables you to seamlessly transform any other clickable component that
     * generates a `click` event into a file input selector.
     * To use it, just wrap any clickable component inside the `limel-file-input` component.
     * Upon reception of the `click` event this component will open the native file selection
     * dialog.
     * After receiving the files, the component emits a `filesSelected` event.
     * The event detail would be an array of `FileInfo` objects,
     * each representing a file dropped into the dropzone.
     * @exampleComponent limel-example-file-input
     * @exampleComponent limel-example-file-input-type-filtering
     * @private 
     */
    interface HTMLLimelFileInputElement extends Components.LimelFileInput, HTMLStencilElement {
    }
    var HTMLLimelFileInputElement: {
        prototype: HTMLLimelFileInputElement;
        new (): HTMLLimelFileInputElement;
    };
    /**
     * This is a smart component that automatically detects
     * the most common file types such as image, audio, video, and text,
     * and properly displays them in the browser.
     * The component is also capable to render the most common office files.
     * :::note
     * Image files will always be contained in their containers, which means
     * they automatically increase or decrease in size to fill their containing box
     * whilst preserving their aspect-ratio.
     * Text and PDF files will also always respect the width and height of the
     * container in which the `limel-file-viewer` is loaded.
     * :::
     * For some file types such as text and images, the component will display a
     * download button and a button to open the file in a new browser tab.
     * This will allow users to preview the file in a fullscreen mode with the
     * browser and take advantage of for example native zooming and panning
     * functionalities.
     * @exampleComponent limel-example-file-viewer-basic
     * @exampleComponent limel-example-file-viewer-office
     * @exampleComponent limel-example-file-viewer-filename
     * @exampleComponent limel-example-file-viewer-inbuilt-actions
     * @exampleComponent limel-example-file-viewer-custom-actions
     * @exampleComponent limel-example-file-viewer-with-picker
     * @beta 
     */
    interface HTMLLimelFileViewerElement extends Components.LimelFileViewer, HTMLStencilElement {
    }
    var HTMLLimelFileViewerElement: {
        prototype: HTMLLimelFileViewerElement;
        new (): HTMLLimelFileViewerElement;
    };
    /**
     * 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 - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
     * @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-with-help
     * @exampleComponent limel-example-form-row-layout
     */
    interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
    }
    var HTMLLimelFormElement: {
        prototype: HTMLLimelFormElement;
        new (): HTMLLimelFormElement;
    };
    /**
     * This component is deprecated and will be removed in a future version of
     * Lime Elements. Please use CSS for your flexible container needs 🙂
     * @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
     * @private 
     */
    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-slot-actions
     * @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;
    };
    /**
     * A good design is self-explanatory! However, sometimes concepts are
     * too complex to understand, no matter how well-designed a user interface is.
     * In such cases, contextual help can be a great way to provide users with
     * help precisely where and when users need it.
     * In app interface design, providing contextual help emerges as a viable practice
     * for enhancing user experience and usability.
     * Contextual help serves as a quick-to-access guiding,
     * empowering users to more easily understand and navigate through
     * the intricacies of an application.
     * Using this component designers empower users to grasp the functionality
     * of an app more effortlessly, minimizes the learning curve,
     * transforming complex features into accessible opportunities for exploration.
     * @exampleComponent limel-example-help
     * @exampleComponent limel-example-read-more
     * @exampleComponent limel-example-open-direction
     * @exampleComponent limel-example-placement
     */
    interface HTMLLimelHelpElement extends Components.LimelHelp, HTMLStencilElement {
    }
    var HTMLLimelHelpElement: {
        prototype: HTMLLimelHelpElement;
        new (): HTMLLimelHelpElement;
    };
    /**
     * Help content
     * This is scrollable content that is placed in the popover of the Help component.
     * Moved here mostly to avoid having inlined styles in the parent component.
     * Since you cannot send styles to the Portal component, we need to have this
     * child component.
     * @private 
     */
    interface HTMLLimelHelpContentElement extends Components.LimelHelpContent, HTMLStencilElement {
    }
    var HTMLLimelHelpContentElement: {
        prototype: HTMLLimelHelpContentElement;
        new (): HTMLLimelHelpContentElement;
    };
    /**
     * 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.
     * @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
     * @exampleComponent limel-example-helper-line-empty
     * @exampleComponent limel-example-helper-line-animation
     * @private 
     */
    interface HTMLLimelHelperLineElement extends Components.LimelHelperLine, HTMLStencilElement {
    }
    var HTMLLimelHelperLineElement: {
        prototype: HTMLLimelHelperLineElement;
        new (): HTMLLimelHelperLineElement;
    };
    /**
     * :::important
     * To install your icon set correctly, please read the [documentation here](#/).
     * :::
     * The size and color of the icon is normally set in CSS, however there are a few
     * standard sizes defined that can be used with the `size` property.
     * @exampleComponent limel-example-icon-name
     * @exampleComponent limel-example-icon-size
     * @exampleComponent limel-example-icon-color
     */
    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-icon
     * @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-primary-slot
     * @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;
    };
    /**
     * The linear progress component can be used to visualize the current state of a progress in a scale;
     * for example percentage of completion of a task.
     * @exampleComponent limel-example-linear-progress
     * @exampleComponent limel-example-linear-progress-indeterminate
     * @exampleComponent limel-example-linear-progress-accessible-label
     * @exampleComponent limel-example-linear-progress-color
     */
    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-separator
     * @exampleComponent limel-example-list-icons
     * @exampleComponent limel-example-list-badge-icons
     * @exampleComponent limel-example-list-pictures
     * @exampleComponent limel-example-list-selectable
     * @exampleComponent limel-example-list-checkbox-icons
     * @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;
    };
    /**
     * The Markdown component receives markdown syntax
     * and renders it as HTML.
     * @exampleComponent limel-example-markdown-headings
     * @exampleComponent limel-example-markdown-emphasis
     * @exampleComponent limel-example-markdown-lists
     * @exampleComponent limel-example-markdown-links
     * @exampleComponent limel-example-markdown-images
     * @exampleComponent limel-example-markdown-code
     * @exampleComponent limel-example-markdown-footnotes
     * @exampleComponent limel-example-markdown-tables
     * @exampleComponent limel-example-markdown-html
     * @exampleComponent limel-example-markdown-keys
     * @exampleComponent limel-example-markdown-blockquotes
     * @exampleComponent limel-example-markdown-horizontal-rule
     * @exampleComponent limel-example-markdown-composite
     * @exampleComponent limel-example-markdown-custom-component
     */
    interface HTMLLimelMarkdownElement extends Components.LimelMarkdown, HTMLStencilElement {
    }
    var HTMLLimelMarkdownElement: {
        prototype: HTMLLimelMarkdownElement;
        new (): HTMLLimelMarkdownElement;
    };
    /**
     * @exampleComponent limel-example-menu-basic
     * @exampleComponent limel-example-menu-disabled
     * @exampleComponent limel-example-menu-open-direction
     * @exampleComponent limel-example-menu-surface-width
     * @exampleComponent limel-example-menu-separators
     * @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-sub-menus
     * @exampleComponent limel-example-menu-sub-menu-lazy-loading
     * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
     * @exampleComponent limel-example-menu-searchable
     * @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;
    };
    /**
     * This is a private component, used to render a notched outline
     * around all input elements that can have a floating label.
     * Inspired by Material Design's styles for input fields.
     * We use it in various components to unify styles and avoid
     * repeating code.
     * :::note
     * The component has `shadow: false`. This is to improve performance,
     * and ensure that its internal elements are considered as internal parts
     * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
     * would be correctly associated with the input element's `id`, in the consumer component.
     * :::
     * @exampleComponent limel-example-notched-outline-basic
     * @private 
     */
    interface HTMLLimelNotchedOutlineElement extends Components.LimelNotchedOutline, HTMLStencilElement {
    }
    var HTMLLimelNotchedOutlineElement: {
        prototype: HTMLLimelNotchedOutlineElement;
        new (): HTMLLimelNotchedOutlineElement;
    };
    /**
     * @exampleComponent limel-example-picker-basic
     * @exampleComponent limel-example-picker-multiple
     * @exampleComponent limel-example-picker-icons
     * @exampleComponent limel-example-picker-pictures
     * @exampleComponent limel-example-picker-value-as-object
     * @exampleComponent limel-example-picker-value-as-object-with-actions
     * @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.
     * ## 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-basic
     * @exampleComponent limel-example-popover-trigger-interaction
     * @exampleComponent limel-example-popover-styling
     */
    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.
     * When the limel-portal component is used, it creates a new DOM node (a div element)
     * and appends it to a parent element (by default, the body of the document).
     * The child elements of the limel-portal are then moved from
     * their original location in the DOM to this new div element.
     * This technique is often used to overcome CSS stacking context issues,
     * or to render UI elements like modals, dropdowns, tooltips, etc.,
     * that need to visually "break out" of their container.
     * Using this component, we ensure that the content is always rendered in the
     * correct position, and never covers its own trigger, or another component
     * that is opened in the stacking layer. This way, we don't need to worry about
     * z-indexes, or other stacking context issues.
     * :::important
     * There are some caveats when using this component
     * 1. Events might not bubble up as expected since the content is moved out to
     * another DOM node.
     * 2. Any styling that is applied to content from the parent will be lost, if the
     * content is just another web-component it will work without any issues.
     * Alternatively, use the `style=""` html attribute.
     * 3. 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.
     * 4. 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-basic
     */
    interface HTMLLimelPortalElement extends Components.LimelPortal, HTMLStencilElement {
    }
    var HTMLLimelPortalElement: {
        prototype: HTMLLimelPortalElement;
        new (): HTMLLimelPortalElement;
    };
    /**
     * This component displays a profile picture, while allowing the user
     * to change it via a file input or drag-and-drop.
     * It supports client-side image resizing and conversion,
     * as well as a simple lazy-loading mechanism.
     * @exampleComponent limel-example-profile-picture-basic
     * @exampleComponent limel-example-profile-picture-helper-text
     * @exampleComponent limel-example-profile-picture-icon
     * @exampleComponent limel-example-profile-picture-with-value
     * @exampleComponent limel-example-profile-picture-loading
     * @exampleComponent limel-example-profile-picture-image-fit
     * @exampleComponent limel-example-profile-picture-composite
     * @exampleComponent limel-example-profile-picture-resize-contain
     * @exampleComponent limel-example-profile-picture-resize-cover
     * @exampleComponent limel-example-profile-picture-resize-fallback
     * @exampleComponent limel-example-profile-picture-styling
     * @beta 
     */
    interface HTMLLimelProfilePictureElement extends Components.LimelProfilePicture, HTMLStencilElement {
    }
    var HTMLLimelProfilePictureElement: {
        prototype: HTMLLimelProfilePictureElement;
        new (): HTMLLimelProfilePictureElement;
    };
    /**
     * @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;
    };
    /**
     * The ProseMirror adapter offers a rich text editing experience with markdown support.
     * [Read more...](https://prosemirror.net/)
     * @exampleComponent limel-example-prosemirror-adapter-basic
     * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
     * @beta 
     * @private 
     */
    interface HTMLLimelProsemirrorAdapterElement extends Components.LimelProsemirrorAdapter, HTMLStencilElement {
    }
    var HTMLLimelProsemirrorAdapterElement: {
        prototype: HTMLLimelProsemirrorAdapterElement;
        new (): HTMLLimelProsemirrorAdapterElement;
    };
    /**
     * The Radio Button component provides a convenient way to create a group of radio buttons
     * from an array of options. Radio buttons allow users to select a single option from
     * multiple choices, making them ideal for exclusive selections.
     * :::note
     * A single radio button is never useful in a UI. Radio buttons should always come in groups
     * of at least 2 options where only one can be selected at a time.
     * :::
     * @exampleComponent limel-example-radio-button-group-basic
     * @exampleComponent limel-example-radio-button-group-deselect-selected
     * @exampleComponent limel-example-radio-button-group-icons
     * @exampleComponent limel-example-radio-button-group-multiple-lines
     * @beta 
     */
    interface HTMLLimelRadioButtonGroupElement extends Components.LimelRadioButtonGroup, HTMLStencilElement {
    }
    var HTMLLimelRadioButtonGroupElement: {
        prototype: HTMLLimelRadioButtonGroupElement;
        new (): HTMLLimelRadioButtonGroupElement;
    };
    /**
     * @exampleComponent limel-example-select
     * @exampleComponent limel-example-select-with-icons
     * @exampleComponent limel-example-select-with-separators
     * @exampleComponent limel-example-select-with-secondary-text
     * @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-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-basic
     * @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-with-action
     * @exampleComponent limel-example-snackbar-with-changing-messages
     * @exampleComponent limel-example-snackbar-dismissible
     * @exampleComponent limel-example-snackbar-persistent
     * @exampleComponent limel-example-snackbar-persistent-non-dismissible
     */
    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-loading
     * @exampleComponent limel-example-split-button-repeat-default-command
     */
    interface HTMLLimelSplitButtonElement extends Components.LimelSplitButton, HTMLStencilElement {
    }
    var HTMLLimelSplitButtonElement: {
        prototype: HTMLLimelSplitButtonElement;
        new (): HTMLLimelSplitButtonElement;
    };
    /**
     * The Switch component is a fundamental element in UI design that serves as a toggle switch
     * to control the state of a specific setting or option in an application or website.
     * The two distinct positions of the Switch are visually indicative of the two states:
     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
     * The Switch component is widely used in user interfaces to enable users to
     * quickly and intuitively change binary settings.
     * :::important
     * Checkboxes are sometimes used interchangeably with switches in user interfaces.
     * But there is an important difference between the two! Please read our guidelines about
     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
     * @exampleComponent limel-example-switch
     * @exampleComponent limel-example-switch-helper-text
     * @exampleComponent limel-example-switch-readonly
     */
    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 rich text editor that offers a rich text editing experience with markdown support,
     * in the sense that you can easily type markdown syntax and see the rendered
     * result as rich text in real-time. For instance, you can type `# Hello, world!`
     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
     * @exampleComponent limel-example-text-editor-basic
     * @exampleComponent limel-example-text-editor-as-form-component
     * @exampleComponent limel-example-text-editor-with-markdown
     * @exampleComponent limel-example-text-editor-with-html
     * @exampleComponent limel-example-text-editor-with-tables
     * @exampleComponent limel-example-text-editor-with-inline-images-file-storage
     * @exampleComponent limel-example-text-editor-with-inline-images-base64
     * @exampleComponent limel-example-text-editor-allow-resize
     * @exampleComponent limel-example-text-editor-size
     * @exampleComponent limel-example-text-editor-ui
     * @exampleComponent limel-example-text-editor-custom-element
     * @exampleComponent limel-example-text-editor-triggers
     * @exampleComponent limel-example-text-editor-composite
     * @beta 
     */
    interface HTMLLimelTextEditorElement extends Components.LimelTextEditor, HTMLStencilElement {
    }
    var HTMLLimelTextEditorElement: {
        prototype: HTMLLimelTextEditorElement;
        new (): HTMLLimelTextEditorElement;
    };
    /**
     * This component is a menu for editing a link in the text editor.
     * It allows the user to input the text and url for the link.
     * @beta 
     * @private 
     */
    interface HTMLLimelTextEditorLinkMenuElement extends Components.LimelTextEditorLinkMenu, HTMLStencilElement {
    }
    var HTMLLimelTextEditorLinkMenuElement: {
        prototype: HTMLLimelTextEditorLinkMenuElement;
        new (): HTMLLimelTextEditorLinkMenuElement;
    };
    /**
     * 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 (the same shadowRoot).
     * Often, it's easiest to just place them next to each other like in the example
     * below, but if you need to, you can place them differently.
     * ```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-basic
     * @exampleComponent limel-example-tooltip-max-character
     * @exampleComponent limel-example-tooltip-composite
     */
    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: {
        prototype: HTMLLimelTooltipContentElement;
        new (): HTMLLimelTooltipContentElement;
    };
    interface HTMLElementTagNameMap {
        "limel-3d-hover-effect-glow": HTMLLimel3dHoverEffectGlowElement;
        "limel-action-bar": HTMLLimelActionBarElement;
        "limel-action-bar-item": HTMLLimelActionBarItemElement;
        "limel-action-bar-overflow-menu": HTMLLimelActionBarOverflowMenuElement;
        "limel-ai-avatar": HTMLLimelAiAvatarElement;
        "limel-badge": HTMLLimelBadgeElement;
        "limel-banner": HTMLLimelBannerElement;
        "limel-breadcrumbs": HTMLLimelBreadcrumbsElement;
        "limel-button": HTMLLimelButtonElement;
        "limel-button-group": HTMLLimelButtonGroupElement;
        "limel-callout": HTMLLimelCalloutElement;
        "limel-card": HTMLLimelCardElement;
        "limel-chart": HTMLLimelChartElement;
        "limel-checkbox": HTMLLimelCheckboxElement;
        "limel-chip": HTMLLimelChipElement;
        "limel-chip-set": HTMLLimelChipSetElement;
        "limel-circular-progress": HTMLLimelCircularProgressElement;
        "limel-code-editor": HTMLLimelCodeEditorElement;
        "limel-collapsible-section": HTMLLimelCollapsibleSectionElement;
        "limel-color-picker": HTMLLimelColorPickerElement;
        "limel-color-picker-palette": HTMLLimelColorPickerPaletteElement;
        "limel-config": HTMLLimelConfigElement;
        "limel-date-picker": HTMLLimelDatePickerElement;
        "limel-dialog": HTMLLimelDialogElement;
        "limel-dock": HTMLLimelDockElement;
        "limel-dock-button": HTMLLimelDockButtonElement;
        "limel-dynamic-label": HTMLLimelDynamicLabelElement;
        "limel-file": HTMLLimelFileElement;
        "limel-file-dropzone": HTMLLimelFileDropzoneElement;
        "limel-file-input": HTMLLimelFileInputElement;
        "limel-file-viewer": HTMLLimelFileViewerElement;
        "limel-flatpickr-adapter": HTMLLimelFlatpickrAdapterElement;
        "limel-flex-container": HTMLLimelFlexContainerElement;
        "limel-form": HTMLLimelFormElement;
        "limel-grid": HTMLLimelGridElement;
        "limel-header": HTMLLimelHeaderElement;
        "limel-help": HTMLLimelHelpElement;
        "limel-help-content": HTMLLimelHelpContentElement;
        "limel-helper-line": HTMLLimelHelperLineElement;
        "limel-icon": HTMLLimelIconElement;
        "limel-icon-button": HTMLLimelIconButtonElement;
        "limel-info-tile": HTMLLimelInfoTileElement;
        "limel-input-field": HTMLLimelInputFieldElement;
        "limel-linear-progress": HTMLLimelLinearProgressElement;
        "limel-list": HTMLLimelListElement;
        "limel-markdown": HTMLLimelMarkdownElement;
        "limel-menu": HTMLLimelMenuElement;
        "limel-menu-list": HTMLLimelMenuListElement;
        "limel-menu-surface": HTMLLimelMenuSurfaceElement;
        "limel-notched-outline": HTMLLimelNotchedOutlineElement;
        "limel-picker": HTMLLimelPickerElement;
        "limel-popover": HTMLLimelPopoverElement;
        "limel-popover-surface": HTMLLimelPopoverSurfaceElement;
        "limel-portal": HTMLLimelPortalElement;
        "limel-profile-picture": HTMLLimelProfilePictureElement;
        "limel-progress-flow": HTMLLimelProgressFlowElement;
        "limel-progress-flow-item": HTMLLimelProgressFlowItemElement;
        "limel-prosemirror-adapter": HTMLLimelProsemirrorAdapterElement;
        "limel-radio-button-group": HTMLLimelRadioButtonGroupElement;
        "limel-select": HTMLLimelSelectElement;
        "limel-shortcut": HTMLLimelShortcutElement;
        "limel-slider": HTMLLimelSliderElement;
        "limel-snackbar": HTMLLimelSnackbarElement;
        "limel-spinner": HTMLLimelSpinnerElement;
        "limel-split-button": HTMLLimelSplitButtonElement;
        "limel-switch": HTMLLimelSwitchElement;
        "limel-tab-bar": HTMLLimelTabBarElement;
        "limel-tab-panel": HTMLLimelTabPanelElement;
        "limel-table": HTMLLimelTableElement;
        "limel-text-editor": HTMLLimelTextEditorElement;
        "limel-text-editor-link-menu": HTMLLimelTextEditorLinkMenuElement;
        "limel-tooltip": HTMLLimelTooltipElement;
        "limel-tooltip-content": HTMLLimelTooltipContentElement;
    }
}
declare namespace LocalJSX {
    /**
     * This component enhances the visual effects, when the `tiltFollowingTheCursor`
     * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
     * This component should be added to the HTML structure of the consumer component.
     * This component carries its own styles which are needed to create a glow effect on the
     * 3D element within the parent element, when the parent is hovered.
     * The parent element must be using the `tiltFollowingTheCursor` utility function
     * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
     * affect parts of the styles of this 3D glow effect.
     * @private 
     */
    interface Limel3dHoverEffectGlow {
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-action-bar-overflow-menu
     * @exampleComponent limel-example-action-bar-selected-item
     * @exampleComponent limel-example-action-bar-colors
     * @exampleComponent limel-example-action-bar-floating
     * @exampleComponent limel-example-action-bar-floating-expand
     * @exampleComponent limel-example-action-bar-styling
     * @exampleComponent limel-example-action-bar-as-primary-component
     * @exampleComponent limel-example-action-bar-icon-title
     */
    interface LimelActionBar {
        /**
          * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. Example value: "toolbar"
         */
        "accessibleLabel"?: string;
        /**
          * Items that are placed in the action bar. These represent primary actions.
         */
        "actions"?: Array<ActionBarItem | ListSeparator>;
        /**
          * When set to `true`, the action bar will be collapsible.
         */
        "collapsible"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
        /**
          * - When set to `fullWidth`, the component will take the entire width of its container. - When set to `floating`, the component will get basic stylings to visualize the floating state. :::note You should still properly position the component according to the structure of your user interface. For example, use an `absolute` or `fixed` position. :::
         */
        "layout"?: 'fullWidth' | 'floating';
        /**
          * Fired when a action bar item has been clicked.
          * @public
         */
        "onItemSelected"?: (event: LimelActionBarCustomEvent<ActionBarItem>) => void;
        /**
          * Defines the location that the content of the overflow menu appears, in relation to its trigger.
         */
        "openDirection"?: OpenDirection;
    }
    /**
     * @private 
     */
    interface LimelActionBarItem {
        /**
          * When the item is displayed in the available width, this will be `false`.
         */
        "isVisible"?: boolean;
        /**
          * Item that is placed in the action bar.
         */
        "item": ActionBarItem | ListSeparator;
        /**
          * Fired when a action bar item has been clicked.
          * @public
         */
        "onSelect"?: (event: LimelActionBarItemCustomEvent<ActionBarItem | ListSeparator>) => void;
        /**
          * When the item is selected, this will be `true`.
         */
        "selected"?: boolean;
    }
    /**
     * @private 
     */
    interface LimelActionBarOverflowMenu {
        /**
          * List of the items that should be rendered in the overflow menu.
         */
        "items"?: Array<MenuItem | ListSeparator>;
        /**
          * Fired when an item in the action bar overflow menu has been clicked.
          * @public
         */
        "onSelect"?: (event: LimelActionBarOverflowMenuCustomEvent<ActionBarItem>) => void;
        /**
          * Defines the location that the content of the overflow menu appears, in relation to its trigger. It defaults to `bottom-end`, since in normal scenarios (for example when the action bar is not floating at the bottom of the screen) this menu is the right-most item in the user interface of the component.
         */
        "openDirection"?: OpenDirection;
        /**
          * Icon to display in the overflow menu trigger. If not provided, the number of items in the overflow menu will be displayed.
         */
        "overFlowIcon"?: Icon;
    }
    /**
     * This component displays an avatar, representing Lime AI assistants.
     * :::warning
     * This is a private component used internally in the Lime's various applications,
     * which is the reason for having it in Lime Elements —to ease the distribution
     * of the component across all our apps.
     * 3rd party developers are not allowed use this component directly.
     * :::
     * @private 
     * @exampleComponent limel-example-ai-avatar-basic
     * @exampleComponent limel-example-ai-avatar-colors
     */
    interface LimelAiAvatar {
        /**
          * Set to `true` to trigger animations that indicate that the AI is "thinking" or processing something.
         */
        "isThinking"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
    }
    /**
     * 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
         */
        "icon"?: string;
        /**
          * The text to show on the banner.
         */
        "message"?: string;
    }
    /**
     * A Breadcrumb consists of a list of distinct "places" that a user has gone through,
     * before ending up where they are right now, in a website or an application.
     * These "places" can be for example _pages_ of a website, which are hierarchically
     * laid out before the current page that the user is looking at.
     * They could also be _steps_ which the user has gone through, which perhaps have no
     * hierarchical relation with each other, but has eventually led the user "here".
     * :::note
     * - Where the user currently is, is always the last step of the breadcrumb.
     * - A breadcrumbs never shows where users can go after this place.
     * It only illustrates where user has been before ending up here.
     * If the path that a user can take is not changing and if next steps are clear,
     * you can use the [Progress flow component](#/component/limel-progress-flow) instead.
     * :::
     * Breadcrumbs are often placed horizontally before the main content of the current screen.
     * @exampleComponent limel-example-breadcrumbs-links
     * @exampleComponent limel-example-breadcrumbs-buttons
     * @exampleComponent limel-example-breadcrumbs-icons
     * @exampleComponent limel-example-breadcrumbs-divider
     * @exampleComponent limel-example-breadcrumbs-icon-color
     * @exampleComponent limel-example-breadcrumbs-styling
     */
    interface LimelBreadcrumbs {
        /**
          * The visual divider that separates items. It must be a single character such as `-` or `,`.
         */
        "divider"?: string;
        /**
          * List of items in the breadcrumbs, each representing a step or a page.
         */
        "items"?: BreadcrumbsItem[];
        /**
          * Fired when clicking on buttons (not links!) inside the breadcrumbs.
         */
        "onSelect"?: (event: LimelBreadcrumbsCustomEvent<BreadcrumbsItem>) => 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.
         */
        "disabled"?: boolean;
        /**
          * Set icon for the button
         */
        "icon"?: string | Icon;
        /**
          * The text to show on the button.
         */
        "label"?: string;
        /**
          * Set to `true` to put the button in the `loading` state. This also disables the button.
         */
        "loading"?: boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
         */
        "loadingFailed"?: boolean;
        /**
          * Set to `true` to make the button outlined.
         */
        "outlined"?: boolean;
        /**
          * Set to `true` to make the button primary.
         */
        "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
         */
        "disabled"?: boolean;
        /**
          * Dispatched when a button is selected/deselected
         */
        "onChange"?: (event: LimelButtonGroupCustomEvent<Button>) => void;
        /**
          * List of buttons for the group
         */
        "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`.
         */
        "heading"?: string;
        /**
          * Icon of the callout, which can be used to override the default icon which is displayed based on the chosen `type`.
         */
        "icon"?: string;
        /**
          * Defines the language for translations. Will translate the default headings for supported languages.
         */
        "language"?: Languages;
        /**
          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
         */
        "type"?: CalloutType;
    }
    /**
     * Card is a component that displays content about a single topic,
     * in a structured way. It can contain a header, and some supporting media such
     * as an image or an icon, a body of text, or optional actions.
     * @exampleComponent limel-example-card-basic
     * @exampleComponent limel-example-card-image
     * @exampleComponent limel-example-card-actions
     * @exampleComponent limel-example-card-clickable
     * @exampleComponent limel-example-card-orientation
     * @exampleComponent limel-example-card-slot
     * @exampleComponent limel-example-card-styling
     */
    interface LimelCard {
        /**
          * Actions to display in the card, to provide the user with options to interact with the content.
         */
        "actions"?: Array<ActionBarItem | ListSeparator1>;
        /**
          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
         */
        "clickable"?: boolean;
        /**
          * Heading of the card, to provide a short title about the context.
         */
        "heading"?: string;
        /**
          * An icon, to display along with the heading and subheading.
         */
        "icon"?: string | Icon;
        /**
          * A hero image to display in the card, to enrich the content with visual information.
         */
        "image"?: Image;
        /**
          * Fired when a action bar item has been clicked.
         */
        "onActionSelected"?: (event: LimelCardCustomEvent<ActionBarItem>) => void;
        /**
          * The orientation of the card, specially useful when the card has an image.
         */
        "orientation"?: 'landscape' | 'portrait';
        /**
          * Subheading of the card to provide a short description of the context.
         */
        "subheading"?: string;
        /**
          * The content of the card. Supports markdown, to provide a rich text experience.
         */
        "value"?: string;
    }
    /**
     * A chart is a graphical representation of data, in which
     * visual symbols such as such bars, dots, lines, or slices, represent
     * each data point, in comparison to others.
     * @exampleComponent limel-example-chart-stacked-bar
     * @exampleComponent limel-example-chart-orientation
     * @exampleComponent limel-example-chart-max-value
     * @exampleComponent limel-example-chart-type-bar
     * @exampleComponent limel-example-chart-type-dot
     * @exampleComponent limel-example-chart-type-area
     * @exampleComponent limel-example-chart-type-line
     * @exampleComponent limel-example-chart-type-pie
     * @exampleComponent limel-example-chart-type-doughnut
     * @exampleComponent limel-example-chart-type-ring
     * @exampleComponent limel-example-chart-type-gantt
     * @exampleComponent limel-example-chart-type-nps
     * @exampleComponent limel-example-chart-multi-axis
     * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
     * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
     * @exampleComponent limel-example-chart-axis-increment
     * @exampleComponent limel-example-chart-clickable-items
     * @exampleComponent limel-example-chart-accessibility
     * @exampleComponent limel-example-chart-styling
     * @exampleComponent limel-example-chart-creative-styling
     * @beta 
     */
    interface LimelChart {
        /**
          * Helps users of assistive technologies to understand what the items in the chart represent.
         */
        "accessibleItemsLabel"?: string;
        /**
          * Helps users of assistive technologies to understand the context of the chart, and what is being displayed.
         */
        "accessibleLabel"?: string;
        /**
          * Specifies the increment for the axis lines.
         */
        "axisIncrement"?: number;
        /**
          * List of items in the chart, each representing a data point.
         */
        "items": ChartItem[];
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language"?: Languages;
        /**
          * Indicates whether the chart is in a loading state.
         */
        "loading"?: boolean;
        /**
          * Specifies the range that items' values could be in. This is used in calculation of the size of the items in the chart. When not provided, the sum of all values in the items will be considered as the range.
         */
        "maxValue"?: number;
        /**
          * Fired when a chart item with `clickable` set to `true` is clicked
         */
        "onInteract"?: (event: LimelChartCustomEvent<ChartItem>) => void;
        /**
          * Defines whether the chart is intended to be displayed wide or tall. Does not have any effect on chart types which generate circular forms.
         */
        "orientation"?: 'landscape' | 'portrait';
        /**
          * Defines how items are visualized in the chart.
         */
        "type"?: | 'area'
        | 'bar'
        | 'doughnut'
        | 'line'
        | 'nps'
        | 'pie'
        | 'ring'
        | 'dot'
        | 'stacked-bar';
    }
    /**
     * The Checkbox component is a classic and essential element in UI design that allows
     * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
     * select one or more items from a list of choices.
     * ## States of a Checkbox
     * When a user clicks or taps on the box, it toggles between two states:
     * Checked and Unchecked.
     * However, a Checkbox can visualize a third state called the "Indeterminate" state.
     * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
     * The Indeterminate state is typically used when dealing with checkbox groups
     * that have hierarchical relationships or when the group contains sub-items.
     * This state is used to indicate that that some, but not all, of the items in a group are selected.
     * :::important
     * Checkboxes are sometimes used interchangeably with switches in user interfaces.
     * But there is an important difference between the two! Please read our guidelines about
     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
     * @exampleComponent limel-example-checkbox
     * @exampleComponent limel-example-checkbox-helper-text
     * @exampleComponent limel-example-checkbox-readonly
     */
    interface LimelCheckbox {
        /**
          * The value of the checkbox. Set to `true` to make the checkbox checked.
         */
        "checked"?: boolean;
        /**
          * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled.
         */
        "disabled"?: boolean;
        /**
          * Optional helper text to display below the checkbox
         */
        "helperText"?: string;
        /**
          * Enables indeterminate state. Set to `true` to signal indeterminate check.
         */
        "indeterminate"?: boolean;
        /**
          * Set to `true` to indicate that the current value is invalid.
         */
        "invalid"?: boolean;
        /**
          * The checkbox label.
         */
        "label"?: string;
        /**
          * Emitted when the input value is changed.
         */
        "onChange"?: (event: LimelCheckboxCustomEvent<boolean>) => void;
        /**
          * Disables the checkbox when `true`. This visualizes the checkbox slightly differently. But shows no visual sign indicating that the checkbox is disabled or can ever become interactable.
         */
        "readonly"?: boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * Set to `true` to indicate that the checkbox must be checked.
         */
        "required"?: boolean;
    }
    /**
     * Chips and buttons are both interactive elements in UI design,
     * but they serve different purposes and are used in different contexts.
     * :::warning
     * Do not use the chip component carelessly, as an alternative for
     * [`limel-button`](#/component/limel-button/) in the UI design!
     * **Buttons:**
     * Buttons are used to trigger actions. They are typically used to
     * submit forms, open dialogs, initiate a process, or perform any action
     * that changes the state of the application.
     * Buttons' labels usually contain action words, in other words, the labels is
     * a _verb in imperative mood_ such as "Submit" or "Delete".
     * Buttons are placed in areas where it's clear they will initiate
     * an action when clicked.
     * **Chips:**
     * Chips however are elements which may look like buttons, but they are
     * representing choices, filters, or tags, in a small block
     * or clearly bundled into a group. Chips are rarely used alone in the
     * user interface.
     * They are often used in a so called "chip-set", or placed together in
     * a section of the UI, where the user can expect more than one chip to be present.
     * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
     * or an item in a shopping list.
     * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
     * or opening a page with all posts tagged with the tag represented by the chip,
     * or navigating to a page with more information about the item in the shopping list.
     * :::
     * @exampleComponent limel-example-chip-button
     * @exampleComponent limel-example-chip-link
     * @exampleComponent limel-example-chip-icon-colors
     * @exampleComponent limel-example-chip-image
     * @exampleComponent limel-example-chip-badge
     * @exampleComponent limel-example-chip-filter
     * @exampleComponent limel-example-chip-removable
     * @exampleComponent limel-example-chip-menu
     * @exampleComponent limel-example-chip-loading
     * @exampleComponent limel-example-chip-progress
     * @exampleComponent limel-example-chip-size
     * @exampleComponent limel-example-chip-readonly-border
     * @exampleComponent limel-example-chip-aria-role
     */
    interface LimelChip {
        /**
          * The value of the badge, displayed on the chip.
         */
        "badge"?: string | number;
        /**
          * Set to `true` to disable the chip.
         */
        "disabled"?: boolean;
        /**
          * Icon of the chip.
         */
        "icon"?: string | Icon;
        /**
          * Identifier for the chip. Must be unique.
         */
        "identifier"?: number | string;
        /**
          * A picture to be displayed instead of the icon on the chip.
         */
        "image"?: Image;
        /**
          * Set to `true` to visualize the chip in an "invalid" or "error" state.
         */
        "invalid"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language"?: Languages;
        /**
          * If supplied, the chip will become a clickable link.
         */
        "link"?: Omit<Link, 'text'>;
        /**
          * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside the chip. This does _not_ disable the interactivity of the chip!
         */
        "loading"?: boolean;
        /**
          * When provided, the chip will render an ellipsis menu with the supplied items. Also, this will hide the "remove button" when `removable={true}`, as the remove button will automatically become the last item in the menu.
         */
        "menuItems"?: Array<MenuItem1 | ListSeparator>;
        /**
          * Emitted when a menu item is selected from the actions menu.
         */
        "onMenuItemSelected"?: (event: LimelChipCustomEvent<MenuItem1>) => void;
        /**
          * Fired when clicking on the remove button of a `removable` chip. The value of `identifier` is emitted as the event detail.
         */
        "onRemove"?: (event: LimelChipCustomEvent<number | string>) => void;
        /**
          * Reflects the current value of a progress bar on the chip, visualizing the percentage of an ongoing process. Must be a number between `0` and `100`.
         */
        "progress"?: number;
        /**
          * Set to `true` to render the chip as a static UI element. Useful when the parent component has a `readonly` state.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to render a remove button on the chip.
         */
        "removable"?: boolean;
        /**
          * Set to `true` to visualize the chip in a "selected" state. This is typically used when the chip is used in a chip-set along with other chips.
         */
        "selected"?: boolean;
        /**
          * Defines the size of the chip.
         */
        "size"?: 'small' | 'default';
        /**
          * Label displayed on the chip
         */
        "text"?: string;
        /**
          * Set to `filter` to render the chip with a distinct style suitable for visualizing filters.
         */
        "type"?: ChipType;
    }
    /**
     * :::note
     * **Regarding `click` and `interact` events:**
     * The `interact` event is emitted when a chip is interacted with, and is
     * the recommended way to listen for chip interactions.
     * However, if you need to handle clicks differently depending on which chip
     * was clicked, or whether the click was on a chip or elsewhere, you need to
     * listen to the native `click` event instead.
     * Native `click` events are passed through, and if the click came from
     * a chip, the chip object is available in the event object under
     * `<event object>.Lime.chip`.
     * Example usage:
     * ```ts
     * private handleClick(event: Event) {
     *     if (event && 'Lime' in event && (event.Lime as any).chip) {
     *         if ((event.Lime as { chip: Chip }).chip.href) {
     *             // Chip has href, so let the browser open the link.
     *             return;
     *         }
     *         // handle click on chip without href
     *     } else {
     *         // handle click elsewhere
     *     }
     * }
     * ```
     * :::
     * @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-with-menu-items
     * @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-image
     * @exampleComponent limel-example-chip-set-composite
     */
    interface LimelChipSet {
        /**
          * For chip-set of type `input`, defines whether the input field should have autocomplete enabled. Read more about the `autocomplete` attribute [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
         */
        "autocomplete"?: string;
        /**
          * Whether the "Clear all" buttons should be shown
         */
        "clearAllButton"?: boolean;
        /**
          * For chip-set of type `input`. Sets delimiters between chips.
         */
        "delimiter"?: string;
        /**
          * True if the chip set should be disabled
         */
        "disabled"?: boolean;
        /**
          * Whether the input field should be emptied when the chip-set loses focus.
         */
        "emptyInputOnBlur"?: boolean;
        /**
          * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation.
         */
        "helperText"?: string;
        /**
          * For chip-sets of type `input`. Value to use for the `type` attribute on the input field inside the chip-set.
         */
        "inputType"?: 'search' | 'text';
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
         */
        "invalid"?: boolean;
        /**
          * Label for the chip-set
         */
        "label"?: string;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components. For example, the clear all chips label.
         */
        "language"?: Languages;
        /**
          * For chip-sets of type `input`. When the value is null, no leading icon is used. Leading icon to show to the far left in the text field
         */
        "leadingIcon"?: string;
        /**
          * For chip-sets of type `input`. Limits the maximum number of chips. When the value is `0` or not set, no limit is applied.
         */
        "maxItems"?: number;
        /**
          * Dispatched when a chip is selected/deselected
         */
        "onChange"?: (event: LimelChipSetCustomEvent<Chip | Chip[]>) => void;
        /**
          * Dispatched when the input is changed for type `input`
         */
        "onInput"?: (event: LimelChipSetCustomEvent<string>) => void;
        /**
          * Dispatched when a chip is interacted with
         */
        "onInteract"?: (event: LimelChipSetCustomEvent<Chip>) => void;
        /**
          * Emitted when an input chip set has received focus and editing in the text field has started
         */
        "onStartEdit"?: (event: LimelChipSetCustomEvent<void>) => void;
        /**
          * Emitted when an input chip set has lost focus and editing in the text field has ended
         */
        "onStopEdit"?: (event: LimelChipSetCustomEvent<void>) => void;
        /**
          * For chip-sets of type `input`, set to `true` to disable adding and removing chips, but allow interaction with existing chips in the set. For any other types, setting either `readonly` or `disabled` disables the chip-set.
         */
        "readonly"?: boolean;
        /**
          * True if the control requires a value
         */
        "required"?: boolean;
        /**
          * Search label to display when type is `input` and component is in search mode
         */
        "searchLabel"?: string;
        /**
          * Type of chip set  - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored - `filter` renders a set of selectable chips where all are selectable. - `input` renders a set of chips that can be used in conjunction with an input field  If no type is set, a basic set of chips without additional functionality will be rendered
         */
        "type"?: 'choice' | 'filter' | 'input';
        /**
          * List of chips for the set
         */
        "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%.
         */
        "displayPercentageColors"?: boolean;
        /**
          * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
         */
        "maxValue"?: number;
        /**
          * The prefix which is displayed before the `value`, must be a few characters characters long.
         */
        "prefix"?: string;
        /**
          * Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.
         */
        "size"?: CircularProgressSize;
        /**
          * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
         */
        "suffix"?: string;
        /**
          * The value of the progress bar.
         */
        "value"?: number;
    }
    /**
     * @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
         */
        "colorScheme"?: ColorScheme;
        /**
          * Allows the user to fold code
         */
        "fold"?: boolean;
        /**
          * The language of the code
         */
        "language"?: Language;
        /**
          * Displays line numbers in the editor
         */
        "lineNumbers"?: boolean;
        /**
          * Enables linting of JSON content
         */
        "lint"?: boolean;
        /**
          * Emitted when the code has changed. Will only be emitted when the code area has lost focus
         */
        "onChange"?: (event: LimelCodeEditorCustomEvent<string>) => void;
        /**
          * Disables editing of the editor content
         */
        "readonly"?: boolean;
        /**
          * The code to be rendered
         */
        "value"?: string;
    }
    /**
     * A collapsible section can be used to group related content together
     * and hide the group when not needed.
     * Using this component can help to:
     * - Save vertical space by hiding non-essential content
     * - Improve content organization and scannability of the user interface
     * - Reduce cognitive load by displaying only a set of relevant information at a time
     * - Or disclose complex information, progressively to the user
     * @exampleComponent limel-example-collapsible-section-basic
     * @exampleComponent limel-example-collapsible-section-actions
     * @exampleComponent limel-example-collapsible-section-with-custom-header-component
     * @exampleComponent limel-example-collapsible-section-external-control
     * @exampleComponent limel-example-collapsible-section-with-slider
     * @exampleComponent limel-example-collapsible-section-invalid
     * @exampleComponent limel-example-collapsible-section-icon
     * @exampleComponent limel-example-collapsible-section-css-props
     */
    interface LimelCollapsibleSection {
        /**
          * Actions to place to the far right inside the header
         */
        "actions"?: Action[];
        /**
          * Text to display in the header of the section
         */
        "header"?: string;
        /**
          * Icon to display in the header of the section
         */
        "icon"?: string | Icon;
        /**
          * `true` if the section is invalid, `false` if valid. This can be used to indicate that the content inside the section is invalid.
         */
        "invalid"?: boolean;
        /**
          * `true` if the section is expanded, `false` if collapsed.
         */
        "isOpen"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language"?: Languages;
        /**
          * Emitted when an action is clicked inside the header
         */
        "onAction"?: (event: LimelCollapsibleSectionCustomEvent<Action>) => void;
        /**
          * Emitted when the section is collapsed
         */
        "onClose"?: (event: LimelCollapsibleSectionCustomEvent<void>) => void;
        /**
          * Emitted when the section is expanded
         */
        "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
         */
        "helperText"?: string;
        /**
          * The label of the input field
         */
        "label"?: string;
        /**
          * Emits chosen value to the parent component
         */
        "onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
        /**
          * Set to `true` if a value is readonly. This makes the component un-interactive.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` if a value is required
         */
        "required"?: boolean;
        /**
          * Displayed as tooltips when picker is hovered.
         */
        "tooltipLabel"?: string;
        /**
          * Name or code of the chosen color
         */
        "value"?: string;
    }
    /**
     * @private 
     */
    interface LimelColorPickerPalette {
        /**
          * Helper text of the input field
         */
        "helperText"?: string;
        /**
          * Label of the input field
         */
        "label"?: string;
        /**
          * Emits chosen value to the parent component
         */
        "onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
        /**
          * Set to `true` if a value is required
         */
        "required"?: boolean;
        /**
          * Color value that is manually typed by the user
         */
        "value"?: string;
    }
    /**
     * Component used to set global configuration for Lime Elements.
     * :::warning
     * **Building something for Lime CRM?** Then you should _NOT_ use this component.
     * Lime CRM already uses this component to set the global configuration for
     * Lime Elements. No matter what problem you are facing at the moment, using
     * this component will not help, and might cause other problems.
     * :::
     * Building your own software, which is using Lime Elements?
     * Then you _might_ need to use this component.
     * @private 
     */
    interface LimelConfig {
        /**
          * Global configuration for Lime Elements.
         */
        "config"?: Config;
    }
    /**
     * @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.
         */
        "disabled"?: boolean;
        /**
          * Format to display the selected date in.
         */
        "format"?: string;
        /**
          * Custom formatting function. Will be used for date formatting.  :::note overrides `format` and `language` :::
         */
        "formatter"?: (date: Date) => string;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the date picker is invalid.
         */
        "invalid"?: boolean;
        /**
          * Text to display next to the date picker
         */
        "label"?: string;
        /**
          * Defines the localisation for translations and date formatting. Property `format` customizes the localized date format.
         */
        "language"?: Languages;
        /**
          * Emitted when the date picker value is changed.
         */
        "onChange"?: (event: LimelDatePickerCustomEvent<Date>) => void;
        /**
          * The placeholder text shown inside the input field, when the field is focused and empty
         */
        "placeholder"?: string;
        /**
          * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
         */
        "required"?: boolean;
        /**
          * Type of date picker.
         */
        "type"?: DateType;
        /**
          * The value of the field.
         */
        "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 [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
     * 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-heading-actions
     * @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.
         */
        "closingActions"?: ClosingActions;
        /**
          * Set to `true` to make the dialog "fullscreen".
         */
        "fullscreen"?: boolean;
        /**
          * The heading for the dialog, if any.
         */
        "heading"?: string | DialogHeading;
        /**
          * Emitted when the dialog is closed from inside the component. (*Not* emitted when the consumer sets the `open`-property to `false`.)
         */
        "onClose"?: (event: LimelDialogCustomEvent<void>) => void;
        /**
          * Emitted when the dialog is in the process of being closed.
         */
        "onClosing"?: (event: LimelDialogCustomEvent<void>) => void;
        /**
          * `true` if the dialog is open, `false` otherwise.
         */
        "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"
         */
        "accessibleLabel"?: string;
        /**
          * Set to `false` if you do not want to allow end-users to exapnd or shrink the Dock. This will hide the expand/shrink button, and the only things that defines the layout will be the `expanded` property, and the `mobileBreakPoint`.
         */
        "allowResize"?: boolean;
        /**
          * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.)
         */
        "dockFooterItems"?: DockItem[];
        /**
          * Items that are placed in the dock.
         */
        "dockItems"?: DockItem[];
        /**
          * Defines the width of the component, when it loads. - `true`: shows both icons and labels of the Dock items. - `false`: only shows icons of the doc items, and displays their labels as tooltip.  Note: when `useMobileLayout` is `true`, labels will always be shown as tooltips. Read more below…
         */
        "expanded"?: boolean;
        /**
          * Defines the breakpoint in pixles, at which the component will be rendered in a hoizontal layout. Default breakpoint is `700` pixels, which means when the screen size is smaller than `700px`, the component will automatically switch to a horizontal layout.
         */
        "mobileBreakPoint"?: number;
        /**
          * Fired when the popover is closed.
         */
        "onClose"?: (event: LimelDockCustomEvent<void>) => void;
        /**
          * Fired when a Dock is expanded or collapsed.
         */
        "onDockExpanded"?: (event: LimelDockCustomEvent<boolean>) => void;
        /**
          * Fired when a dock item has been selected from the dock.
         */
        "onItemSelected"?: (event: LimelDockCustomEvent<DockItem>) => void;
        /**
          * Fired when a dock menu is opened.
         */
        "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.
         */
        "expanded"?: boolean;
        /**
          * Item that is placed in the dock.
         */
        "item": DockItem;
        /**
          * Fired when the popover is closed.
         */
        "onClose"?: (event: LimelDockButtonCustomEvent<void>) => void;
        /**
          * Fired when a dock item has been selected from the dock.
         */
        "onItemSelected"?: (event: LimelDockButtonCustomEvent<DockItem>) => void;
        /**
          * Fired when a dock menu is opened.
         */
        "onMenuOpen"?: (event: LimelDockButtonCustomEvent<DockItem>) => void;
        /**
          * When dock is using mobile layout, dock items show labels and tooltips as suitable for the layout.
         */
        "useMobileLayout"?: boolean;
    }
    /**
     * This components displays a different label depending on the current given
     * value. A label can consist of a text and an optional icon. If no matching
     * label is found among the given `labels`, the `defaultLabel` will be displayed.
     * One use case of the component is to enhance the visualization of a `boolean`
     * field like a checkbox or switch in a `readonly` state.
     * The reason we offer this component is that the default styling
     * of the Checkbox or Toggle switch in the `readonly` state may not always
     * provide the best way of _visualizing information_, potentially leading to
     * confusion and negatively affecting the end-users' experience.
     * @exampleComponent limel-example-dynamic-label
     * @exampleComponent limel-example-dynamic-label-readonly-boolean
     */
    interface LimelDynamicLabel {
        /**
          * The label to display when no matching value is found in the `labels` array. This is a fallback label that ensures there's always a label displayed for the component.
         */
        "defaultLabel"?: Omit<Label, 'value'>;
        /**
          * A list of available labels. Each label has a corresponding value that will be matched with the current `value` of the component to determine what label to display.
         */
        "labels"?: Label[];
        /**
          * The current value of the component which is used to match with the given `labels` to determine what label to display.  If not matching label is found, the `defaultLabel` is displayed.
         */
        "value"?: LabelValue;
    }
    /**
     * 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-menu-items
     * @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)
         */
        "accept"?: string;
        /**
          * True if the input should be disabled
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to indicate that the current value of the chosen file is invalid.
         */
        "invalid"?: boolean;
        /**
          * The input label.
         */
        "label"?: string;
        /**
          * Defines the localisation for translations.
         */
        "language"?: Languages;
        /**
          * Dispatched when a file is selected/deselected
         */
        "onChange"?: (event: LimelFileCustomEvent<FileInfo>) => void;
        /**
          * Dispatched when clicking on a chip
         */
        "onInteract"?: (event: LimelFileCustomEvent<number | string>) => void;
        /**
          * Set to `true` to disable adding and removing files, but allow interaction with any already existing file.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
         */
        "required"?: boolean;
        /**
          * The selected file.
         */
        "value"?: FileInfo;
    }
    /**
     * This component enables you to seamlessly convert any region of the user interface into
     * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.
     * The file dropzone can then be used to allow end-users to upload files
     * by dragging and dropping them into the specified area, for example to trigger an upload process.
     * After receiving the files, the component emits a `filesSelected` event. For unsupported
     * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
     * The event detail would be an array of `FileInfo` objects,
     * each representing a file dropped into the dropzone.
     * @exampleComponent limel-example-file-dropzone
     * @exampleComponent limel-example-file-dropzone-type-filtering
     * @private 
     */
    interface LimelFileDropzone {
        /**
          * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.  For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`. Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`. A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or `.png, .jpg, .jpeg`.
          * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more details.
         */
        "accept"?: string;
        /**
          * Set to `true` to disable the file dropzone.
         */
        "disabled"?: boolean;
        /**
          * Is displayed to provide supplementary information to the end users, for instance, which filetypes or file sizes are accepted.
         */
        "helperText"?: string;
        /**
          * Emitted when files are selected but do not conform with the `accept` property specifications. This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone, as defined by the `accept` property.
          * @see  `accept` for details on how to specify acceptable file types.
         */
        "onFilesRejected"?: (event: LimelFileDropzoneCustomEvent<FileInfo[]>) => void;
        /**
          * Emitted when files are selected
         */
        "onFilesSelected"?: (event: LimelFileDropzoneCustomEvent<FileInfo[]>) => void;
        /**
          * Is displayed when the user is dragging a file over the dropzone. A suitable text could for instance be "Drop your files here".
         */
        "text"?: string;
    }
    /**
     * This component enables you to seamlessly transform any other clickable component that
     * generates a `click` event into a file input selector.
     * To use it, just wrap any clickable component inside the `limel-file-input` component.
     * Upon reception of the `click` event this component will open the native file selection
     * dialog.
     * After receiving the files, the component emits a `filesSelected` event.
     * The event detail would be an array of `FileInfo` objects,
     * each representing a file dropped into the dropzone.
     * @exampleComponent limel-example-file-input
     * @exampleComponent limel-example-file-input-type-filtering
     * @private 
     */
    interface LimelFileInput {
        /**
          * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.  For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`. Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`. A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or `.png, .jpg, .jpeg`.
          * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more details.
         */
        "accept"?: string;
        /**
          * Set to `true` to disable file input selection.
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to enable selection of multiple files
         */
        "multiple"?: boolean;
        /**
          * Emitted when files are selected
         */
        "onFilesSelected"?: (event: LimelFileInputCustomEvent<FileInfo[]>) => void;
    }
    /**
     * This is a smart component that automatically detects
     * the most common file types such as image, audio, video, and text,
     * and properly displays them in the browser.
     * The component is also capable to render the most common office files.
     * :::note
     * Image files will always be contained in their containers, which means
     * they automatically increase or decrease in size to fill their containing box
     * whilst preserving their aspect-ratio.
     * Text and PDF files will also always respect the width and height of the
     * container in which the `limel-file-viewer` is loaded.
     * :::
     * For some file types such as text and images, the component will display a
     * download button and a button to open the file in a new browser tab.
     * This will allow users to preview the file in a fullscreen mode with the
     * browser and take advantage of for example native zooming and panning
     * functionalities.
     * @exampleComponent limel-example-file-viewer-basic
     * @exampleComponent limel-example-file-viewer-office
     * @exampleComponent limel-example-file-viewer-filename
     * @exampleComponent limel-example-file-viewer-inbuilt-actions
     * @exampleComponent limel-example-file-viewer-custom-actions
     * @exampleComponent limel-example-file-viewer-with-picker
     * @beta 
     */
    interface LimelFileViewer {
        /**
          * An array of custom actions that can be displayed as an action menu on the file which is being displayed.
         */
        "actions"?: ListItem[];
        /**
          * Displays a button that allows the user to download the file. Note that due to the browser's security policies, the file should be hosted on the same domain for the download button to work properly. Not displayed for office files!
         */
        "allowDownload"?: boolean;
        /**
          * Displays a button that allows the user to view the file in fullscreen mode. Not displayed for office files!
         */
        "allowFullscreen"?: boolean;
        /**
          * Displays a button that allows the user to open the file in a new browser tab. Not displayed for office files!
         */
        "allowOpenInNewTab"?: boolean;
        /**
          * An optional alternative text, mainly for assistive technologies and screen readers. It is used for only image files, as an `alt` attribute. Should optimally hold a description of the image, which is also displayed on the page if the image can't be loaded for some reason.
         */
        "alt"?: string;
        /**
          * The name of the file that must also contains its extension. This overrides the filename that the `url` ends with. Useful when the `url` does not contain the filename. When specified, the `filename` will be used as filename of the downloaded file.
         */
        "filename"?: string;
        /**
          * Defines the localization for translations.
         */
        "language"?: Languages;
        /**
          * Defines the third-party viewer that should be used to render the content of office files, such as word processing documents, presentations, or spreadsheets.
         */
        "officeViewer"?: OfficeViewer;
        /**
          * Emitted when a custom action is selected from the action menu.
         */
        "onAction"?: (event: LimelFileViewerCustomEvent<ListItem>) => void;
        /**
          * Link to the file
         */
        "url"?: string;
    }
    /**
     * 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.
         */
        "format"?: string;
        "formatter": (date: Date) => string;
        /**
          * The native input element to use with flatpickr.
         */
        "inputElement"?: HTMLElement;
        /**
          * Set to `true` if the calendar should be open.
         */
        "isOpen"?: boolean;
        /**
          * Defines the localisation for translations and date formatting. Property `format` customizes the localized date format.
         */
        "language"?: Languages;
        /**
          * Emitted when the date picker value is changed.
         */
        "onChange"?: (event: LimelFlatpickrAdapterCustomEvent<Date>) => void;
        /**
          * Type of date picker.
         */
        "type"?: DateType;
        /**
          * The value of the field.
         */
        "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 - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
     * @private 
     */
    interface LimelFlexContainer {
        /**
          * Specify how items are aligned along the cross axis
         */
        "align"?: FlexContainerAlign;
        /**
          * Direction of the main axis
         */
        "direction"?: FlexContainerDirection;
        /**
          * Specify how items are aligned along the main axis
         */
        "justify"?: FlexContainerJustify;
        /**
          * Reverse the order of the items
         */
        "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-with-help
     * @exampleComponent limel-example-form-row-layout
     */
    interface LimelForm {
        /**
          * Set to `true` to disable the whole form.
         */
        "disabled"?: boolean;
        /**
          * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
         */
        "errors"?: ValidationError;
        /**
          * Emitted when a change is made within the form
         */
        "onChange"?: (event: LimelFormCustomEvent<object>) => void;
        /**
          * Emitted when the validity of the form changes, or when a change is made to an invalid form
         */
        "onValidate"?: (event: LimelFormCustomEvent<ValidationStatus>) => void;
        /**
          * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
         */
        "propsFactory"?: (schema: FormSchema) => Record<string, any>;
        /**
          * The schema used to render the form
         */
        "schema"?: FormSchema;
        /**
          * Custom function to customize the default error messages
         */
        "transformErrors"?: (errors: FormError[]) => FormError[];
        /**
          * Value of the form
         */
        "value"?: object;
    }
    /**
     * This component is deprecated and will be removed in a future version of
     * Lime Elements. Please use CSS for your flexible container needs 🙂
     * @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
     * @private 
     */
    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-slot-actions
     * @exampleComponent limel-example-header-colors
     * @exampleComponent limel-example-header-responsive
     * @exampleComponent limel-example-header-narrow
     */
    interface LimelHeader {
        /**
          * Title to display
         */
        "heading"?: string;
        /**
          * Icon to display
         */
        "icon"?: string | Icon;
        /**
          * Subheading to display
         */
        "subheading"?: string;
        /**
          * The visual divider that separates the `subheading` and the `supportingText`. It must be a single character such as `-` or `,`.
         */
        "subheadingDivider"?: string;
        /**
          * An extra string of text to display along with with the Subheading
         */
        "supportingText"?: string;
    }
    /**
     * A good design is self-explanatory! However, sometimes concepts are
     * too complex to understand, no matter how well-designed a user interface is.
     * In such cases, contextual help can be a great way to provide users with
     * help precisely where and when users need it.
     * In app interface design, providing contextual help emerges as a viable practice
     * for enhancing user experience and usability.
     * Contextual help serves as a quick-to-access guiding,
     * empowering users to more easily understand and navigate through
     * the intricacies of an application.
     * Using this component designers empower users to grasp the functionality
     * of an app more effortlessly, minimizes the learning curve,
     * transforming complex features into accessible opportunities for exploration.
     * @exampleComponent limel-example-help
     * @exampleComponent limel-example-read-more
     * @exampleComponent limel-example-open-direction
     * @exampleComponent limel-example-placement
     */
    interface LimelHelp {
        /**
          * {@inheritdoc Help.openDirection}
         */
        "openDirection"?: OpenDirection;
        /**
          * {@inheritdoc Help.readMoreLink}
         */
        "readMoreLink"?: Link;
        /**
          * {@inheritdoc Help.trigger}
         */
        "trigger"?: string;
        /**
          * {@inheritdoc Help.value}
         */
        "value"?: string;
    }
    /**
     * Help content
     * This is scrollable content that is placed in the popover of the Help component.
     * Moved here mostly to avoid having inlined styles in the parent component.
     * Since you cannot send styles to the Portal component, we need to have this
     * child component.
     * @private 
     */
    interface LimelHelpContent {
        "readMoreLink"?: Link;
        "value"?: 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.
     * @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
     * @exampleComponent limel-example-helper-line-empty
     * @exampleComponent limel-example-helper-line-animation
     * @private 
     */
    interface LimelHelperLine {
        /**
          * The helper text that is displayed on the left side.
         */
        "helperText"?: string;
        /**
          * Used by `aria-controls` and `aria-describedby` in the parent component.
         */
        "helperTextId"?: string;
        /**
          * Turns `true`, when the parent component is invalid. For example, when the parent component is `required` but is left empty. Or when the input format is invalid.
         */
        "invalid"?: boolean;
        /**
          * Length of the current input value, coming from the parent component. Used in the character counter section on the right side.
         */
        "length"?: number;
        /**
          * Maximum length of the characters, defined on the parent component. Used in the character counter section on the right side.
         */
        "maxLength"?: number;
    }
    /**
     * :::important
     * To install your icon set correctly, please read the [documentation here](#/).
     * :::
     * The size and color of the icon is normally set in CSS, however there are a few
     * standard sizes defined that can be used with the `size` property.
     * @exampleComponent limel-example-icon-name
     * @exampleComponent limel-example-icon-size
     * @exampleComponent limel-example-icon-color
     */
    interface LimelIcon {
        /**
          * Set to `true` to give the icon a round background with some padding. Only works when the `size` attribute is also set.
         */
        "badge"?: boolean;
        /**
          * Name of the icon
         */
        "name"?: string;
        /**
          * Size of the icon
         */
        "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-icon
     * @exampleComponent limel-example-icon-button-composite
     */
    interface LimelIconButton {
        /**
          * Set to `true` to disable the button.
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to give the button our standard "elevated" look, lifting it off the flat layout.
         */
        "elevated"?: boolean;
        /**
          * The icon to display.
         */
        "icon"?: string | Icon;
        /**
          * The text to show to screenreaders and other assistive tech.
         */
        "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-primary-slot
     * @exampleComponent limel-example-info-tile-styling
     */
    interface LimelInfoTile {
        /**
          * If supplied, the info tile will display a notification badge.
         */
        "badge"?: number | string;
        /**
          * Set to `true` if info tile is disabled.
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the info tile.
         */
        "icon"?: string;
        /**
          * The text to show below the info tile. Long labels will be truncated.
         */
        "label"?: string;
        /**
          * If supplied, the info tile will be a clickable link.  Supplying a value also adds an elevated effect using a shadow, as well as `cursor: pointer`, which appears on hover. While we strongly recommend supplying a link whenever the component should act as a link, if this is not possible, and you need to provide interaction through a click handler, you can still get the correct styling by supplying a `Link` object with the `href` property set to `'#'`.
         */
        "link"?: Link;
        /**
          * Set to `true` to put the component in the `loading` state. This does _not_ disable the link. To do so, the `disabled` property should be set to `true` as well.
         */
        "loading"?: boolean;
        /**
          * A string of text that is visually placed before the value.
         */
        "prefix"?: string;
        /**
          * Properties of the optional circular progress bar.  Defaults: - `maxValue`: 100 - `suffix`: % - `displayPercentageColors`: false  Colors change with intervals of 10 %.
         */
        "progress"?: InfoTileProgress;
        /**
          * A string of text that is visually placed after the value.
         */
        "suffix"?: string;
        /**
          * A piece of text or number that is the main piece of information which the component is intended to visualize.
         */
        "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.
         */
        "completions"?: string[];
        /**
          * 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.
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to format the current value of the input field only if the field is of type number. The number format is determined by the current language of the browser.
         */
        "formatNumber"?: boolean;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
         */
        "invalid"?: boolean;
        /**
          * The input label.
         */
        "label"?: string;
        /**
          * Leading icon to show to the far left in the field.
         */
        "leadingIcon"?: string;
        /**
          * The locale to use for formatting numbers.
         */
        "locale"?: string;
        /**
          * Maximum allowed value if input type is `number`.
         */
        "max"?: number;
        /**
          * Maximum length of the value if type is `password`, `search`, `tel`, `text`, `url`, or `urlAsText`.
         */
        "maxlength"?: number;
        /**
          * Minimum allowed value if input type is `number`.
         */
        "min"?: number;
        /**
          * Minimum length of the value if type is `password`, `search`, `tel`, `text`, `url`, or `urlAsText`.
         */
        "minlength"?: number;
        /**
          * Emitted when `trailingIcon` or `leadingIcon` is set and the icon is interacted with.
         */
        "onAction"?: (event: LimelInputFieldCustomEvent<void>) => void;
        /**
          * Emitted when the input value is changed.
         */
        "onChange"?: (event: LimelInputFieldCustomEvent<string>) => void;
        /**
          * Regular expression that the current value of the input field must match. No forward slashes should be specified around the pattern. Only used if type is `text`, `tel`, `email`, `url`, `urlAsText`, `password`, or `search`.
         */
        "pattern"?: string;
        /**
          * The placeholder text shown inside the input field, when the field is focused and empty.
         */
        "placeholder"?: string;
        /**
          * A short piece of text to display before the value inside the input field. Displayed for all types except `textarea`.
         */
        "prefix"?: string;
        /**
          * Set to `true` to make the field read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
         */
        "required"?: boolean;
        /**
          * For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to `true` to show a trailing icon with a `mailto:`,`tel:`, or normal link, respectively. The default icon can be overridden using the `trailingIcon` property.
         */
        "showLink"?: boolean;
        /**
          * Incremental values that are valid if the field type is `number`.
         */
        "step"?: number | 'any';
        /**
          * A short piece of text to display after the value inside the input field. Displayed for all types except `textarea`.
         */
        "suffix"?: string;
        /**
          * Trailing icon to show to the far right in the field.
         */
        "trailingIcon"?: string;
        /**
          * Type of input.  Note** regarding type `url`: `limel-input` uses the native validation built into the browser for many types of input fields. The native validation for `url` is very strict, and does not allow relative urls, nor any other formats that are not a "fully qualified" url. To allow such urls, use the type `urlAsText` instead. `urlAsText` works exactly like `text` in all regards, except that it enables use of the `showLink` property.
         */
        "type"?: InputType;
        /**
          * The value of the field.
         */
        "value"?: string;
    }
    /**
     * The linear progress component can be used to visualize the current state of a progress in a scale;
     * for example percentage of completion of a task.
     * @exampleComponent limel-example-linear-progress
     * @exampleComponent limel-example-linear-progress-indeterminate
     * @exampleComponent limel-example-linear-progress-accessible-label
     * @exampleComponent limel-example-linear-progress-color
     */
    interface LimelLinearProgress {
        /**
          * A label used to describe the purpose of the element to users of assistive technologies, like screen readers. If not provided, the generic word of "Progress bar" will be used.
         */
        "accessibleLabel"?: string;
        /**
          * Puts the progress bar in an indeterminate state
         */
        "indeterminate"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language"?: Languages;
        /**
          * The value of the progress bar. Should be between `0` and `1`.
         */
        "value"?: number;
    }
    /**
     * @exampleComponent limel-example-list
     * @exampleComponent limel-example-list-secondary
     * @exampleComponent limel-example-list-separator
     * @exampleComponent limel-example-list-icons
     * @exampleComponent limel-example-list-badge-icons
     * @exampleComponent limel-example-list-pictures
     * @exampleComponent limel-example-list-selectable
     * @exampleComponent limel-example-list-checkbox-icons
     * @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
         */
        "badgeIcons"?: boolean;
        /**
          * Size of the icons in the list
         */
        "iconSize"?: IconSize;
        /**
          * List of items to display
         */
        "items"?: Array<ListItem | ListSeparator>;
        /**
          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
         */
        "maxLinesSecondaryText"?: number;
        /**
          * Fired when a new value has been selected from the list. Only fired if `type` is set to `selectable`, `radio` or `checkbox`.
         */
        "onChange"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
        /**
          * Fires when a user interacts with an item in the list (e.g., click, keyboard select).
         */
        "onInteract"?: (event: LimelListCustomEvent<ListItem>) => void;
        /**
          * Fired when an action has been selected from the action menu of a list item
         */
        "onSelect"?: (event: LimelListCustomEvent<ListItem | ListItem[]>) => void;
        /**
          * The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection.
         */
        "type"?: ListType;
    }
    /**
     * The Markdown component receives markdown syntax
     * and renders it as HTML.
     * @exampleComponent limel-example-markdown-headings
     * @exampleComponent limel-example-markdown-emphasis
     * @exampleComponent limel-example-markdown-lists
     * @exampleComponent limel-example-markdown-links
     * @exampleComponent limel-example-markdown-images
     * @exampleComponent limel-example-markdown-code
     * @exampleComponent limel-example-markdown-footnotes
     * @exampleComponent limel-example-markdown-tables
     * @exampleComponent limel-example-markdown-html
     * @exampleComponent limel-example-markdown-keys
     * @exampleComponent limel-example-markdown-blockquotes
     * @exampleComponent limel-example-markdown-horizontal-rule
     * @exampleComponent limel-example-markdown-composite
     * @exampleComponent limel-example-markdown-custom-component
     */
    interface LimelMarkdown {
        /**
          * Enable lazy loading for images
         */
        "lazyLoadImages"?: boolean;
        /**
          * The input text. Treated as GitHub Flavored Markdown, with the addition that any included HTML will be parsed and rendered as HTML, rather than as text.
         */
        "value"?: string;
        /**
          * Whitelisted html elements.  Any custom element added here will not be sanitized and thus rendered. Can also be set via `limel-config`. Setting this property will override the global config.
          * @alpha
         */
        "whitelist"?: CustomElementDefinition[];
    }
    /**
     * @exampleComponent limel-example-menu-basic
     * @exampleComponent limel-example-menu-disabled
     * @exampleComponent limel-example-menu-open-direction
     * @exampleComponent limel-example-menu-surface-width
     * @exampleComponent limel-example-menu-separators
     * @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-sub-menus
     * @exampleComponent limel-example-menu-sub-menu-lazy-loading
     * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
     * @exampleComponent limel-example-menu-searchable
     * @exampleComponent limel-example-menu-composite
     */
    interface LimelMenu {
        /**
          * Defines whether the menu should show badges.
         */
        "badgeIcons"?: boolean;
        /**
          * Sets the disabled state of the menu.
         */
        "disabled"?: boolean;
        /**
          * Message to display when search returns 0 results.
         */
        "emptyResultMessage"?: string;
        /**
          * Renders list items in a grid layout, rather than a vertical list
         */
        "gridLayout"?: boolean;
        /**
          * A list of items and separators to show in the menu.
         */
        "items"?: Array<MenuItem | ListSeparator>;
        /**
          * Is emitted when the menu is cancelled.
         */
        "onCancel"?: (event: LimelMenuCustomEvent<void>) => void;
        /**
          * Is emitted when a menu item with a sub-menu is selected.
         */
        "onNavigateMenu"?: (event: LimelMenuCustomEvent<MenuItem | null>) => void;
        /**
          * Is emitted when a menu item is selected.
         */
        "onSelect"?: (event: LimelMenuCustomEvent<MenuItem>) => void;
        /**
          * Sets the open state of the menu.
         */
        "open"?: boolean;
        /**
          * Decides the menu's location in relation to its trigger
         */
        "openDirection"?: OpenDirection;
        /**
          * A root breadcrumb item to show above the menu items. Clicking it navigates back from a sub-menu to the root menu.
         */
        "rootItem"?: BreadcrumbsItem;
        /**
          * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `MenuItem`:s.  See the docs for the type `MenuSearcher` for type information on the searcher function itself.
         */
        "searcher"?: MenuSearcher;
        /**
          * Decides the width of menu's dropdown
         */
        "surfaceWidth"?: SurfaceWidth;
    }
    /**
     * @private 
     */
    interface LimelMenuList {
        /**
          * Set to `true` if the list should display larger icons with a background
         */
        "badgeIcons"?: boolean;
        /**
          * Size of the icons in the list
         */
        "iconSize"?: IconSize;
        /**
          * List of items to display
         */
        "items"?: Array<MenuItem | ListSeparator>;
        /**
          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
         */
        "maxLinesSecondaryText"?: number;
        /**
          * Fires when a user interacts with an item in the list (e.g., click, keyboard select).
         */
        "onInteract"?: (event: LimelMenuListCustomEvent<MenuItem>) => void;
        /**
          * Fired when a new value has been selected from the list.
         */
        "onSelect"?: (event: LimelMenuListCustomEvent<MenuItem>) => void;
    }
    /**
     * @private 
     */
    interface LimelMenuSurface {
        /**
          * Clicks in this element should not be prevented when the menu surface is open
         */
        "allowClicksElement"?: HTMLElement;
        /**
          * Emitted when the menu surface is dismissed and should be closed
         */
        "onDismiss"?: (event: LimelMenuSurfaceCustomEvent<void>) => void;
        /**
          * True if the menu surface is open, false otherwise
         */
        "open"?: boolean;
    }
    /**
     * This is a private component, used to render a notched outline
     * around all input elements that can have a floating label.
     * Inspired by Material Design's styles for input fields.
     * We use it in various components to unify styles and avoid
     * repeating code.
     * :::note
     * The component has `shadow: false`. This is to improve performance,
     * and ensure that its internal elements are considered as internal parts
     * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
     * would be correctly associated with the input element's `id`, in the consumer component.
     * :::
     * @exampleComponent limel-example-notched-outline-basic
     * @private 
     */
    interface LimelNotchedOutline {
        /**
          * Set to `true` to indicate that the input element is disabled. This applies proper visual styles, such as making the outlines and the label transparent.
         */
        "disabled"?: boolean;
        /**
          * Set to `true` when the consumer element needs to render the label above the input element, despite existence of a `value`. For example in the `text-editor` or `limel-select`, where the default layout requires a floating label.
         */
        "hasFloatingLabel"?: boolean;
        /**
          * Set to `true` when the consumer element displays a leading icon. This applies proper visual styles, such as rendering the label correctly placed beside the leading icon.
         */
        "hasLeadingIcon"?: boolean;
        /**
          * Set to `true` when the user has entered a value for the input element, shrinking the label in size, and visually rendering it above the entered value.
         */
        "hasValue"?: boolean;
        /**
          * Set to `true` to indicate that the current value of the input element is invalid. This applies proper visual styles, such as making the outlines red.
         */
        "invalid"?: boolean;
        /**
          * Label to display for the input element. :::important Note that the input element of the consumer component will be labeled by this label, using the `labelId` prop. :::
         */
        "label"?: string;
        /**
          * The `id` of the input element which should be labeled by the provided label.
         */
        "labelId"?: string;
        /**
          * Set to `true` when the input element is readonly. This applies proper visual styles, such as making the outline transparent.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` when the input element is required. This applies proper visual styles, such as inclusion of an asterisk beside the label.
         */
        "required"?: boolean;
    }
    /**
     * @exampleComponent limel-example-picker-basic
     * @exampleComponent limel-example-picker-multiple
     * @exampleComponent limel-example-picker-icons
     * @exampleComponent limel-example-picker-pictures
     * @exampleComponent limel-example-picker-value-as-object
     * @exampleComponent limel-example-picker-value-as-object-with-actions
     * @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'`.
         */
        "actionPosition"?: ActionPosition;
        /**
          * Scroll behavior of the custom static actions, when user scrolls in the picker's results dropdown. Can be set to `'scroll'` which means the action items will scroll together with the list, or `'sticky'` which retains their position at the top or bottom of the drop down while scrolling.
         */
        "actionScrollBehavior"?: ActionScrollBehavior;
        /**
          * Static actions that can be clicked by the user.
         */
        "actions"?: Array<ListItem<Action>>;
        /**
          * Only used if no `searcher` is provided. The picker will then use a default search function that filters the `allItems` based on the `text` and `secondaryText` properties of the items. This way, custom search functions are typically only needed when the search is done on the server. For performance reasons, the default searcher will never return more than 20 items, but if there are more than 20 items, the rest can be found by typing more characters in the search field.
         */
        "allItems"?: Array<ListItem<PickerValue>>;
        /**
          * Whether badge icons should be used in the result list or not
         */
        "badgeIcons"?: boolean;
        /**
          * Sets delimiters between chips. Works only when `multiple` is `true`.
         */
        "delimiter"?: string;
        /**
          * True if the picker should be disabled
         */
        "disabled"?: boolean;
        /**
          * A message to display when the search returned an empty result
         */
        "emptyResultMessage"?: string;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
         */
        "invalid"?: boolean;
        /**
          * Text to display for the input field of the picker
         */
        "label"?: string;
        /**
          * Leading icon to show to the far left in the text field
         */
        "leadingIcon"?: string;
        /**
          * True if multiple values are allowed
         */
        "multiple"?: boolean;
        /**
          * Emitted when the user selects an action.
         */
        "onAction"?: (event: LimelPickerCustomEvent<Action>) => void;
        /**
          * Fired when a new value has been selected from the picker
         */
        "onChange"?: (event: LimelPickerCustomEvent<ListItem<PickerValue> | Array<ListItem<PickerValue>>>) => void;
        /**
          * Fired when clicking on a selected value
         */
        "onInteract"?: (event: LimelPickerCustomEvent<ListItem<PickerValue>>) => void;
        /**
          * Set to `true` to disable adding and removing items, but allow interaction with existing items.
         */
        "readonly"?: boolean;
        /**
          * True if the control requires a value
         */
        "required"?: boolean;
        /**
          * Search label to display in the input field when searching
         */
        "searchLabel"?: string;
        /**
          * A search function that takes a search-string as an argument, and returns a promise that will eventually be resolved with an array of `ListItem`:s.  See the docs for the type `Searcher` for type information on the searcher function itself.
         */
        "searcher"?: Searcher;
        /**
          * Currently selected value or values. Where the value can be an object.
         */
        "value"?: ListItem<PickerValue> | Array<ListItem<PickerValue>>;
    }
    /**
     * 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.
     * ## 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-basic
     * @exampleComponent limel-example-popover-trigger-interaction
     * @exampleComponent limel-example-popover-styling
     */
    interface LimelPopover {
        /**
          * Emits an event when the component is closing
         */
        "onClose"?: (event: LimelPopoverCustomEvent<void>) => void;
        /**
          * True if the content within the popover should be visible
         */
        "open"?: boolean;
        /**
          * Decides the popover's location in relation to its trigger
         */
        "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.
     * When the limel-portal component is used, it creates a new DOM node (a div element)
     * and appends it to a parent element (by default, the body of the document).
     * The child elements of the limel-portal are then moved from
     * their original location in the DOM to this new div element.
     * This technique is often used to overcome CSS stacking context issues,
     * or to render UI elements like modals, dropdowns, tooltips, etc.,
     * that need to visually "break out" of their container.
     * Using this component, we ensure that the content is always rendered in the
     * correct position, and never covers its own trigger, or another component
     * that is opened in the stacking layer. This way, we don't need to worry about
     * z-indexes, or other stacking context issues.
     * :::important
     * There are some caveats when using this component
     * 1. Events might not bubble up as expected since the content is moved out to
     * another DOM node.
     * 2. Any styling that is applied to content from the parent will be lost, if the
     * content is just another web-component it will work without any issues.
     * Alternatively, use the `style=""` html attribute.
     * 3. 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.
     * 4. 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-basic
     */
    interface LimelPortal {
        /**
          * The element that the content should be positioned relative to. Defaults to the limel-portal element.
         */
        "anchor"?: HTMLElement;
        /**
          * A unique ID.
         */
        "containerId"?: string;
        /**
          * Dynamic styling that can be applied to the container holding the content.
         */
        "containerStyle"?: object;
        /**
          * Used to make a dropdown have the same width as the trigger, for example in `limel-picker`.
         */
        "inheritParentWidth"?: boolean;
        /**
          * Decides which direction the portal content should open.
         */
        "openDirection"?: OpenDirection;
        /**
          * Position of the content.
         */
        "position"?: 'fixed' | 'absolute';
        /**
          * True if the content within the portal should be visible.  If the content is from within a dialog for instance, this can be set to true from false when the dialog opens to position the content properly.
         */
        "visible"?: boolean;
    }
    /**
     * This component displays a profile picture, while allowing the user
     * to change it via a file input or drag-and-drop.
     * It supports client-side image resizing and conversion,
     * as well as a simple lazy-loading mechanism.
     * @exampleComponent limel-example-profile-picture-basic
     * @exampleComponent limel-example-profile-picture-helper-text
     * @exampleComponent limel-example-profile-picture-icon
     * @exampleComponent limel-example-profile-picture-with-value
     * @exampleComponent limel-example-profile-picture-loading
     * @exampleComponent limel-example-profile-picture-image-fit
     * @exampleComponent limel-example-profile-picture-composite
     * @exampleComponent limel-example-profile-picture-resize-contain
     * @exampleComponent limel-example-profile-picture-resize-cover
     * @exampleComponent limel-example-profile-picture-resize-fallback
     * @exampleComponent limel-example-profile-picture-styling
     * @beta 
     */
    interface LimelProfilePicture {
        /**
          * A comma-separated list of accepted file types.
         */
        "accept"?: string;
        /**
          * Disables user interaction. Prevents uploading new pictures or removing existing ones.
         */
        "disabled"?: boolean;
        /**
          * Helper text shown as a tooltip on hover or focus.
         */
        "helperText"?: string;
        /**
          * Placeholder icon of the component, displayed when no image is present.
         */
        "icon"?: string | Icon;
        /**
          * How the image should fit within the container. - `cover` will fill the container and crop excess parts. - `contain` will scale the image to fit within the container without cropping.
         */
        "imageFit"?: 'cover' | 'contain';
        /**
          * Marks the control as invalid.
         */
        "invalid"?: boolean;
        /**
          * Accessible label for the the browse button.
         */
        "label"?: string;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
         */
        "language"?: Languages;
        /**
          * Set to `true` to put the component in the `loading` state, and render an indeterminate progress indicator inside. This does _not_ disable the interactivity of the component!
         */
        "loading"?: boolean;
        /**
          * Emitted when the picture changes (first FileInfo only).
         */
        "onChange"?: (event: LimelProfilePictureCustomEvent<FileInfo | undefined>) => void;
        /**
          * Emitted when a file is rejected by accept filter.
         */
        "onFilesRejected"?: (event: LimelProfilePictureCustomEvent<FileInfo[]>) => void;
        /**
          * Readonly prevents changing the value but allows interaction like focus.
         */
        "readonly"?: boolean;
        /**
          * Marks the control as required.
         */
        "required"?: boolean;
        /**
          * Optional client-side resize before emitting the file. If provided, the selected image will be resized on the client device. :::note HEIC may not decode in all browsers; when decoding fails, the original file will be emitted. See the examples for more info. :::
         */
        "resize"?: ResizeOptions;
        /**
          * Current image to display. Either a URL string or a `FileInfo` with an href.
         */
        "value"?: string | FileInfo;
    }
    /**
     * @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.
         */
        "disabled"?: boolean;
        /**
          * What flow items to render
         */
        "flowItems"?: FlowItem[];
        /**
          * Fired when a new value has been selected from the progress flow
         */
        "onChange"?: (event: LimelProgressFlowCustomEvent<FlowItem>) => void;
        /**
          * Disables the progress flow when `true`. This does not visualize the component that much differently. But since the component does not provide any feedback that users can interact with the component, it makes it perfect for illustrative and informative porpuses.
         */
        "readonly"?: boolean;
    }
    /**
     * @private 
     */
    interface LimelProgressFlowItem {
        /**
          * True for current step
         */
        "currentStep"?: boolean;
        /**
          * True if the flow item should be disabled
         */
        "disabled"?: boolean;
        /**
          * The flow item that should be rendered
         */
        "item"?: FlowItem;
        /**
          * Fired when clicking on the flow item
         */
        "onInteract"?: (event: LimelProgressFlowItemCustomEvent<void>) => void;
        /**
          * True if the flow item should be readonly
         */
        "readonly"?: boolean;
    }
    /**
     * The ProseMirror adapter offers a rich text editing experience with markdown support.
     * [Read more...](https://prosemirror.net/)
     * @exampleComponent limel-example-prosemirror-adapter-basic
     * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
     * @beta 
     * @private 
     */
    interface LimelProsemirrorAdapter {
        /**
          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
         */
        "contentType"?: 'markdown' | 'html';
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha
         */
        "customElements"?: CustomElementDefinition[];
        /**
          * 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.
         */
        "disabled"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
        /**
          * Dispatched when a change is made to the editor
         */
        "onChange"?: (event: LimelProsemirrorAdapterCustomEvent<string>) => void;
        /**
          * Dispatched when a image is pasted into the editor
          * @private 
          * @alpha
         */
        "onImagePasted"?: (event: LimelProsemirrorAdapterCustomEvent<ImageInserter>) => void;
        /**
          * Dispatched when a image is removed from the editor
          * @private 
          * @alpha
         */
        "onImageRemoved"?: (event: LimelProsemirrorAdapterCustomEvent<EditorImage>) => void;
        /**
          * Dispatched when the metadata of the editor changes (images and links)
          * @private 
          * @alpha
         */
        "onMetadataChange"?: (event: LimelProsemirrorAdapterCustomEvent<EditorMetadata>) => void;
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha
         */
        "triggerCharacters"?: TriggerCharacter[];
        /**
          * Specifies the visual appearance of the editor.
         */
        "ui"?: EditorUiType;
        /**
          * The value of the editor, expected to be markdown
         */
        "value"?: string;
    }
    /**
     * The Radio Button component provides a convenient way to create a group of radio buttons
     * from an array of options. Radio buttons allow users to select a single option from
     * multiple choices, making them ideal for exclusive selections.
     * :::note
     * A single radio button is never useful in a UI. Radio buttons should always come in groups
     * of at least 2 options where only one can be selected at a time.
     * :::
     * @exampleComponent limel-example-radio-button-group-basic
     * @exampleComponent limel-example-radio-button-group-deselect-selected
     * @exampleComponent limel-example-radio-button-group-icons
     * @exampleComponent limel-example-radio-button-group-multiple-lines
     * @beta 
     */
    interface LimelRadioButtonGroup {
        /**
          * Set to `true` if the radio button group should display larger icons with a background
         */
        "badgeIcons"?: boolean;
        /**
          * Disables all radio buttons when `true`
         */
        "disabled"?: boolean;
        /**
          * Array of radio button options to display
         */
        "items"?: Array<ListItem | ListSeparator>;
        /**
          * By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up.
         */
        "maxLinesSecondaryText"?: number;
        /**
          * Emitted when the selection changes with the full ListItem payload
         */
        "onChange"?: (event: LimelRadioButtonGroupCustomEvent<ListItem<string | number | undefined>>) => void;
        /**
          * The currently selected item in the radio button group. This is a ListItem object that contains the value and other properties of the selected item. If no item is selected, this will be `undefined`.
         */
        "selectedItem"?: ListItem<string | number>;
    }
    /**
     * @exampleComponent limel-example-select
     * @exampleComponent limel-example-select-with-icons
     * @exampleComponent limel-example-select-with-separators
     * @exampleComponent limel-example-select-with-secondary-text
     * @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-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.
         */
        "disabled"?: boolean;
        /**
          * Optional helper text to display below the input field when it has focus.
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the select is invalid.
         */
        "invalid"?: boolean;
        /**
          * Text to display next to the select.
         */
        "label"?: string;
        /**
          * Set to `true` to allow multiple values to be selected.
         */
        "multiple"?: boolean;
        /**
          * Emitted when the value is changed.
         */
        "onChange"?: (event: LimelSelectCustomEvent<Option | Option[]>) => void;
        /**
          * List of options.
         */
        "options"?: Array<Option | ListSeparator>;
        /**
          * Set to `true` to make the field read-only. This visualizes the component slightly differently. But shows no visual sign indicating that the component is disabled or can ever become interactable.
         */
        "readonly"?: boolean;
        /**
          * True if the control requires a value.
         */
        "required"?: boolean;
        /**
          * Currently selected value or values. If `multiple` is `true`, this must be an array. Otherwise it must be a single value.
         */
        "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.
         */
        "badge"?: number | string;
        /**
          * Set to `true` if shortcut is disabled.
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the shortcut.
         */
        "icon"?: string;
        /**
          * The text to show below the shortcut. Long label will be truncated.
         */
        "label"?: string;
        /**
          * If supplied, the shortcut will be a clickable link.
         */
        "link"?: Link;
    }
    /**
     * @exampleComponent limel-example-slider-basic
     * @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.
         */
        "disabled"?: boolean;
        /**
          * Default value: 1. The factor that the properties `value`, `valuemax`, `valuemin`, and `step` are multiplied by. On `change` divides the value by the factor, so the original format stays the same.
         */
        "factor"?: number;
        /**
          * Optional helper text to display below the slider
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the slider is invalid.
         */
        "invalid"?: boolean;
        /**
          * Label to display next to the input
         */
        "label"?: string;
        /**
          * Emitted when the value has been changed
         */
        "onChange"?: (event: LimelSliderCustomEvent<number>) => void;
        /**
          * Disables the slider when `true`. This visualizes the slider slightly differently. But shows no visual sign indicating that the slider field is disabled or can ever become interactable.
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the slider is required.
         */
        "required"?: boolean;
        /**
          * The stepping interval to use when adjusting the value
         */
        "step"?: number;
        /**
          * Unit to display next to the value
         */
        "unit"?: string;
        /**
          * The value of the input
         */
        "value"?: number;
        /**
          * The maximum value allowed
         */
        "valuemax"?: number;
        /**
          * The minimum value allowed
         */
        "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-with-action
     * @exampleComponent limel-example-snackbar-with-changing-messages
     * @exampleComponent limel-example-snackbar-dismissible
     * @exampleComponent limel-example-snackbar-persistent
     * @exampleComponent limel-example-snackbar-persistent-non-dismissible
     */
    interface LimelSnackbar {
        /**
          * The text to display for the action button.
         */
        "actionText"?: string;
        /**
          * When `true` displays a dismiss button on the snackbar, allowing users to close it.
         */
        "dismissible"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
        /**
          * The text message to display.
         */
        "message"?: string;
        /**
          * Whether to show the snackbar with space for multiple lines of text
          * @deprecated Setting this property no longer has any effect. The property will be removed in a future major version.
         */
        "multiline"?: boolean;
        /**
          * Emitted when the action button is pressed
         */
        "onAction"?: (event: LimelSnackbarCustomEvent<void>) => void;
        /**
          * Emitted when the snackbar hides itself
         */
        "onHide"?: (event: LimelSnackbarCustomEvent<void>) => void;
        /**
          * `true` if the snackbar is open, `false` otherwise.
         */
        "open"?: boolean;
        /**
          * The amount of time in milliseconds to show the snackbar. If set to `-1`, the snackbar will be persistent. This means: - either the end user will need to close it manually, which requires the `dismissible` property to be set to `true`. - or the snackbar needs to be closed programmatically.
         */
        "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
         */
        "limeBranded"?: boolean;
        /**
          * Determines the size of the spinner.
         */
        "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-loading
     * @exampleComponent limel-example-split-button-repeat-default-command
     */
    interface LimelSplitButton {
        /**
          * Set to `true` to disable the button.
         */
        "disabled"?: boolean;
        /**
          * Set icon for the button
         */
        "icon"?: string;
        /**
          * A list of items and separators to show in the menu.
         */
        "items"?: Array<MenuItem | ListSeparator>;
        /**
          * The text to show on the default action part of the button.
         */
        "label"?: string;
        /**
          * Set to `true` to put the button in the `loading` state. This also disables the button.
         */
        "loading"?: boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
         */
        "loadingFailed"?: boolean;
        /**
          * Is emitted when a menu item is selected.
         */
        "onSelect"?: (event: LimelSplitButtonCustomEvent<MenuItem>) => void;
        /**
          * Set to `true` to make the button primary.
         */
        "primary"?: boolean;
    }
    /**
     * The Switch component is a fundamental element in UI design that serves as a toggle switch
     * to control the state of a specific setting or option in an application or website.
     * The two distinct positions of the Switch are visually indicative of the two states:
     * ON and OFF; making it easy for users to understand the current state of the controlled feature.
     * The Switch component is widely used in user interfaces to enable users to
     * quickly and intuitively change binary settings.
     * :::important
     * Checkboxes are sometimes used interchangeably with switches in user interfaces.
     * But there is an important difference between the two! Please read our guidelines about
     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
     * @exampleComponent limel-example-switch
     * @exampleComponent limel-example-switch-helper-text
     * @exampleComponent limel-example-switch-readonly
     */
    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.
         */
        "disabled"?: boolean;
        /**
          * Optional helper text to display below the switch
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value is invalid.
         */
        "invalid"?: boolean;
        /**
          * Label to display next to the switch
         */
        "label"?: string;
        /**
          * Emitted when the value has changed
         */
        "onChange"?: (event: LimelSwitchCustomEvent<boolean>) => void;
        /**
          * Disables the switch when `true`. This visualizes the switch slightly differently. But shows no visual sign indicating that the switch is disabled or can ever become interactable.
         */
        "readonly"?: boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * The value of the switch
         */
        "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
         */
        "onChangeTab"?: (event: LimelTabBarCustomEvent<Tab>) => void;
        /**
          * 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 {
        /**
          * Emitted when a tab has been changed
         */
        "onChangeTab"?: (event: LimelTabPanelCustomEvent<Tab>) => void;
        /**
          * 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
         */
        "activeRow"?: RowData;
        /**
          * Column aggregates to be displayed in the table
         */
        "aggregates"?: ColumnAggregate[];
        /**
          * Columns used to display the data
         */
        "columns"?: Column[];
        /**
          * Data to be displayed in the table
         */
        "data"?: object[];
        /**
          * A message to display when the table has no data
         */
        "emptyMessage"?: string;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
        /**
          * Defines the layout of the table, based on how width of the columns are calculated.  - `default`: makes columns as wide as their contents. - `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width. - `stretchColumns`: stretches all columns to fill the available width when possible. - `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.
         */
        "layout"?: Layout;
        /**
          * Set to `true` to trigger loading animation
         */
        "loading"?: boolean;
        /**
          * Set to either `local` or `remote` to change how the table handles the loaded data. When in `local` mode, all sorting and pagination will be done locally with the data given. When in `remote` mode, the consumer is responsible to give the table new data when a `load` event occurs
         */
        "mode"?: 'local' | 'remote';
        /**
          * Set to `true` to enable reordering of the columns by dragging them
         */
        "movableColumns"?: boolean;
        /**
          * Emitted when a row is activated
         */
        "onActivate"?: (event: LimelTableCustomEvent<object>) => void;
        /**
          * Emitted when the columns have been changed
         */
        "onChangeColumns"?: (event: LimelTableCustomEvent<Column[]>) => void;
        /**
          * Emitted when a new page has been set
         */
        "onChangePage"?: (event: LimelTableCustomEvent<number>) => void;
        /**
          * Emitted when `mode` is `remote` and the table is loading new data. The consumer is responsible for giving the table new data
         */
        "onLoad"?: (event: LimelTableCustomEvent<TableParams>) => void;
        /**
          * Emitted when the row selection has been changed
         */
        "onSelect"?: (event: LimelTableCustomEvent<object[]>) => void;
        /**
          * Emitted when the select all rows state is toggled
         */
        "onSelectAll"?: (event: LimelTableCustomEvent<boolean>) => void;
        /**
          * Emitted when `mode` is `local` the data is sorted
         */
        "onSort"?: (event: LimelTableCustomEvent<ColumnSorter[]>) => void;
        /**
          * The page to show
         */
        "page"?: number;
        /**
          * Number of rows per page
         */
        "pageSize"?: number;
        /**
          * Enables row selection
         */
        "selectable"?: boolean;
        /**
          * Selected data. Requires `selectable` to be true.
         */
        "selection"?: object[];
        /**
          * The initial sorted columns
         */
        "sorting"?: ColumnSorter[];
        /**
          * The number of total rows available for the data
         */
        "totalRows"?: number;
    }
    /**
     * A rich text editor that offers a rich text editing experience with markdown support,
     * in the sense that you can easily type markdown syntax and see the rendered
     * result as rich text in real-time. For instance, you can type `# Hello, world!`
     * and see it directly turning to a heading 1 (an `<h1>` HTML element).
     * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
     * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
     * @exampleComponent limel-example-text-editor-basic
     * @exampleComponent limel-example-text-editor-as-form-component
     * @exampleComponent limel-example-text-editor-with-markdown
     * @exampleComponent limel-example-text-editor-with-html
     * @exampleComponent limel-example-text-editor-with-tables
     * @exampleComponent limel-example-text-editor-with-inline-images-file-storage
     * @exampleComponent limel-example-text-editor-with-inline-images-base64
     * @exampleComponent limel-example-text-editor-allow-resize
     * @exampleComponent limel-example-text-editor-size
     * @exampleComponent limel-example-text-editor-ui
     * @exampleComponent limel-example-text-editor-custom-element
     * @exampleComponent limel-example-text-editor-triggers
     * @exampleComponent limel-example-text-editor-composite
     * @beta 
     */
    interface LimelTextEditor {
        /**
          * Set to `true` to allow the user to vertically resize the editor. Set to `false` to disable the resize functionality.
         */
        "allowResize"?: boolean;
        /**
          * The type of content that the editor should handle and emit, defaults to `markdown`  Assumed to be set only once, so not reactive to changes
         */
        "contentType"?: 'markdown' | 'html';
        /**
          * A list of custom elements  Any `CustomElement` that should be used inside the text editor needs to be defined here.
          * @private 
          * @alpha
         */
        "customElements"?: CustomElementDefinition[];
        /**
          * 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.
         */
        "disabled"?: boolean;
        /**
          * Optional helper text to display below the input field when it has focus
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the editor is invalid.
         */
        "invalid"?: boolean;
        /**
          * The label of the editor
         */
        "label"?: string;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
        /**
          * Dispatched when a change is made to the editor
         */
        "onChange"?: (event: LimelTextEditorCustomEvent<string>) => void;
        /**
          * Dispatched when a image is pasted into the editor
          * @private 
          * @alpha
         */
        "onImagePasted"?: (event: LimelTextEditorCustomEvent<ImageInserter>) => void;
        /**
          * Dispatched when a image is removed from the editor
          * @private 
          * @alpha 
          * @deprecated - This event is deprecated and will be removed in a future version. Use the `metadataChange` event instead to track image removals.
         */
        "onImageRemoved"?: (event: LimelTextEditorCustomEvent<EditorImage>) => void;
        /**
          * Dispatched when the metadata of the editor changes
          * @private 
          * @alpha
         */
        "onMetadataChange"?: (event: LimelTextEditorCustomEvent<EditorMetadata>) => void;
        /**
          * Dispatched if a input is changed during an active trigger.
          * @private 
          * @alpha
         */
        "onTriggerChange"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
        /**
          * Dispatched if a trigger character is detected.
          * @private 
          * @alpha
         */
        "onTriggerStart"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
        /**
          * Dispatched if a trigger session is ended. That is if the selection goes outside the trigger input or if something is inserted using the supplied `TextEditor` insert function.
          * @private 
          * @alpha
         */
        "onTriggerStop"?: (event: LimelTextEditorCustomEvent<TriggerEventDetail>) => void;
        /**
          * The placeholder text shown inside the input field, when the field is empty.
         */
        "placeholder"?: string;
        /**
          * Set to `true` to make the component read-only. Use `readonly` when the field is only there to present the data it holds, and will not become possible for the current user to edit. :::note Consider that it might be better to use `limel-markdown` instead of `limel-text-editor` when the goal is visualizing data. :::
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.  :::important An empty but required field is not automatically considered invalid. You must make sure to check the validity of the field on your own, and properly handle the `invalid` state. :::
         */
        "required"?: boolean;
        /**
          * A set of trigger characters  Defining a character here will enable trigger events to be sent if the character is detected in the editor.
          * @private 
          * @alpha
         */
        "triggers"?: TriggerCharacter[];
        /**
          * Specifies the visual appearance of the editor.  - `standard`: The default editor appearance with a full toolbar and    standard layout. - `minimal`: A compact editor appearance, ideal for limited space    scenarios such as mobile devices. In this mode, the toolbar is hidden    until the editor is focused. - `no-toolbar`: A basic textarea appearance without any text styling toolbar.    This mode is suitable for scenarios where you want to provide a simple    text input without any visible formatting options; but still provide    support for markdown syntax and rich text, using hotkeys or when pasting.
         */
        "ui"?: EditorUiType;
        /**
          * Description of the text inside the editor as markdown
         */
        "value"?: string;
    }
    /**
     * This component is a menu for editing a link in the text editor.
     * It allows the user to input the text and url for the link.
     * @beta 
     * @private 
     */
    interface LimelTextEditorLinkMenu {
        /**
          * Open state of the link-menu dialog
         */
        "isOpen"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language"?: Languages;
        /**
          * The link
         */
        "link"?: EditorTextLink;
        /**
          * Emitted when the menu is closed from inside the component. (*Not* emitted when the consumer sets the `open`-property to `false`.)
         */
        "onCancel"?: (event: LimelTextEditorLinkMenuCustomEvent<void>) => void;
        /**
          * Emitted when the user inputs new values for the link
         */
        "onLinkChange"?: (event: LimelTextEditorLinkMenuCustomEvent<EditorTextLink>) => void;
        /**
          * Emitted when the menu is saved from inside the component.
         */
        "onSave"?: (event: LimelTextEditorLinkMenuCustomEvent<void>) => void;
    }
    /**
     * 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 (the same shadowRoot).
     * Often, it's easiest to just place them next to each other like in the example
     * below, but if you need to, you can place them differently.
     * ```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-basic
     * @exampleComponent limel-example-tooltip-max-character
     * @exampleComponent limel-example-tooltip-composite
     */
    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.
         */
        "elementId": string;
        /**
          * Additional helper text for the element. Example usage can be a keyboard shortcut to activate the function of the owner element.
         */
        "helperLabel"?: string;
        /**
          * Short descriptive text of the owner element.
         */
        "label": string;
        /**
          * The maximum amount of characters before rendering 'label' and 'helperLabel' in two rows.
         */
        "maxlength"?: number;
        /**
          * Decides the tooltip's location in relation to its trigger.
         */
        "openDirection"?: OpenDirection;
    }
    /**
     * This component is used internally by `limel-tooltip`.
     * @private 
     */
    interface LimelTooltipContent {
        /**
          * Read more in tooltip.tsx
         */
        "helperLabel"?: string;
        /**
          * Read more in tooltip.tsx
         */
        "label": string;
        /**
          * Read more in tooltip.tsx
         */
        "maxlength"?: number;
    }
    interface IntrinsicElements {
        "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow;
        "limel-action-bar": LimelActionBar;
        "limel-action-bar-item": LimelActionBarItem;
        "limel-action-bar-overflow-menu": LimelActionBarOverflowMenu;
        "limel-ai-avatar": LimelAiAvatar;
        "limel-badge": LimelBadge;
        "limel-banner": LimelBanner;
        "limel-breadcrumbs": LimelBreadcrumbs;
        "limel-button": LimelButton;
        "limel-button-group": LimelButtonGroup;
        "limel-callout": LimelCallout;
        "limel-card": LimelCard;
        "limel-chart": LimelChart;
        "limel-checkbox": LimelCheckbox;
        "limel-chip": LimelChip;
        "limel-chip-set": LimelChipSet;
        "limel-circular-progress": LimelCircularProgress;
        "limel-code-editor": LimelCodeEditor;
        "limel-collapsible-section": LimelCollapsibleSection;
        "limel-color-picker": LimelColorPicker;
        "limel-color-picker-palette": LimelColorPickerPalette;
        "limel-config": LimelConfig;
        "limel-date-picker": LimelDatePicker;
        "limel-dialog": LimelDialog;
        "limel-dock": LimelDock;
        "limel-dock-button": LimelDockButton;
        "limel-dynamic-label": LimelDynamicLabel;
        "limel-file": LimelFile;
        "limel-file-dropzone": LimelFileDropzone;
        "limel-file-input": LimelFileInput;
        "limel-file-viewer": LimelFileViewer;
        "limel-flatpickr-adapter": LimelFlatpickrAdapter;
        "limel-flex-container": LimelFlexContainer;
        "limel-form": LimelForm;
        "limel-grid": LimelGrid;
        "limel-header": LimelHeader;
        "limel-help": LimelHelp;
        "limel-help-content": LimelHelpContent;
        "limel-helper-line": LimelHelperLine;
        "limel-icon": LimelIcon;
        "limel-icon-button": LimelIconButton;
        "limel-info-tile": LimelInfoTile;
        "limel-input-field": LimelInputField;
        "limel-linear-progress": LimelLinearProgress;
        "limel-list": LimelList;
        "limel-markdown": LimelMarkdown;
        "limel-menu": LimelMenu;
        "limel-menu-list": LimelMenuList;
        "limel-menu-surface": LimelMenuSurface;
        "limel-notched-outline": LimelNotchedOutline;
        "limel-picker": LimelPicker;
        "limel-popover": LimelPopover;
        "limel-popover-surface": LimelPopoverSurface;
        "limel-portal": LimelPortal;
        "limel-profile-picture": LimelProfilePicture;
        "limel-progress-flow": LimelProgressFlow;
        "limel-progress-flow-item": LimelProgressFlowItem;
        "limel-prosemirror-adapter": LimelProsemirrorAdapter;
        "limel-radio-button-group": LimelRadioButtonGroup;
        "limel-select": LimelSelect;
        "limel-shortcut": LimelShortcut;
        "limel-slider": LimelSlider;
        "limel-snackbar": LimelSnackbar;
        "limel-spinner": LimelSpinner;
        "limel-split-button": LimelSplitButton;
        "limel-switch": LimelSwitch;
        "limel-tab-bar": LimelTabBar;
        "limel-tab-panel": LimelTabPanel;
        "limel-table": LimelTable;
        "limel-text-editor": LimelTextEditor;
        "limel-text-editor-link-menu": LimelTextEditorLinkMenu;
        "limel-tooltip": LimelTooltip;
        "limel-tooltip-content": LimelTooltipContent;
    }
}
export { LocalJSX as JSX };
declare module "@stencil/core" {
    export namespace JSX {
        interface IntrinsicElements {
            /**
             * This component enhances the visual effects, when the `tiltFollowingTheCursor`
             * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
             * This component should be added to the HTML structure of the consumer component.
             * This component carries its own styles which are needed to create a glow effect on the
             * 3D element within the parent element, when the parent is hovered.
             * The parent element must be using the `tiltFollowingTheCursor` utility function
             * imported from `3d-tilt-hover-effect.ts`. This function will dynamically
             * affect parts of the styles of this 3D glow effect.
             * @private 
             */
            "limel-3d-hover-effect-glow": LocalJSX.Limel3dHoverEffectGlow & JSXBase.HTMLAttributes<HTMLLimel3dHoverEffectGlowElement>;
            /**
             * 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-basic
             * @exampleComponent limel-example-action-bar-overflow-menu
             * @exampleComponent limel-example-action-bar-selected-item
             * @exampleComponent limel-example-action-bar-colors
             * @exampleComponent limel-example-action-bar-floating
             * @exampleComponent limel-example-action-bar-floating-expand
             * @exampleComponent limel-example-action-bar-styling
             * @exampleComponent limel-example-action-bar-as-primary-component
             * @exampleComponent limel-example-action-bar-icon-title
             */
            "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>;
            /**
             * This component displays an avatar, representing Lime AI assistants.
             * :::warning
             * This is a private component used internally in the Lime's various applications,
             * which is the reason for having it in Lime Elements —to ease the distribution
             * of the component across all our apps.
             * 3rd party developers are not allowed use this component directly.
             * :::
             * @private 
             * @exampleComponent limel-example-ai-avatar-basic
             * @exampleComponent limel-example-ai-avatar-colors
             */
            "limel-ai-avatar": LocalJSX.LimelAiAvatar & JSXBase.HTMLAttributes<HTMLLimelAiAvatarElement>;
            /**
             * 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>;
            /**
             * A Breadcrumb consists of a list of distinct "places" that a user has gone through,
             * before ending up where they are right now, in a website or an application.
             * These "places" can be for example _pages_ of a website, which are hierarchically
             * laid out before the current page that the user is looking at.
             * They could also be _steps_ which the user has gone through, which perhaps have no
             * hierarchical relation with each other, but has eventually led the user "here".
             * :::note
             * - Where the user currently is, is always the last step of the breadcrumb.
             * - A breadcrumbs never shows where users can go after this place.
             * It only illustrates where user has been before ending up here.
             * If the path that a user can take is not changing and if next steps are clear,
             * you can use the [Progress flow component](#/component/limel-progress-flow) instead.
             * :::
             * Breadcrumbs are often placed horizontally before the main content of the current screen.
             * @exampleComponent limel-example-breadcrumbs-links
             * @exampleComponent limel-example-breadcrumbs-buttons
             * @exampleComponent limel-example-breadcrumbs-icons
             * @exampleComponent limel-example-breadcrumbs-divider
             * @exampleComponent limel-example-breadcrumbs-icon-color
             * @exampleComponent limel-example-breadcrumbs-styling
             */
            "limel-breadcrumbs": LocalJSX.LimelBreadcrumbs & JSXBase.HTMLAttributes<HTMLLimelBreadcrumbsElement>;
            /**
             * @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>;
            /**
             * Card is a component that displays content about a single topic,
             * in a structured way. It can contain a header, and some supporting media such
             * as an image or an icon, a body of text, or optional actions.
             * @exampleComponent limel-example-card-basic
             * @exampleComponent limel-example-card-image
             * @exampleComponent limel-example-card-actions
             * @exampleComponent limel-example-card-clickable
             * @exampleComponent limel-example-card-orientation
             * @exampleComponent limel-example-card-slot
             * @exampleComponent limel-example-card-styling
             */
            "limel-card": LocalJSX.LimelCard & JSXBase.HTMLAttributes<HTMLLimelCardElement>;
            /**
             * A chart is a graphical representation of data, in which
             * visual symbols such as such bars, dots, lines, or slices, represent
             * each data point, in comparison to others.
             * @exampleComponent limel-example-chart-stacked-bar
             * @exampleComponent limel-example-chart-orientation
             * @exampleComponent limel-example-chart-max-value
             * @exampleComponent limel-example-chart-type-bar
             * @exampleComponent limel-example-chart-type-dot
             * @exampleComponent limel-example-chart-type-area
             * @exampleComponent limel-example-chart-type-line
             * @exampleComponent limel-example-chart-type-pie
             * @exampleComponent limel-example-chart-type-doughnut
             * @exampleComponent limel-example-chart-type-ring
             * @exampleComponent limel-example-chart-type-gantt
             * @exampleComponent limel-example-chart-type-nps
             * @exampleComponent limel-example-chart-multi-axis
             * @exampleComponent limel-example-chart-multi-axis-with-negative-start-values
             * @exampleComponent limel-example-chart-multi-axis-area-with-negative-start-values
             * @exampleComponent limel-example-chart-axis-increment
             * @exampleComponent limel-example-chart-clickable-items
             * @exampleComponent limel-example-chart-accessibility
             * @exampleComponent limel-example-chart-styling
             * @exampleComponent limel-example-chart-creative-styling
             * @beta 
             */
            "limel-chart": LocalJSX.LimelChart & JSXBase.HTMLAttributes<HTMLLimelChartElement>;
            /**
             * The Checkbox component is a classic and essential element in UI design that allows
             * users to make multiple selections from a predefined list of options. The Checkbox component is commonly used in forms and settings interfaces to enable users to
             * select one or more items from a list of choices.
             * ## States of a Checkbox
             * When a user clicks or taps on the box, it toggles between two states:
             * Checked and Unchecked.
             * However, a Checkbox can visualize a third state called the "Indeterminate" state.
             * In this state, the checkbox appears as a filled box with a horizontal line or dash inside it.
             * The Indeterminate state is typically used when dealing with checkbox groups
             * that have hierarchical relationships or when the group contains sub-items.
             * This state is used to indicate that that some, but not all, of the items in a group are selected.
             * :::important
             * Checkboxes are sometimes used interchangeably with switches in user interfaces.
             * But there is an important difference between the two! Please read our guidelines about
             * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
             * @exampleComponent limel-example-checkbox
             * @exampleComponent limel-example-checkbox-helper-text
             * @exampleComponent limel-example-checkbox-readonly
             */
            "limel-checkbox": LocalJSX.LimelCheckbox & JSXBase.HTMLAttributes<HTMLLimelCheckboxElement>;
            /**
             * Chips and buttons are both interactive elements in UI design,
             * but they serve different purposes and are used in different contexts.
             * :::warning
             * Do not use the chip component carelessly, as an alternative for
             * [`limel-button`](#/component/limel-button/) in the UI design!
             * **Buttons:**
             * Buttons are used to trigger actions. They are typically used to
             * submit forms, open dialogs, initiate a process, or perform any action
             * that changes the state of the application.
             * Buttons' labels usually contain action words, in other words, the labels is
             * a _verb in imperative mood_ such as "Submit" or "Delete".
             * Buttons are placed in areas where it's clear they will initiate
             * an action when clicked.
             * **Chips:**
             * Chips however are elements which may look like buttons, but they are
             * representing choices, filters, or tags, in a small block
             * or clearly bundled into a group. Chips are rarely used alone in the
             * user interface.
             * They are often used in a so called "chip-set", or placed together in
             * a section of the UI, where the user can expect more than one chip to be present.
             * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
             * or an item in a shopping list.
             * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
             * or opening a page with all posts tagged with the tag represented by the chip,
             * or navigating to a page with more information about the item in the shopping list.
             * :::
             * @exampleComponent limel-example-chip-button
             * @exampleComponent limel-example-chip-link
             * @exampleComponent limel-example-chip-icon-colors
             * @exampleComponent limel-example-chip-image
             * @exampleComponent limel-example-chip-badge
             * @exampleComponent limel-example-chip-filter
             * @exampleComponent limel-example-chip-removable
             * @exampleComponent limel-example-chip-menu
             * @exampleComponent limel-example-chip-loading
             * @exampleComponent limel-example-chip-progress
             * @exampleComponent limel-example-chip-size
             * @exampleComponent limel-example-chip-readonly-border
             * @exampleComponent limel-example-chip-aria-role
             */
            "limel-chip": LocalJSX.LimelChip & JSXBase.HTMLAttributes<HTMLLimelChipElement>;
            /**
             * :::note
             * **Regarding `click` and `interact` events:**
             * The `interact` event is emitted when a chip is interacted with, and is
             * the recommended way to listen for chip interactions.
             * However, if you need to handle clicks differently depending on which chip
             * was clicked, or whether the click was on a chip or elsewhere, you need to
             * listen to the native `click` event instead.
             * Native `click` events are passed through, and if the click came from
             * a chip, the chip object is available in the event object under
             * `<event object>.Lime.chip`.
             * Example usage:
             * ```ts
             * private handleClick(event: Event) {
             *     if (event && 'Lime' in event && (event.Lime as any).chip) {
             *         if ((event.Lime as { chip: Chip }).chip.href) {
             *             // Chip has href, so let the browser open the link.
             *             return;
             *         }
             *         // handle click on chip without href
             *     } else {
             *         // handle click elsewhere
             *     }
             * }
             * ```
             * :::
             * @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-with-menu-items
             * @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-image
             * @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>;
            /**
             * @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>;
            /**
             * A collapsible section can be used to group related content together
             * and hide the group when not needed.
             * Using this component can help to:
             * - Save vertical space by hiding non-essential content
             * - Improve content organization and scannability of the user interface
             * - Reduce cognitive load by displaying only a set of relevant information at a time
             * - Or disclose complex information, progressively to the user
             * @exampleComponent limel-example-collapsible-section-basic
             * @exampleComponent limel-example-collapsible-section-actions
             * @exampleComponent limel-example-collapsible-section-with-custom-header-component
             * @exampleComponent limel-example-collapsible-section-external-control
             * @exampleComponent limel-example-collapsible-section-with-slider
             * @exampleComponent limel-example-collapsible-section-invalid
             * @exampleComponent limel-example-collapsible-section-icon
             * @exampleComponent limel-example-collapsible-section-css-props
             */
            "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>;
            /**
             * Component used to set global configuration for Lime Elements.
             * :::warning
             * **Building something for Lime CRM?** Then you should _NOT_ use this component.
             * Lime CRM already uses this component to set the global configuration for
             * Lime Elements. No matter what problem you are facing at the moment, using
             * this component will not help, and might cause other problems.
             * :::
             * Building your own software, which is using Lime Elements?
             * Then you _might_ need to use this component.
             * @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 [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
             * 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-heading-actions
             * @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 components displays a different label depending on the current given
             * value. A label can consist of a text and an optional icon. If no matching
             * label is found among the given `labels`, the `defaultLabel` will be displayed.
             * One use case of the component is to enhance the visualization of a `boolean`
             * field like a checkbox or switch in a `readonly` state.
             * The reason we offer this component is that the default styling
             * of the Checkbox or Toggle switch in the `readonly` state may not always
             * provide the best way of _visualizing information_, potentially leading to
             * confusion and negatively affecting the end-users' experience.
             * @exampleComponent limel-example-dynamic-label
             * @exampleComponent limel-example-dynamic-label-readonly-boolean
             */
            "limel-dynamic-label": LocalJSX.LimelDynamicLabel & JSXBase.HTMLAttributes<HTMLLimelDynamicLabelElement>;
            /**
             * 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-menu-items
             * @exampleComponent limel-example-file-accepted-types
             * @exampleComponent limel-example-file-composite
             */
            "limel-file": LocalJSX.LimelFile & JSXBase.HTMLAttributes<HTMLLimelFileElement>;
            /**
             * This component enables you to seamlessly convert any region of the user interface into
             * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.
             * The file dropzone can then be used to allow end-users to upload files
             * by dragging and dropping them into the specified area, for example to trigger an upload process.
             * After receiving the files, the component emits a `filesSelected` event. For unsupported
             * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
             * The event detail would be an array of `FileInfo` objects,
             * each representing a file dropped into the dropzone.
             * @exampleComponent limel-example-file-dropzone
             * @exampleComponent limel-example-file-dropzone-type-filtering
             * @private 
             */
            "limel-file-dropzone": LocalJSX.LimelFileDropzone & JSXBase.HTMLAttributes<HTMLLimelFileDropzoneElement>;
            /**
             * This component enables you to seamlessly transform any other clickable component that
             * generates a `click` event into a file input selector.
             * To use it, just wrap any clickable component inside the `limel-file-input` component.
             * Upon reception of the `click` event this component will open the native file selection
             * dialog.
             * After receiving the files, the component emits a `filesSelected` event.
             * The event detail would be an array of `FileInfo` objects,
             * each representing a file dropped into the dropzone.
             * @exampleComponent limel-example-file-input
             * @exampleComponent limel-example-file-input-type-filtering
             * @private 
             */
            "limel-file-input": LocalJSX.LimelFileInput & JSXBase.HTMLAttributes<HTMLLimelFileInputElement>;
            /**
             * This is a smart component that automatically detects
             * the most common file types such as image, audio, video, and text,
             * and properly displays them in the browser.
             * The component is also capable to render the most common office files.
             * :::note
             * Image files will always be contained in their containers, which means
             * they automatically increase or decrease in size to fill their containing box
             * whilst preserving their aspect-ratio.
             * Text and PDF files will also always respect the width and height of the
             * container in which the `limel-file-viewer` is loaded.
             * :::
             * For some file types such as text and images, the component will display a
             * download button and a button to open the file in a new browser tab.
             * This will allow users to preview the file in a fullscreen mode with the
             * browser and take advantage of for example native zooming and panning
             * functionalities.
             * @exampleComponent limel-example-file-viewer-basic
             * @exampleComponent limel-example-file-viewer-office
             * @exampleComponent limel-example-file-viewer-filename
             * @exampleComponent limel-example-file-viewer-inbuilt-actions
             * @exampleComponent limel-example-file-viewer-custom-actions
             * @exampleComponent limel-example-file-viewer-with-picker
             * @beta 
             */
            "limel-file-viewer": LocalJSX.LimelFileViewer & JSXBase.HTMLAttributes<HTMLLimelFileViewerElement>;
            /**
             * 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 - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
             * @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-with-help
             * @exampleComponent limel-example-form-row-layout
             */
            "limel-form": LocalJSX.LimelForm & JSXBase.HTMLAttributes<HTMLLimelFormElement>;
            /**
             * This component is deprecated and will be removed in a future version of
             * Lime Elements. Please use CSS for your flexible container needs 🙂
             * @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
             * @private 
             */
            "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-slot-actions
             * @exampleComponent limel-example-header-colors
             * @exampleComponent limel-example-header-responsive
             * @exampleComponent limel-example-header-narrow
             */
            "limel-header": LocalJSX.LimelHeader & JSXBase.HTMLAttributes<HTMLLimelHeaderElement>;
            /**
             * A good design is self-explanatory! However, sometimes concepts are
             * too complex to understand, no matter how well-designed a user interface is.
             * In such cases, contextual help can be a great way to provide users with
             * help precisely where and when users need it.
             * In app interface design, providing contextual help emerges as a viable practice
             * for enhancing user experience and usability.
             * Contextual help serves as a quick-to-access guiding,
             * empowering users to more easily understand and navigate through
             * the intricacies of an application.
             * Using this component designers empower users to grasp the functionality
             * of an app more effortlessly, minimizes the learning curve,
             * transforming complex features into accessible opportunities for exploration.
             * @exampleComponent limel-example-help
             * @exampleComponent limel-example-read-more
             * @exampleComponent limel-example-open-direction
             * @exampleComponent limel-example-placement
             */
            "limel-help": LocalJSX.LimelHelp & JSXBase.HTMLAttributes<HTMLLimelHelpElement>;
            /**
             * Help content
             * This is scrollable content that is placed in the popover of the Help component.
             * Moved here mostly to avoid having inlined styles in the parent component.
             * Since you cannot send styles to the Portal component, we need to have this
             * child component.
             * @private 
             */
            "limel-help-content": LocalJSX.LimelHelpContent & JSXBase.HTMLAttributes<HTMLLimelHelpContentElement>;
            /**
             * 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.
             * @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
             * @exampleComponent limel-example-helper-line-empty
             * @exampleComponent limel-example-helper-line-animation
             * @private 
             */
            "limel-helper-line": LocalJSX.LimelHelperLine & JSXBase.HTMLAttributes<HTMLLimelHelperLineElement>;
            /**
             * :::important
             * To install your icon set correctly, please read the [documentation here](#/).
             * :::
             * The size and color of the icon is normally set in CSS, however there are a few
             * standard sizes defined that can be used with the `size` property.
             * @exampleComponent limel-example-icon-name
             * @exampleComponent limel-example-icon-size
             * @exampleComponent limel-example-icon-color
             */
            "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-icon
             * @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-primary-slot
             * @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>;
            /**
             * The linear progress component can be used to visualize the current state of a progress in a scale;
             * for example percentage of completion of a task.
             * @exampleComponent limel-example-linear-progress
             * @exampleComponent limel-example-linear-progress-indeterminate
             * @exampleComponent limel-example-linear-progress-accessible-label
             * @exampleComponent limel-example-linear-progress-color
             */
            "limel-linear-progress": LocalJSX.LimelLinearProgress & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
            /**
             * @exampleComponent limel-example-list
             * @exampleComponent limel-example-list-secondary
             * @exampleComponent limel-example-list-separator
             * @exampleComponent limel-example-list-icons
             * @exampleComponent limel-example-list-badge-icons
             * @exampleComponent limel-example-list-pictures
             * @exampleComponent limel-example-list-selectable
             * @exampleComponent limel-example-list-checkbox-icons
             * @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>;
            /**
             * The Markdown component receives markdown syntax
             * and renders it as HTML.
             * @exampleComponent limel-example-markdown-headings
             * @exampleComponent limel-example-markdown-emphasis
             * @exampleComponent limel-example-markdown-lists
             * @exampleComponent limel-example-markdown-links
             * @exampleComponent limel-example-markdown-images
             * @exampleComponent limel-example-markdown-code
             * @exampleComponent limel-example-markdown-footnotes
             * @exampleComponent limel-example-markdown-tables
             * @exampleComponent limel-example-markdown-html
             * @exampleComponent limel-example-markdown-keys
             * @exampleComponent limel-example-markdown-blockquotes
             * @exampleComponent limel-example-markdown-horizontal-rule
             * @exampleComponent limel-example-markdown-composite
             * @exampleComponent limel-example-markdown-custom-component
             */
            "limel-markdown": LocalJSX.LimelMarkdown & JSXBase.HTMLAttributes<HTMLLimelMarkdownElement>;
            /**
             * @exampleComponent limel-example-menu-basic
             * @exampleComponent limel-example-menu-disabled
             * @exampleComponent limel-example-menu-open-direction
             * @exampleComponent limel-example-menu-surface-width
             * @exampleComponent limel-example-menu-separators
             * @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-sub-menus
             * @exampleComponent limel-example-menu-sub-menu-lazy-loading
             * @exampleComponent limel-example-menu-sub-menu-lazy-loading-infinite
             * @exampleComponent limel-example-menu-searchable
             * @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>;
            /**
             * This is a private component, used to render a notched outline
             * around all input elements that can have a floating label.
             * Inspired by Material Design's styles for input fields.
             * We use it in various components to unify styles and avoid
             * repeating code.
             * :::note
             * The component has `shadow: false`. This is to improve performance,
             * and ensure that its internal elements are considered as internal parts
             * of the consumer's DOM. This way, the value `for` in `<label for="id-of-input-element">`
             * would be correctly associated with the input element's `id`, in the consumer component.
             * :::
             * @exampleComponent limel-example-notched-outline-basic
             * @private 
             */
            "limel-notched-outline": LocalJSX.LimelNotchedOutline & JSXBase.HTMLAttributes<HTMLLimelNotchedOutlineElement>;
            /**
             * @exampleComponent limel-example-picker-basic
             * @exampleComponent limel-example-picker-multiple
             * @exampleComponent limel-example-picker-icons
             * @exampleComponent limel-example-picker-pictures
             * @exampleComponent limel-example-picker-value-as-object
             * @exampleComponent limel-example-picker-value-as-object-with-actions
             * @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.
             * ## 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-basic
             * @exampleComponent limel-example-popover-trigger-interaction
             * @exampleComponent limel-example-popover-styling
             */
            "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.
             * When the limel-portal component is used, it creates a new DOM node (a div element)
             * and appends it to a parent element (by default, the body of the document).
             * The child elements of the limel-portal are then moved from
             * their original location in the DOM to this new div element.
             * This technique is often used to overcome CSS stacking context issues,
             * or to render UI elements like modals, dropdowns, tooltips, etc.,
             * that need to visually "break out" of their container.
             * Using this component, we ensure that the content is always rendered in the
             * correct position, and never covers its own trigger, or another component
             * that is opened in the stacking layer. This way, we don't need to worry about
             * z-indexes, or other stacking context issues.
             * :::important
             * There are some caveats when using this component
             * 1. Events might not bubble up as expected since the content is moved out to
             * another DOM node.
             * 2. Any styling that is applied to content from the parent will be lost, if the
             * content is just another web-component it will work without any issues.
             * Alternatively, use the `style=""` html attribute.
             * 3. 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.
             * 4. 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-basic
             */
            "limel-portal": LocalJSX.LimelPortal & JSXBase.HTMLAttributes<HTMLLimelPortalElement>;
            /**
             * This component displays a profile picture, while allowing the user
             * to change it via a file input or drag-and-drop.
             * It supports client-side image resizing and conversion,
             * as well as a simple lazy-loading mechanism.
             * @exampleComponent limel-example-profile-picture-basic
             * @exampleComponent limel-example-profile-picture-helper-text
             * @exampleComponent limel-example-profile-picture-icon
             * @exampleComponent limel-example-profile-picture-with-value
             * @exampleComponent limel-example-profile-picture-loading
             * @exampleComponent limel-example-profile-picture-image-fit
             * @exampleComponent limel-example-profile-picture-composite
             * @exampleComponent limel-example-profile-picture-resize-contain
             * @exampleComponent limel-example-profile-picture-resize-cover
             * @exampleComponent limel-example-profile-picture-resize-fallback
             * @exampleComponent limel-example-profile-picture-styling
             * @beta 
             */
            "limel-profile-picture": LocalJSX.LimelProfilePicture & JSXBase.HTMLAttributes<HTMLLimelProfilePictureElement>;
            /**
             * @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>;
            /**
             * The ProseMirror adapter offers a rich text editing experience with markdown support.
             * [Read more...](https://prosemirror.net/)
             * @exampleComponent limel-example-prosemirror-adapter-basic
             * @exampleComponent limel-example-prosemirror-adapter-with-custom-menu
             * @beta 
             * @private 
             */
            "limel-prosemirror-adapter": LocalJSX.LimelProsemirrorAdapter & JSXBase.HTMLAttributes<HTMLLimelProsemirrorAdapterElement>;
            /**
             * The Radio Button component provides a convenient way to create a group of radio buttons
             * from an array of options. Radio buttons allow users to select a single option from
             * multiple choices, making them ideal for exclusive selections.
             * :::note
             * A single radio button is never useful in a UI. Radio buttons should always come in groups
             * of at least 2 options where only one can be selected at a time.
             * :::
             * @exampleComponent limel-example-radio-button-group-basic
             * @exampleComponent limel-example-radio-button-group-deselect-selected
             * @exampleComponent limel-example-radio-button-group-icons
             * @exampleComponent limel-example-radio-button-group-multiple-lines
             * @beta 
             */
            "limel-radio-button-group": LocalJSX.LimelRadioButtonGroup & JSXBase.HTMLAttributes<HTMLLimelRadioButtonGroupElement>;
            /**
             * @exampleComponent limel-example-select
             * @exampleComponent limel-example-select-with-icons
             * @exampleComponent limel-example-select-with-separators
             * @exampleComponent limel-example-select-with-secondary-text
             * @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-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-basic
             * @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-with-action
             * @exampleComponent limel-example-snackbar-with-changing-messages
             * @exampleComponent limel-example-snackbar-dismissible
             * @exampleComponent limel-example-snackbar-persistent
             * @exampleComponent limel-example-snackbar-persistent-non-dismissible
             */
            "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-loading
             * @exampleComponent limel-example-split-button-repeat-default-command
             */
            "limel-split-button": LocalJSX.LimelSplitButton & JSXBase.HTMLAttributes<HTMLLimelSplitButtonElement>;
            /**
             * The Switch component is a fundamental element in UI design that serves as a toggle switch
             * to control the state of a specific setting or option in an application or website.
             * The two distinct positions of the Switch are visually indicative of the two states:
             * ON and OFF; making it easy for users to understand the current state of the controlled feature.
             * The Switch component is widely used in user interfaces to enable users to
             * quickly and intuitively change binary settings.
             * :::important
             * Checkboxes are sometimes used interchangeably with switches in user interfaces.
             * But there is an important difference between the two! Please read our guidelines about
             * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
             * @exampleComponent limel-example-switch
             * @exampleComponent limel-example-switch-helper-text
             * @exampleComponent limel-example-switch-readonly
             */
            "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 rich text editor that offers a rich text editing experience with markdown support,
             * in the sense that you can easily type markdown syntax and see the rendered
             * result as rich text in real-time. For instance, you can type `# Hello, world!`
             * and see it directly turning to a heading 1 (an `<h1>` HTML element).
             * Naturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>
             * to toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.
             * @exampleComponent limel-example-text-editor-basic
             * @exampleComponent limel-example-text-editor-as-form-component
             * @exampleComponent limel-example-text-editor-with-markdown
             * @exampleComponent limel-example-text-editor-with-html
             * @exampleComponent limel-example-text-editor-with-tables
             * @exampleComponent limel-example-text-editor-with-inline-images-file-storage
             * @exampleComponent limel-example-text-editor-with-inline-images-base64
             * @exampleComponent limel-example-text-editor-allow-resize
             * @exampleComponent limel-example-text-editor-size
             * @exampleComponent limel-example-text-editor-ui
             * @exampleComponent limel-example-text-editor-custom-element
             * @exampleComponent limel-example-text-editor-triggers
             * @exampleComponent limel-example-text-editor-composite
             * @beta 
             */
            "limel-text-editor": LocalJSX.LimelTextEditor & JSXBase.HTMLAttributes<HTMLLimelTextEditorElement>;
            /**
             * This component is a menu for editing a link in the text editor.
             * It allows the user to input the text and url for the link.
             * @beta 
             * @private 
             */
            "limel-text-editor-link-menu": LocalJSX.LimelTextEditorLinkMenu & JSXBase.HTMLAttributes<HTMLLimelTextEditorLinkMenuElement>;
            /**
             * 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 (the same shadowRoot).
             * Often, it's easiest to just place them next to each other like in the example
             * below, but if you need to, you can place them differently.
             * ```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-basic
             * @exampleComponent limel-example-tooltip-max-character
             * @exampleComponent limel-example-tooltip-composite
             */
            "limel-tooltip": LocalJSX.LimelTooltip & JSXBase.HTMLAttributes<HTMLLimelTooltipElement>;
            /**
             * This component is used internally by `limel-tooltip`.
             * @private 
             */
            "limel-tooltip-content": LocalJSX.LimelTooltipContent & JSXBase.HTMLAttributes<HTMLLimelTooltipContentElement>;
        }
    }
}