/* 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-item/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 { 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 { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
import { Config } from "./global/config";
import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
import { DockItem } from "./components/dock/dock.types";
import { Email } from "./components/email-viewer/email-viewer.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-item/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 { 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 { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
export { Config } from "./global/config";
export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
export { DockItem } from "./components/dock/dock.types";
export { Email } from "./components/email-viewer/email-viewer.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.
          * @default []
         */
        "actions": Array<ActionBarItem | ListSeparator>;
        /**
          * When set to `true`, the action bar will be collapsible.
          * @default false
         */
        "collapsible": boolean;
        /**
          * Defines the language for translations.
          * @default document.documentElement.lang as Languages
         */
        "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`.
          * @default true
         */
        "isVisible": boolean;
        /**
          * Item that is placed in the action bar.
         */
        "item": ActionBarItem | ListSeparator;
        /**
          * When the item is selected, this will be `true`.
          * @default false
         */
        "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.
          * @default 'bottom-end'
         */
        "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
     * @exampleComponent limel-example-ai-avatar-white-background
     * @exampleComponent limel-example-ai-avatar-color-props
     */
    interface LimelAiAvatar {
        /**
          * Set to `true` to trigger animations that indicate that the AI is "thinking" or processing something.
          * @default false
         */
        "isThinking": boolean;
        /**
          * Defines the language for translations.
          * @default document.documentElement.lang as Languages
         */
        "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-basic
     * @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-basic
     */
    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 `,`.
          * @default '›'
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "loading": boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
          * @default false
         */
        "loadingFailed": boolean;
        /**
          * Set to `true` to make the button outlined.
          * @default false
         */
        "outlined": boolean;
        /**
          * Set to `true` to make the button primary.
          * @default false
         */
        "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-basic
     * @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
          * @default false
         */
        "disabled": boolean;
        /**
          * List of buttons for the group
          * @default []
         */
        "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.
          * @default 'en'
         */
        "language": Languages;
        /**
          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
          * @default 'note'
         */
        "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-3d-effect
     * @exampleComponent limel-example-card-selected
     * @exampleComponent limel-example-card-orientation
     * @exampleComponent limel-example-card-slot
     * @exampleComponent limel-example-card-styling
     * @exampleComponent limel-example-card-scrollable-shadow
     */
    interface LimelCard {
        /**
          * Actions to display in the card, to provide the user with options to interact with the content.
          * @default []
         */
        "actions"?: Array<ActionBarItem | ListSeparator1>;
        /**
          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
          * @default false
         */
        "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.
          * @default 'portrait'
         */
        "orientation": 'landscape' | 'portrait';
        /**
          * When `true`, the card displays a visual selected state (highlighted border shadow). Should be used together with `clickable` to let users toggle selection.
          * @default false
         */
        "selected": boolean;
        /**
          * When `true`, the card displays a glow effect on hover, following the 3D tilt hover effect.
          * @default true
         */
        "show3dEffect": boolean;
        /**
          * 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-axis-labels
     * @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. Defaults to the translation for "items" in the current language.
         */
        "accessibleItemsLabel"?: string;
        /**
          * Helps users of assistive technologies to understand the context of the chart, and what is being displayed.
         */
        "accessibleLabel"?: string;
        /**
          * Helps users of assistive technologies to understand what the values in the chart represent. Defaults to the translation for "value" in the current language.
         */
        "accessibleValuesLabel"?: string;
        /**
          * Specifies the increment for the axis lines.
         */
        "axisIncrement"?: number;
        /**
          * When set to true, renders visible labels for X and Y axes. Only affects chart types with X and Y axes, such as area, bar, and line charts.
          * @default false
         */
        "displayAxisLabels": boolean;
        /**
          * Makes the `text` of chart items constantly visible, By default, item texts are displayed in a tooltip, when the item is hovered or focused. Only affects chart types with X and Y axes, such as area, bar, and line charts.
          * @default false
         */
        "displayItemText": boolean;
        /**
          * Makes the `value` (or `formattedValue`) of chart items constantly visible, By default, item values are displayed in a tooltip, when the item is hovered or focused. Only affects chart types with X and Y axes, such as area, bar, and line charts.
          * @default false
         */
        "displayItemValue": boolean;
        /**
          * 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.
          * @default 'en'
         */
        "language": Languages;
        /**
          * Indicates whether the chart is in a loading state.
          * @default false
         */
        "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.
          * @default 'landscape'
         */
        "orientation"?: 'landscape' | 'portrait';
        /**
          * Defines how items are visualized in the chart.
          * @default 'stacked-bar'
         */
        "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-basic
     * @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.
          * @default false
         */
        "checked": boolean;
        /**
          * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Optional helper text to display below the checkbox
         */
        "helperText": string;
        /**
          * Enables indeterminate state. Set to `true` to signal indeterminate check.
          * @default false
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
          * @default []
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * Set to `true` to indicate that the checkbox must be checked.
          * @default false
         */
        "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.
          * @default false
         */
        "disabled": boolean;
        /**
          * Icon of the chip.
         */
        "icon"?: string | Icon;
        /**
          * Identifier for the chip. Must be unique.
          * @default crypto.randomUUID()
         */
        "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.
          * @default false
         */
        "invalid": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "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!
          * @default false
         */
        "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.
          * @default []
         */
        "menuItems"?: Array<MenuItem | 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.
          * @default false
         */
        "readonly": boolean;
        /**
          * Set to `true` to render a remove button on the chip.
          * @default false
         */
        "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.
          * @default false
         */
        "selected": boolean;
        /**
          * Defines the size of the chip.
          * @default 'default'
         */
        "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.
          * @default 'default'
         */
        "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-basic
     * @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).
          * @default 'off'
         */
        "autocomplete": string;
        /**
          * Whether the "Clear all" buttons should be shown
          * @default true
         */
        "clearAllButton": boolean;
        /**
          * For chip-set of type `input`. Sets delimiters between chips.
          * @default null
         */
        "delimiter": string;
        /**
          * True if the chip set should be disabled
          * @default false
         */
        "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.
          * @default true
         */
        "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.
          * @default 'text'
         */
        "inputType": 'search' | 'text';
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
          * @default false
         */
        "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.
          * @default 'en'
         */
        "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
          * @default null
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * True if the control requires a value
          * @default false
         */
        "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
          * @default []
         */
        "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-basic
     * @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%.
          * @default false
         */
        "displayPercentageColors": boolean;
        /**
          * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
          * @default PERCENT
         */
        "maxValue": number;
        /**
          * The prefix which is displayed before the `value`, must be a few characters characters long.
          * @default null
         */
        "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 `%`
          * @default '%'
         */
        "suffix": string;
        /**
          * The value of the progress bar.
          * @default 0
         */
        "value": number;
    }
    /**
     * Displays a visual diff between two text values, modeled on
     * GitHub's code difference view.
     * Supports unified and split (side-by-side) views with line numbers,
     * color-coded additions and removals, word-level inline highlighting,
     * and collapsible unchanged context sections.
     * @beta 
     * @exampleComponent limel-example-code-diff-basic
     * @exampleComponent limel-example-code-diff-headings
     * @exampleComponent limel-example-code-diff-json
     * @exampleComponent limel-example-code-diff-split
     * @exampleComponent limel-example-code-diff-line-wrap
     * @exampleComponent limel-example-code-diff-expand
     */
    interface LimelCodeDiff {
        /**
          * Number of unchanged context lines to display around each change.
          * @default 3
         */
        "contextLines": number;
        /**
          * Language for syntax highlighting. Currently supports `"json"`. When set, code tokens are colorized (strings, numbers, keys, etc.) alongside the diff highlighting.
         */
        "language"?: string;
        /**
          * The layout of the diff view. - `unified` — single column with interleaved additions and removals - `split` — side-by-side comparison with old on left, new on right
          * @default 'unified'
         */
        "layout": 'unified' | 'split';
        /**
          * When `true`, long lines are wrapped instead of causing horizontal scrolling. Useful when comparing prose or config files with long values.
          * @default true
         */
        "lineWrapping": boolean;
        /**
          * Heading for the modified (after) version, displayed in the diff header. Defaults to `"Modified"`, localized via `translationLanguage`.
         */
        "newHeading"?: string;
        /**
          * The "after" value to compare. Can be a string or an object (which will be serialized to JSON).
          * @default ''
         */
        "newValue": string | object;
        /**
          * Heading for the original (before) version, displayed in the diff header. Defaults to `"Original"`, localized via `translationLanguage`.
         */
        "oldHeading"?: string;
        /**
          * The "before" value to compare. Can be a string or an object (which will be serialized to JSON).
          * @default ''
         */
        "oldValue": string | object;
        /**
          * When `true`, JSON values are parsed, keys are sorted, and indentation is normalized before diffing. This eliminates noise from formatting or key-order differences.
          * @default false
         */
        "reformatJson": boolean;
        /**
          * Defines the language for translations. Will translate all visible labels and announcements.
          * @default 'en'
         */
        "translationLanguage": Languages;
    }
    /**
     * @exampleComponent limel-example-code-editor-basic
     * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
     * @exampleComponent limel-example-code-editor-fold-lint-wrap
     * @exampleComponent limel-example-code-editor-copy
     * @exampleComponent limel-example-code-editor-composite
     */
    interface LimelCodeEditor {
        /**
          * Select color scheme for the editor
          * @default 'auto'
         */
        "colorScheme": ColorScheme;
        /**
          * Set to `true` to disable the editor. Use `disabled` to indicate that the editor can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the editor may become enabled again.
          * @default false
         */
        "disabled": boolean;
        /**
          * Allows the user to fold code
          * @default false
         */
        "fold": 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 editor is invalid.
          * @default false
         */
        "invalid": boolean;
        /**
          * The input label.
         */
        "label"?: string;
        /**
          * The language of the code
         */
        "language": Language;
        /**
          * Displays line numbers in the editor
          * @default false
         */
        "lineNumbers": boolean;
        /**
          * Wraps long lines instead of showing horizontal scrollbar
          * @default false
         */
        "lineWrapping": boolean;
        /**
          * Enables linting of JSON content
          * @default false
         */
        "lint": boolean;
        /**
          * Set to `true` to make the editor read-only. Use `readonly` when the editor is only there to present the data it holds, and will not become possible for the current user to edit.
          * @default false
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "required": boolean;
        /**
          * Set to false to hide the copy button
          * @default true
         */
        "showCopyButton": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "translationLanguage": Languages;
        /**
          * The code to be rendered
          * @default ''
         */
        "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.
          * @default false
         */
        "invalid": boolean;
        /**
          * `true` if the section is expanded, `false` if collapsed.
          * @default false
         */
        "isOpen": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "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-basic
     * @exampleComponent limel-example-color-picker-custom-palette
     * @exampleComponent limel-example-color-picker-manual-input
     * @exampleComponent limel-example-color-picker-composite
     */
    interface LimelColorPicker {
        /**
          * 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.
          * @default false
         */
        "disabled": boolean;
        /**
          * Helper text of the input field
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
          * @default false
         */
        "invalid": boolean;
        /**
          * The label of the input field
         */
        "label": string;
        /**
          * Set to `false` to disallow custom color values to be typed into the input field. Setting this to `false` does not completely disable the color picker. It will only allow users to pick from the provided color palette.
          * @default true
         */
        "manualInput": boolean;
        /**
          * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
         */
        "palette"?: Array<string | CustomColorSwatch>;
        /**
          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
         */
        "paletteColumnCount"?: number;
        /**
          * 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.
          * @default false
         */
        "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 {
        /**
          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
         */
        "columnCount"?: number;
        /**
          * Helper text of the input field
         */
        "helperText": string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
          * @default false
         */
        "invalid": boolean;
        /**
          * Label of the input field
         */
        "label": string;
        /**
          * Set to `false` to disallow custom color values to be typed into the input field.
          * @default true
         */
        "manualInput": boolean;
        /**
          * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
         */
        "palette"?: CustomPalette;
        /**
          * The placeholder text shown inside the input field, when the field is focused and empty.
         */
        "placeholder": 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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default 'en'
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "required": boolean;
        /**
          * Type of date picker.
          * @default 'datetime'
         */
        "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-basic
     * @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.
          * @default {         escapeKey: true,         scrimClick: true,     }
         */
        "closingActions": ClosingActions;
        /**
          * Set to `true` to make the dialog "fullscreen".
          * @default false
         */
        "fullscreen": boolean;
        /**
          * The heading for the dialog, if any.
         */
        "heading": string | DialogHeading;
        /**
          * `true` if the dialog is open, `false` otherwise.
          * @default false
         */
        "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`.
          * @default true
         */
        "allowResize"?: boolean;
        /**
          * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.)
          * @default []
         */
        "dockFooterItems"?: DockItem[];
        /**
          * Items that are placed in the dock.
          * @default []
         */
        "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…
          * @default false
         */
        "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.
          * @default DEFAULT_MOBILE_BREAKPOINT
         */
        "mobileBreakPoint"?: number;
    }
    /**
     * @private 
     */
    interface LimelDockButton {
        /**
          * When the dock is expanded or collapsed, dock items show labels and tooltips as suitable for the layout.
          * @default false
         */
        "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.
          * @default false
         */
        "useMobileLayout"?: boolean;
    }
    /**
     * This component resembles a drag handle button, but is implemented
     * as a `private` component to allow for easier styling and future extensions.
     * :::important
     * This component has its `shadow` set to `false` in order to
     * integrate well with the drag-and-drop functionality, as well as
     * providing a better accessibility.
     * Keep in mind that its styles might be affected by the consumer
     * component, due to its light dom.
     * :::
     * :::tip
     * It's recommended to place the drag handle on the right side of
     * the item it is meant to reorder, to ensure consistent layout
     * design conventions.
     * :::
     * @exampleComponent limel-example-drag-handle-basic
     * @exampleComponent limel-example-drag-handle-horizontal
     * @private 
     */
    interface LimelDragHandle {
        /**
          * The direction in which the drag handle can be used to reorder items.
          * @default 'vertical'
         */
        "dragDirection": 'vertical' | 'horizontal';
        /**
          * Language to use for translations.
          * @default 'en'
         */
        "language": Languages;
        /**
          * The preferred direction for the tooltip to open. Defaults to 'left', as our recommended placement for a drag handle in the UI is on the far right side of draggable elements.
          * @default 'left'
         */
        "tooltipOpenDirection": OpenDirection;
    }
    /**
     * 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-basic
     * @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.
          * @default {}
         */
        "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.
          * @default []
         */
        "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 is a private component, used to render `.eml` files inside
     * `limel-file-viewer`.
     * :::note
     * If `bodyHtml` is provided, it will be rendered using `innerHTML`.
     * Consumers should pre-sanitize `bodyHtml` before passing it to the component.
     * :::
     * @exampleComponent limel-example-email-viewer-plain-text
     * @exampleComponent limel-example-email-viewer-inline-image
     * @exampleComponent limel-example-email-viewer-remote-image-policy
     * @private 
     */
    interface LimelEmailViewer {
        /**
          * Controls whether remote images (http/https) are loaded.  If omitted, the component treats this as a per-email setting. Consumers that want to remember the choice (per session/global) can provide this prop and listen for `allowRemoteImagesChange`.
         */
        "allowRemoteImages"?: boolean;
        /**
          * The email message to display.  If `email.bodyHtml` is set directly, consumers must provide sanitized HTML.
         */
        "email"?: Email;
        /**
          * Optional URL to render as a final fallback using an `<object type="text/plain">`.
         */
        "fallbackUrl"?: string;
        /**
          * Defines the localization for translations.
          * @default 'en'
         */
        "language": Languages;
    }
    /**
     * 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-basic
     * @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)
          * @default '*'
         */
        "accept": string;
        /**
          * True if the input should be disabled
          * @default false
         */
        "disabled": boolean;
        /**
          * Set to `true` to indicate that the current value of the chosen file is invalid.
          * @default false
         */
        "invalid": boolean;
        /**
          * The input label.
         */
        "label": string;
        /**
          * Defines the localisation for translations.
          * @default 'en'
         */
        "language": Languages;
        /**
          * Set to `true` to disable adding and removing files, but allow interaction with any already existing file.
          * @default false
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "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-basic
     * @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.
          * @default '*'
         */
        "accept": string;
        /**
          * Set to `true` to disable the file dropzone.
          * @default false
         */
        "disabled": boolean;
        /**
          * Is displayed to provide supplementary information to the end users, for instance, which filetypes or file sizes are accepted.
          * @default ''
         */
        "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-basic
     * @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.
          * @default '*'
         */
        "accept": string;
        /**
          * Set to `true` to disable file input selection.
          * @default false
         */
        "disabled": boolean;
        /**
          * Set to `true` to enable selection of multiple files
          * @default false
         */
        "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-eml
     * @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!
          * @default false
         */
        "allowDownload"?: boolean;
        /**
          * Displays a button that allows the user to view the file in fullscreen mode. Not displayed for office files!
          * @default false
         */
        "allowFullscreen"?: boolean;
        /**
          * Displays a button that allows the user to open the file in a new browser tab. Not displayed for office files!
          * @default false
         */
        "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.
          * @default 'en'
         */
        "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.
          * @default 'microsoft-office'
         */
        "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.
          * @default 'en'
         */
        "language": Languages;
        /**
          * Type of date picker.
          * @default 'datetime'
         */
        "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
          * @default 'center'
         */
        "align": FlexContainerAlign;
        /**
          * Direction of the main axis
          * @default 'horizontal'
         */
        "direction": FlexContainerDirection;
        /**
          * Specify how items are aligned along the main axis
          * @default 'space-between'
         */
        "justify": FlexContainerJustify;
        /**
          * Reverse the order of the items
          * @default false
         */
        "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-array-item-controls
     * @exampleComponent limel-example-form-with-help
     * @exampleComponent limel-example-form-row-layout
     * @exampleComponent limel-example-builtin-field-types-form
     * @exampleComponent limel-example-code-editor-form
     */
    interface LimelForm {
        /**
          * Set to `true` to disable the whole form.
          * @default false
         */
        "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
          * @default {}
         */
        "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-basic
     * @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 `,`.
          * @default '·'
         */
        "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-basic
     * @exampleComponent limel-example-read-more
     * @exampleComponent limel-example-open-direction
     * @exampleComponent limel-example-placement
     */
    interface LimelHelp {
        /**
          * {@inheritdoc Help.openDirection}
          * @default 'top-start'
         */
        "openDirection": OpenDirection;
        /**
          * {@inheritdoc Help.readMoreLink}
         */
        "readMoreLink"?: Link;
        /**
          * {@inheritdoc Help.trigger}
          * @default '?'
         */
        "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-basic
     * @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.
          * @default false
         */
        "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;
    }
    /**
     * This is a display-only component used to visualize keyboard shortcuts.
     * It renders hotkey strings as styled `<kbd>` elements with
     * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
     * It does **not** listen for or handle any keyboard events.
     * Keyboard event handling is the responsibility of the parent component
     * (e.g. `limel-menu` or `limel-select`).
     * @exampleComponent limel-example-hotkey-basic
     * @exampleComponent limel-example-hotkey-disabled
     * @private 
     */
    interface LimelHotkey {
        /**
          * When `true`, the hotkey is rendered in a visually disabled state.
          * @default false
         */
        "disabled": boolean;
        /**
          * The hotkey string to visualize, e.g. `"meta+c"` or `"shift+enter"`.
         */
        "value": string;
    }
    /**
     * :::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-helper-label
     * @exampleComponent limel-example-icon-button-composite
     */
    interface LimelIconButton {
        /**
          * Set to `true` to disable the button.
          * @default false
         */
        "disabled": boolean;
        /**
          * Set to `true` to give the button our standard "elevated" look, lifting it off the flat layout.
          * @default false
         */
        "elevated": boolean;
        /**
          * Additional helper text for the tooltip. Example usage can be a keyboard shortcut to activate the function of the button.
         */
        "helperLabel"?: string;
        /**
          * The icon to display.
         */
        "icon": string | Icon;
        /**
          * The text to show to screenreaders and other assistive tech. It is also displayed as a tooltip when the user hovers or focuses the button.
         */
        "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-basic
     * @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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the info tile.
         */
        "icon"?: string;
        /**
          * The text to show below the info tile. Long labels will be truncated.
          * @default null
         */
        "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.
          * @default false
         */
        "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
     * @exampleComponent limel-example-input-field-selection
     */
    interface LimelInputField {
        /**
          * list of suggestions `value` can autocomplete to.
          * @default []
         */
        "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.
          * @default false
         */
        "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.
          * @default true
         */
        "formatNumber": boolean;
        /**
          * Returns the direction of the current text selection. Can be `'forward'`, `'backward'`, or `'none'`. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`).
         */
        "getSelectionDirection": () => Promise<"forward" | "backward" | "none" | null>;
        /**
          * Returns the end position of the current text selection. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`).
         */
        "getSelectionEnd": () => Promise<number | null>;
        /**
          * Returns the start position of the current text selection. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`).
         */
        "getSelectionStart": () => Promise<number | null>;
        /**
          * 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.
          * @default false
         */
        "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.
          * @default globalConfig.defaultLocale
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "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.
          * @default false
         */
        "showLink": boolean;
        /**
          * Defines which numeric values are valid and the increment/decrement interval. For example, `step={0.1}` allows decimals and steps by 0.1. Set to `'any'` to allow any numeric value. Only applies when `type` is `number`.
          * @default 'any'
         */
        "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.
          * @default 'text'
         */
        "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-basic
     * @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
          * @default false
         */
        "indeterminate": boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "language": Languages;
        /**
          * The value of the progress bar. Should be between `0` and `1`.
          * @default 0
         */
        "value": number;
    }
    /**
     * @exampleComponent limel-example-list-basic
     * @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
          * @default 'small'
         */
        "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.
          * @default 3
         */
        "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;
    }
    /**
     * This components displays the list item.
     * This centralizes styles and functionality, and helps reduce redundant code
     * in consumer components such as `limel-list` and `limel-menu-list`.
     * :::note
     * The component has `shadow: false`. There are a few reasons for it:
     * 1. This is to improve performance, and ensure that its internal elements are
     * considered as internal parts of the consumer's DOM.
     * 2. The consumer does not need to implement the interactive styles
     * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no
     * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,
     * within the component's own styles.
     * 3. Most importantly, the MDCList checks the light DOM of each list item
     * to find native inputs to decide the list mode (checkbox/radio).
     * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s
     * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given
     * an array index (for the items).
     * With `shadow: false`, the native `<input type="checkbox/radio">` from this template
     * would be visible to MDC.
     * :::
     * @exampleComponent limel-example-list-item-basic
     * @exampleComponent limel-example-list-item-icon
     * @exampleComponent limel-example-list-item-icon-size
     * @exampleComponent limel-example-list-item-pictures
     * @exampleComponent limel-example-list-item-multiple-lines
     * @exampleComponent limel-example-list-item-interactive
     * @exampleComponent limel-example-list-item-radio
     * @exampleComponent limel-example-list-item-checkbox
     * @exampleComponent limel-example-list-item-actions
     * @exampleComponent limel-example-list-item-primary-component
     * @exampleComponent limel-example-list-item-command-text
     * @private 
     */
    interface LimelListItem {
        /**
          * {@inheritdoc ListItem.selected}
         */
        "actions"?: ListItem['actions'];
        /**
          * Set to `true` if the list should display larger icons with a background
          * @default false
         */
        "badgeIcon": boolean;
        /**
          * {@inheritdoc ListItem.disabled}
          * @default false
         */
        "disabled": boolean;
        /**
          * {@inheritdoc ListItem.icon}
         */
        "icon"?: string | ListItem['icon'];
        /**
          * Size of the icon displayed for this item.
          * @default 'small'
         */
        "iconSize": IconSize;
        /**
          * {@inheritdoc ListItem.image}
         */
        "image"?: ListItem['image'];
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "language": Languages;
        /**
          * {@inheritdoc ListItem.selected}
         */
        "primaryComponent"?: ListItem['primaryComponent'];
        /**
          * {@inheritdoc ListItem.secondaryText}
         */
        "secondaryText"?: string;
        /**
          * {@inheritdoc ListItem.selected}
          * @default false
         */
        "selected": boolean;
        /**
          * {@inheritdoc ListItem.text}
         */
        "text": string;
        /**
          * The semantic role of the list item. This affects the ARIA role and the interaction behavior.  - 'option' → selectable via click/Enter/Space, aria-selected - 'radio'/'checkbox' → selectable, aria-checked - 'menuitem'/'listitem' → activation only, no selection toggle
          * @default 'listitem'
         */
        "type": 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox';
        /**
          * {@inheritdoc ListItem.value}
         */
        "value"?: any;
    }
    /**
     * The Markdown component receives markdown syntax
     * and renders it as HTML.
     * A built-in set of lime-elements components is whitelisted by default
     * and can be used directly in markdown content without any configuration.
     * Consumers can extend this list via the `whitelist` prop or `limel-config`.
     * When custom elements use JSON attribute values, any URL-bearing
     * properties (`href`, `src`, `cite`, `longDesc`) are automatically
     * sanitized using the same protocol allowlists as rehype-sanitize.
     * URLs with dangerous schemes (e.g. `javascript:`, `data:`) are
     * removed (with a console warning) to prevent script injection.
     * @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-custom-component
     * @exampleComponent limel-example-markdown-custom-component-with-json-props
     * @exampleComponent limel-example-markdown-remove-empty-paragraphs
     * @exampleComponent limel-example-markdown-composite
     */
    interface LimelMarkdown {
        /**
          * Enable lazy loading for images
          * @default false
         */
        "lazyLoadImages": boolean;
        /**
          * Set to `false` to preserve empty paragraphs before rendering. Empty paragraphs are paragraphs that do not contain any meaningful content (text, images, etc.), or only contain whitespace (`<br />` or `&nbsp;`).
          * @default true
         */
        "removeEmptyParagraphs": 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.
          * @default ''
         */
        "value": string;
        /**
          * Additional whitelisted custom elements to render inside markdown.  A built-in set of lime-elements components (such as `limel-chip`, `limel-icon`, `limel-badge`, `limel-callout`, etc.) is always allowed by default. Any entries provided here are **merged** with those defaults — if both define the same `tagName`, their attributes are combined.  Can also be set via `limel-config`. Setting this property will override the global config.  JSON attribute values that contain URL-bearing properties (`href`, `src`, `cite`, `longDesc`) are automatically sanitized using the same protocol allowlists as rehype-sanitize. URLs with dangerous schemes (e.g. `javascript:`, `data:`) are removed (with a console warning).
          * @alpha 
          * @default globalConfig.markdownWhitelist
         */
        "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-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-hotkeys
     * @exampleComponent limel-example-menu-searchable-hotkeys
     * @exampleComponent limel-example-menu-composite
     */
    interface LimelMenu {
        /**
          * Defines whether the menu should show badges.
          * @default false
         */
        "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.
          * @default false
         */
        "disabled": boolean;
        /**
          * Message to display when search returns 0 results.
         */
        "emptyResultMessage"?: string;
        /**
          * Renders list items in a grid layout, rather than a vertical list
          * @default false
         */
        "gridLayout": boolean;
        /**
          * A list of items and separators to show in the menu.
          * @default []
         */
        "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. :::
          * @default false
         */
        "loading": boolean;
        /**
          * Sets the open state of the menu.
          * @default false
         */
        "open": boolean;
        /**
          * Decides the menu's location in relation to its trigger
          * @default 'bottom-start'
         */
        "openDirection": OpenDirection;
        /**
          * A root breadcrumb item to show above the menu items. Clicking it navigates back from a sub-menu to the root menu.
          * @default DEFAULT_ROOT_BREADCRUMBS_ITEM
         */
        "rootItem": BreadcrumbsItem;
        /**
          * Placeholder text for the search input field.
         */
        "searchPlaceholder"?: 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 `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
          * @default 'inherit-from-items'
         */
        "surfaceWidth": SurfaceWidth;
    }
    /**
     * Meta content for menu list items
     * This sub-component is intended to be passed as `primaryComponent`
     * to `limel-list-item`, when it is used in the menu list.
     * It includes command text, badge, and chevron, which are the
     * features of menu list items.
     * @private 
     */
    interface LimelMenuItemMeta {
        /**
          * Optional badge value
         */
        "badge"?: string | number;
        /**
          * Use to display optional keyboard shortcut or command hint, e.g. `⌘ + K`
         */
        "commandText"?: string;
        /**
          * Will be set to `true` when the menu item is disabled.
          * @default false
         */
        "disabled": boolean;
        /**
          * Hotkey to display. When provided, `commandText` is ignored.
         */
        "hotkey"?: string;
        /**
          * Shows a submenu chevron to indicate nested items
          * @default false
         */
        "showChevron": boolean;
    }
    /**
     * @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
          * @default 'small'
         */
        "iconSize": IconSize;
        /**
          * List of items to display
         */
        "items": Array<MenuItem | ListSeparator>;
    }
    /**
     * @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
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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'`.
          * @default '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.
          * @default 'sticky'
         */
        "actionScrollBehavior": ActionScrollBehavior;
        /**
          * Static actions that can be clicked by the user.
          * @default []
         */
        "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.
          * @default []
         */
        "allItems"?: Array<ListItem<PickerValue>>;
        /**
          * Whether badge icons should be used in the result list or not
          * @default false
         */
        "badgeIcons": boolean;
        /**
          * Sets delimiters between chips. Works only when `multiple` is `true`.
          * @default null
         */
        "delimiter": string;
        /**
          * True if the picker should be disabled
          * @default false
         */
        "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.
          * @default false
         */
        "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
          * @default false
         */
        "multiple": boolean;
        /**
          * Set to `true` to disable adding and removing items, but allow interaction with existing items.
          * @default false
         */
        "readonly": boolean;
        /**
          * True if the control requires a value
          * @default false
         */
        "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
          * @default false
         */
        "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.
          * @default null
         */
        "anchor"?: HTMLElement;
        /**
          * A unique ID.
         */
        "containerId": string;
        /**
          * Dynamic styling that can be applied to the container holding the content.
          * @default {}
         */
        "containerStyle": object;
        /**
          * Used to make a dropdown have the same width as the trigger, for example in `limel-picker`.
          * @default false
         */
        "inheritParentWidth": boolean;
        /**
          * Decides which direction the portal content should open.
          * @default 'bottom'
         */
        "openDirection": OpenDirection;
        /**
          * Position of the content.
          * @default 'absolute'
         */
        "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.
          * @default false
         */
        "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.
          * @default 'image/jpeg,image/png,image/heic,.jpg,.jpeg,.png,.heic'
         */
        "accept": string;
        /**
          * Disables user interaction. Prevents uploading new pictures or removing existing ones.
          * @default false
         */
        "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.
          * @default 'user'
         */
        "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.
          * @default 'cover'
         */
        "imageFit": 'cover' | 'contain';
        /**
          * Marks the control as invalid.
          * @default false
         */
        "invalid": boolean;
        /**
          * Accessible label for the the browse button.
         */
        "label": string;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "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!
          * @default false
         */
        "loading": boolean;
        /**
          * Readonly prevents changing the value but allows interaction like focus.
          * @default false
         */
        "readonly": boolean;
        /**
          * Marks the control as required.
          * @default false
         */
        "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.
          * @default false
         */
        "disabled": boolean;
        /**
          * What flow items to render
          * @default []
         */
        "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.
          * @default false
         */
        "readonly": boolean;
    }
    /**
     * @private 
     */
    interface LimelProgressFlowItem {
        /**
          * True for current step
          * @default false
         */
        "currentStep": boolean;
        /**
          * True if the flow item should be disabled
          * @default false
         */
        "disabled": boolean;
        /**
          * The flow item that should be rendered
          * @default null
         */
        "item": FlowItem;
        /**
          * True if the flow item should be readonly
          * @default false
         */
        "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
          * @default 'markdown'
         */
        "contentType": 'markdown' | 'html';
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha 
          * @default []
         */
        "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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Defines the language for translations.
         */
        "language": Languages;
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha 
          * @default []
         */
        "triggerCharacters": TriggerCharacter[];
        /**
          * Specifies the visual appearance of the editor.
          * @default 'standard'
         */
        "ui": EditorUiType;
        /**
          * The value of the editor, expected to be markdown
         */
        "value": string;
    }
    /**
     * This is a low-level private component that renders individual radio button elements.
     * It's used internally by the list-item component to render radio buttons when
     * `type="radio"` is specified.
     * ## Usage in the Library
     * This template is primarily used by:
     * - `limel-list` component when `type="radio"`
     * - `limel-radio-button-group` component (which wraps `limel-list`)
     * ## Why This Exists
     * While we have `limel-radio-button-group` for most use cases, this template provides
     * the actual radio button HTML structure with proper MDC classes and accessibility
     * attributes. It ensures consistent styling and behavior across all radio button
     * implementations in the library.
     * ## Design Philosophy
     * This follows the principle that individual radio buttons should not be standalone
     * components, as a single radio button is never useful in a UI. Instead, this template
     * is used to build groups of radio buttons through higher-level components.
     * However, since this is a private component, consumers who need to use a radio button
     * outside of the context of a list or group, can still use the `limel-radio-button`
     * component directly according to in their UI needs.
     * @private 
     */
    interface LimelRadioButton {
        /**
          * Indicates whether the radio button is checked.
         */
        "checked"?: boolean;
        /**
          * Disables the radio button when set to `true`.
         */
        "disabled"?: boolean;
        /**
          * Associates the internal input with an external label.
         */
        "id": string;
        /**
          * Visual label shown next to the radio button.
         */
        "label"?: string;
        /**
          * Change handler forwarded to the underlying input element.
         */
        "onChange"?: (event: Event) => void;
    }
    /**
     * 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`
          * @default false
         */
        "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.
          * @default 3
         */
        "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-basic
     * @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-multiple-icons
     * @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.
          * @default false
         */
        "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.
          * @default false
         */
        "multiple": boolean;
        /**
          * List of options.
          * @default []
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * True if the control requires a value.
          * @default false
         */
        "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-basic
     * @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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the shortcut.
         */
        "icon": string;
        /**
          * The text to show below the shortcut. Long label will be truncated.
          * @default null
         */
        "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-unit
     * @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.
          * @default false
         */
        "disabled": boolean;
        /**
          * Set to `true` to display percentage-based colors on the slider. The colors change in intervals of 10% as the value changes, creating a color spectrum from red (low) → orange → yellow → green → teal (high).
          * @default false
         */
        "displaysPercentageColors": 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.
          * @default DEFAULT_FACTOR
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * Set to `true` to indicate that the slider is required.
          * @default false
         */
        "required": boolean;
        /**
          * The stepping interval to use when adjusting the value
         */
        "step": number;
        /**
          * Unit to display next to the value
          * @default ''
         */
        "unit": string;
        /**
          * The value of the input
         */
        "value": number;
        /**
          * The maximum value allowed
          * @default DEFAULT_MAX_VALUE
         */
        "valuemax": number;
        /**
          * The minimum value allowed
          * @default DEFAULT_MIN_VALUE
         */
        "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-basic
     * @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.
          * @default true
         */
        "dismissible": boolean;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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.
          * @default false
         */
        "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.
          * @default 5000
         */
        "timeout"?: number;
    }
    /**
     * @exampleComponent limel-example-spinner-basic
     * @exampleComponent limel-example-spinner-color
     * @exampleComponent limel-example-spinner-size
     */
    interface LimelSpinner {
        /**
          * Gives the spinner the shape of Lime Technologies' logo
          * @default false
         */
        "limeBranded": boolean;
        /**
          * Determines the size of the spinner.
          * @default 'mini'
         */
        "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.
          * @default false
         */
        "disabled": boolean;
        /**
          * Set icon for the button
         */
        "icon": string;
        /**
          * A list of items and separators to show in the menu.
          * @default []
         */
        "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.
          * @default false
         */
        "loading": boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
          * @default false
         */
        "loadingFailed": boolean;
        /**
          * Set to `true` to make the button primary.
          * @default false
         */
        "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-basic
     * @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.
          * @default false
         */
        "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.
          * @default false
         */
        "readonly": boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
          * @default []
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * The value of the switch
          * @default false
         */
        "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-basic
     * @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
          * @default []
         */
        "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-basic
     */
    interface LimelTabPanel {
        /**
          * The tabs to display in the panel
          * @default []
         */
        "tabs": Tab[];
    }
    /**
     * @exampleComponent limel-example-table-basic
     * @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-pagination
     * @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
          * @default []
         */
        "columns": Column[];
        /**
          * Data to be displayed in the table. Provide a stable `id` on each row to keep scroll position, focus, and selections intact across updates.
          * @default []
         */
        "data": object[];
        /**
          * A message to display when the table has no data
         */
        "emptyMessage": string;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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
          * @default false
         */
        "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
          * @default 'local'
         */
        "mode": 'local' | 'remote';
        /**
          * Set to `true` to enable reordering of the columns by dragging them
         */
        "movableColumns": boolean;
        /**
          * The page to show
          * @default FIRST_PAGE
         */
        "page": number;
        /**
          * Number of rows per page
         */
        "pageSize": number;
        /**
          * Location of the pagination controls. - `top`: Display pagination controls at the top of the table - `bottom`: Display pagination controls at the bottom of the table (default)
          * @default 'bottom'
         */
        "paginationLocation": 'top' | 'bottom';
        /**
          * Enables row selection
         */
        "selectable": boolean;
        /**
          * Selected data. Requires `selectable` to be true.
         */
        "selection": object[];
        /**
          * Set to `false` to disable column sorting through header interactions. Programmatic sorting through the `sorting` prop and `sort` event remains available.
          * @default true
         */
        "sortableColumns": boolean;
        /**
          * The initial sorted columns
          * @default []
         */
        "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.
          * @default true
         */
        "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
          * @default 'markdown'
         */
        "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 
          * @default []
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * The label of the editor
         */
        "label"?: string;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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. :::
          * @default false
         */
        "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. :::
          * @default false
         */
        "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 
          * @default []
         */
        "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.
          * @default 'standard'
         */
        "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
          * @default false
         */
        "isOpen": boolean;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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.
          * @default DEFAULT_MAX_LENGTH
         */
        "maxlength"?: number;
        /**
          * Decides the tooltip's location in relation to its trigger.
          * @default 'top'
         */
        "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 LimelEmailViewerCustomEvent<T> extends CustomEvent<T> {
    detail: T;
    target: HTMLLimelEmailViewerElement;
}
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;
    };
    interface HTMLLimelActionBarElementEventMap {
        "itemSelected": ActionBarItem;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelActionBarElementEventMap>(type: K, listener: (this: HTMLLimelActionBarElement, ev: LimelActionBarCustomEvent<HTMLLimelActionBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelActionBarElementEventMap>(type: K, listener: (this: HTMLLimelActionBarElement, ev: LimelActionBarCustomEvent<HTMLLimelActionBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelActionBarElement: {
        prototype: HTMLLimelActionBarElement;
        new (): HTMLLimelActionBarElement;
    };
    interface HTMLLimelActionBarItemElementEventMap {
        "select": ActionBarItem | ListSeparator;
    }
    /**
     * @private 
     */
    interface HTMLLimelActionBarItemElement extends Components.LimelActionBarItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelActionBarItemElementEventMap>(type: K, listener: (this: HTMLLimelActionBarItemElement, ev: LimelActionBarItemCustomEvent<HTMLLimelActionBarItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelActionBarItemElementEventMap>(type: K, listener: (this: HTMLLimelActionBarItemElement, ev: LimelActionBarItemCustomEvent<HTMLLimelActionBarItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelActionBarItemElement: {
        prototype: HTMLLimelActionBarItemElement;
        new (): HTMLLimelActionBarItemElement;
    };
    interface HTMLLimelActionBarOverflowMenuElementEventMap {
        "select": ActionBarItem;
    }
    /**
     * @private 
     */
    interface HTMLLimelActionBarOverflowMenuElement extends Components.LimelActionBarOverflowMenu, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelActionBarOverflowMenuElementEventMap>(type: K, listener: (this: HTMLLimelActionBarOverflowMenuElement, ev: LimelActionBarOverflowMenuCustomEvent<HTMLLimelActionBarOverflowMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelActionBarOverflowMenuElementEventMap>(type: K, listener: (this: HTMLLimelActionBarOverflowMenuElement, ev: LimelActionBarOverflowMenuCustomEvent<HTMLLimelActionBarOverflowMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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
     * @exampleComponent limel-example-ai-avatar-white-background
     * @exampleComponent limel-example-ai-avatar-color-props
     */
    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-basic
     * @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-basic
     */
    interface HTMLLimelBannerElement extends Components.LimelBanner, HTMLStencilElement {
    }
    var HTMLLimelBannerElement: {
        prototype: HTMLLimelBannerElement;
        new (): HTMLLimelBannerElement;
    };
    interface HTMLLimelBreadcrumbsElementEventMap {
        "select": BreadcrumbsItem;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelBreadcrumbsElementEventMap>(type: K, listener: (this: HTMLLimelBreadcrumbsElement, ev: LimelBreadcrumbsCustomEvent<HTMLLimelBreadcrumbsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelBreadcrumbsElementEventMap>(type: K, listener: (this: HTMLLimelBreadcrumbsElement, ev: LimelBreadcrumbsCustomEvent<HTMLLimelBreadcrumbsElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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;
    };
    interface HTMLLimelButtonGroupElementEventMap {
        "change": Button;
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-button-group-mix
     * @exampleComponent limel-example-button-group-badges
     * @exampleComponent limel-example-button-group-composite
     */
    interface HTMLLimelButtonGroupElement extends Components.LimelButtonGroup, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelButtonGroupElementEventMap>(type: K, listener: (this: HTMLLimelButtonGroupElement, ev: LimelButtonGroupCustomEvent<HTMLLimelButtonGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelButtonGroupElementEventMap>(type: K, listener: (this: HTMLLimelButtonGroupElement, ev: LimelButtonGroupCustomEvent<HTMLLimelButtonGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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;
    };
    interface HTMLLimelCardElementEventMap {
        "actionSelected": ActionBarItem;
    }
    /**
     * 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-3d-effect
     * @exampleComponent limel-example-card-selected
     * @exampleComponent limel-example-card-orientation
     * @exampleComponent limel-example-card-slot
     * @exampleComponent limel-example-card-styling
     * @exampleComponent limel-example-card-scrollable-shadow
     */
    interface HTMLLimelCardElement extends Components.LimelCard, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelCardElementEventMap>(type: K, listener: (this: HTMLLimelCardElement, ev: LimelCardCustomEvent<HTMLLimelCardElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelCardElementEventMap>(type: K, listener: (this: HTMLLimelCardElement, ev: LimelCardCustomEvent<HTMLLimelCardElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelCardElement: {
        prototype: HTMLLimelCardElement;
        new (): HTMLLimelCardElement;
    };
    interface HTMLLimelChartElementEventMap {
        "interact": ChartItem;
    }
    /**
     * 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-axis-labels
     * @exampleComponent limel-example-chart-styling
     * @exampleComponent limel-example-chart-creative-styling
     * @beta 
     */
    interface HTMLLimelChartElement extends Components.LimelChart, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelChartElementEventMap>(type: K, listener: (this: HTMLLimelChartElement, ev: LimelChartCustomEvent<HTMLLimelChartElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelChartElementEventMap>(type: K, listener: (this: HTMLLimelChartElement, ev: LimelChartCustomEvent<HTMLLimelChartElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelChartElement: {
        prototype: HTMLLimelChartElement;
        new (): HTMLLimelChartElement;
    };
    interface HTMLLimelCheckboxElementEventMap {
        "change": boolean;
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-checkbox-helper-text
     * @exampleComponent limel-example-checkbox-readonly
     */
    interface HTMLLimelCheckboxElement extends Components.LimelCheckbox, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelCheckboxElementEventMap>(type: K, listener: (this: HTMLLimelCheckboxElement, ev: LimelCheckboxCustomEvent<HTMLLimelCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelCheckboxElementEventMap>(type: K, listener: (this: HTMLLimelCheckboxElement, ev: LimelCheckboxCustomEvent<HTMLLimelCheckboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelCheckboxElement: {
        prototype: HTMLLimelCheckboxElement;
        new (): HTMLLimelCheckboxElement;
    };
    interface HTMLLimelChipElementEventMap {
        "remove": number | string;
        "menuItemSelected": MenuItem;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelChipElementEventMap>(type: K, listener: (this: HTMLLimelChipElement, ev: LimelChipCustomEvent<HTMLLimelChipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelChipElementEventMap>(type: K, listener: (this: HTMLLimelChipElement, ev: LimelChipCustomEvent<HTMLLimelChipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelChipElement: {
        prototype: HTMLLimelChipElement;
        new (): HTMLLimelChipElement;
    };
    interface HTMLLimelChipSetElementEventMap {
        "interact": Chip;
        "change": Chip | Chip[];
        "startEdit": void;
        "stopEdit": void;
        "input": string;
    }
    /**
     * :::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-basic
     * @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 {
        addEventListener<K extends keyof HTMLLimelChipSetElementEventMap>(type: K, listener: (this: HTMLLimelChipSetElement, ev: LimelChipSetCustomEvent<HTMLLimelChipSetElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelChipSetElementEventMap>(type: K, listener: (this: HTMLLimelChipSetElement, ev: LimelChipSetCustomEvent<HTMLLimelChipSetElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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-basic
     * @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;
    };
    /**
     * Displays a visual diff between two text values, modeled on
     * GitHub's code difference view.
     * Supports unified and split (side-by-side) views with line numbers,
     * color-coded additions and removals, word-level inline highlighting,
     * and collapsible unchanged context sections.
     * @beta 
     * @exampleComponent limel-example-code-diff-basic
     * @exampleComponent limel-example-code-diff-headings
     * @exampleComponent limel-example-code-diff-json
     * @exampleComponent limel-example-code-diff-split
     * @exampleComponent limel-example-code-diff-line-wrap
     * @exampleComponent limel-example-code-diff-expand
     */
    interface HTMLLimelCodeDiffElement extends Components.LimelCodeDiff, HTMLStencilElement {
    }
    var HTMLLimelCodeDiffElement: {
        prototype: HTMLLimelCodeDiffElement;
        new (): HTMLLimelCodeDiffElement;
    };
    interface HTMLLimelCodeEditorElementEventMap {
        "change": string;
    }
    /**
     * @exampleComponent limel-example-code-editor-basic
     * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
     * @exampleComponent limel-example-code-editor-fold-lint-wrap
     * @exampleComponent limel-example-code-editor-copy
     * @exampleComponent limel-example-code-editor-composite
     */
    interface HTMLLimelCodeEditorElement extends Components.LimelCodeEditor, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelCodeEditorElementEventMap>(type: K, listener: (this: HTMLLimelCodeEditorElement, ev: LimelCodeEditorCustomEvent<HTMLLimelCodeEditorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelCodeEditorElementEventMap>(type: K, listener: (this: HTMLLimelCodeEditorElement, ev: LimelCodeEditorCustomEvent<HTMLLimelCodeEditorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelCodeEditorElement: {
        prototype: HTMLLimelCodeEditorElement;
        new (): HTMLLimelCodeEditorElement;
    };
    interface HTMLLimelCollapsibleSectionElementEventMap {
        "open": void;
        "close": void;
        "action": Action;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelCollapsibleSectionElementEventMap>(type: K, listener: (this: HTMLLimelCollapsibleSectionElement, ev: LimelCollapsibleSectionCustomEvent<HTMLLimelCollapsibleSectionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelCollapsibleSectionElementEventMap>(type: K, listener: (this: HTMLLimelCollapsibleSectionElement, ev: LimelCollapsibleSectionCustomEvent<HTMLLimelCollapsibleSectionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelCollapsibleSectionElement: {
        prototype: HTMLLimelCollapsibleSectionElement;
        new (): HTMLLimelCollapsibleSectionElement;
    };
    interface HTMLLimelColorPickerElementEventMap {
        "change": string;
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-color-picker-custom-palette
     * @exampleComponent limel-example-color-picker-manual-input
     * @exampleComponent limel-example-color-picker-composite
     */
    interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelColorPickerElementEventMap>(type: K, listener: (this: HTMLLimelColorPickerElement, ev: LimelColorPickerCustomEvent<HTMLLimelColorPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelColorPickerElementEventMap>(type: K, listener: (this: HTMLLimelColorPickerElement, ev: LimelColorPickerCustomEvent<HTMLLimelColorPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelColorPickerElement: {
        prototype: HTMLLimelColorPickerElement;
        new (): HTMLLimelColorPickerElement;
    };
    interface HTMLLimelColorPickerPaletteElementEventMap {
        "change": string;
    }
    /**
     * @private 
     */
    interface HTMLLimelColorPickerPaletteElement extends Components.LimelColorPickerPalette, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelColorPickerPaletteElementEventMap>(type: K, listener: (this: HTMLLimelColorPickerPaletteElement, ev: LimelColorPickerPaletteCustomEvent<HTMLLimelColorPickerPaletteElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelColorPickerPaletteElementEventMap>(type: K, listener: (this: HTMLLimelColorPickerPaletteElement, ev: LimelColorPickerPaletteCustomEvent<HTMLLimelColorPickerPaletteElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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;
    };
    interface HTMLLimelDatePickerElementEventMap {
        "change": Date;
    }
    /**
     * @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 {
        addEventListener<K extends keyof HTMLLimelDatePickerElementEventMap>(type: K, listener: (this: HTMLLimelDatePickerElement, ev: LimelDatePickerCustomEvent<HTMLLimelDatePickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelDatePickerElementEventMap>(type: K, listener: (this: HTMLLimelDatePickerElement, ev: LimelDatePickerCustomEvent<HTMLLimelDatePickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelDatePickerElement: {
        prototype: HTMLLimelDatePickerElement;
        new (): HTMLLimelDatePickerElement;
    };
    interface HTMLLimelDialogElementEventMap {
        "close": void;
        "closing": void;
    }
    /**
     * :::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-basic
     * @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 {
        addEventListener<K extends keyof HTMLLimelDialogElementEventMap>(type: K, listener: (this: HTMLLimelDialogElement, ev: LimelDialogCustomEvent<HTMLLimelDialogElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelDialogElementEventMap>(type: K, listener: (this: HTMLLimelDialogElement, ev: LimelDialogCustomEvent<HTMLLimelDialogElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelDialogElement: {
        prototype: HTMLLimelDialogElement;
        new (): HTMLLimelDialogElement;
    };
    interface HTMLLimelDockElementEventMap {
        "itemSelected": DockItem;
        "menuOpen": DockItem;
        "close": void;
        "dockExpanded": 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 HTMLLimelDockElement extends Components.LimelDock, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelDockElementEventMap>(type: K, listener: (this: HTMLLimelDockElement, ev: LimelDockCustomEvent<HTMLLimelDockElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelDockElementEventMap>(type: K, listener: (this: HTMLLimelDockElement, ev: LimelDockCustomEvent<HTMLLimelDockElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelDockElement: {
        prototype: HTMLLimelDockElement;
        new (): HTMLLimelDockElement;
    };
    interface HTMLLimelDockButtonElementEventMap {
        "itemSelected": DockItem;
        "menuOpen": DockItem;
        "close": void;
    }
    /**
     * @private 
     */
    interface HTMLLimelDockButtonElement extends Components.LimelDockButton, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelDockButtonElementEventMap>(type: K, listener: (this: HTMLLimelDockButtonElement, ev: LimelDockButtonCustomEvent<HTMLLimelDockButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelDockButtonElementEventMap>(type: K, listener: (this: HTMLLimelDockButtonElement, ev: LimelDockButtonCustomEvent<HTMLLimelDockButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelDockButtonElement: {
        prototype: HTMLLimelDockButtonElement;
        new (): HTMLLimelDockButtonElement;
    };
    /**
     * This component resembles a drag handle button, but is implemented
     * as a `private` component to allow for easier styling and future extensions.
     * :::important
     * This component has its `shadow` set to `false` in order to
     * integrate well with the drag-and-drop functionality, as well as
     * providing a better accessibility.
     * Keep in mind that its styles might be affected by the consumer
     * component, due to its light dom.
     * :::
     * :::tip
     * It's recommended to place the drag handle on the right side of
     * the item it is meant to reorder, to ensure consistent layout
     * design conventions.
     * :::
     * @exampleComponent limel-example-drag-handle-basic
     * @exampleComponent limel-example-drag-handle-horizontal
     * @private 
     */
    interface HTMLLimelDragHandleElement extends Components.LimelDragHandle, HTMLStencilElement {
    }
    var HTMLLimelDragHandleElement: {
        prototype: HTMLLimelDragHandleElement;
        new (): HTMLLimelDragHandleElement;
    };
    /**
     * 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-basic
     * @exampleComponent limel-example-dynamic-label-readonly-boolean
     */
    interface HTMLLimelDynamicLabelElement extends Components.LimelDynamicLabel, HTMLStencilElement {
    }
    var HTMLLimelDynamicLabelElement: {
        prototype: HTMLLimelDynamicLabelElement;
        new (): HTMLLimelDynamicLabelElement;
    };
    interface HTMLLimelEmailViewerElementEventMap {
        "allowRemoteImagesChange": boolean;
    }
    /**
     * This is a private component, used to render `.eml` files inside
     * `limel-file-viewer`.
     * :::note
     * If `bodyHtml` is provided, it will be rendered using `innerHTML`.
     * Consumers should pre-sanitize `bodyHtml` before passing it to the component.
     * :::
     * @exampleComponent limel-example-email-viewer-plain-text
     * @exampleComponent limel-example-email-viewer-inline-image
     * @exampleComponent limel-example-email-viewer-remote-image-policy
     * @private 
     */
    interface HTMLLimelEmailViewerElement extends Components.LimelEmailViewer, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelEmailViewerElementEventMap>(type: K, listener: (this: HTMLLimelEmailViewerElement, ev: LimelEmailViewerCustomEvent<HTMLLimelEmailViewerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelEmailViewerElementEventMap>(type: K, listener: (this: HTMLLimelEmailViewerElement, ev: LimelEmailViewerCustomEvent<HTMLLimelEmailViewerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelEmailViewerElement: {
        prototype: HTMLLimelEmailViewerElement;
        new (): HTMLLimelEmailViewerElement;
    };
    interface HTMLLimelFileElementEventMap {
        "change": FileInfo;
        "interact": number | string;
    }
    /**
     * 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-basic
     * @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 {
        addEventListener<K extends keyof HTMLLimelFileElementEventMap>(type: K, listener: (this: HTMLLimelFileElement, ev: LimelFileCustomEvent<HTMLLimelFileElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelFileElementEventMap>(type: K, listener: (this: HTMLLimelFileElement, ev: LimelFileCustomEvent<HTMLLimelFileElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelFileElement: {
        prototype: HTMLLimelFileElement;
        new (): HTMLLimelFileElement;
    };
    interface HTMLLimelFileDropzoneElementEventMap {
        "filesSelected": FileInfo[];
        "filesRejected": 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-basic
     * @exampleComponent limel-example-file-dropzone-type-filtering
     * @private 
     */
    interface HTMLLimelFileDropzoneElement extends Components.LimelFileDropzone, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelFileDropzoneElementEventMap>(type: K, listener: (this: HTMLLimelFileDropzoneElement, ev: LimelFileDropzoneCustomEvent<HTMLLimelFileDropzoneElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelFileDropzoneElementEventMap>(type: K, listener: (this: HTMLLimelFileDropzoneElement, ev: LimelFileDropzoneCustomEvent<HTMLLimelFileDropzoneElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelFileDropzoneElement: {
        prototype: HTMLLimelFileDropzoneElement;
        new (): HTMLLimelFileDropzoneElement;
    };
    interface HTMLLimelFileInputElementEventMap {
        "filesSelected": FileInfo[];
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-file-input-type-filtering
     * @private 
     */
    interface HTMLLimelFileInputElement extends Components.LimelFileInput, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelFileInputElementEventMap>(type: K, listener: (this: HTMLLimelFileInputElement, ev: LimelFileInputCustomEvent<HTMLLimelFileInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelFileInputElementEventMap>(type: K, listener: (this: HTMLLimelFileInputElement, ev: LimelFileInputCustomEvent<HTMLLimelFileInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelFileInputElement: {
        prototype: HTMLLimelFileInputElement;
        new (): HTMLLimelFileInputElement;
    };
    interface HTMLLimelFileViewerElementEventMap {
        "action": ListItem;
    }
    /**
     * 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-eml
     * @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 {
        addEventListener<K extends keyof HTMLLimelFileViewerElementEventMap>(type: K, listener: (this: HTMLLimelFileViewerElement, ev: LimelFileViewerCustomEvent<HTMLLimelFileViewerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelFileViewerElementEventMap>(type: K, listener: (this: HTMLLimelFileViewerElement, ev: LimelFileViewerCustomEvent<HTMLLimelFileViewerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelFileViewerElement: {
        prototype: HTMLLimelFileViewerElement;
        new (): HTMLLimelFileViewerElement;
    };
    interface HTMLLimelFlatpickrAdapterElementEventMap {
        "change": Date;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelFlatpickrAdapterElementEventMap>(type: K, listener: (this: HTMLLimelFlatpickrAdapterElement, ev: LimelFlatpickrAdapterCustomEvent<HTMLLimelFlatpickrAdapterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelFlatpickrAdapterElementEventMap>(type: K, listener: (this: HTMLLimelFlatpickrAdapterElement, ev: LimelFlatpickrAdapterCustomEvent<HTMLLimelFlatpickrAdapterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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;
    };
    interface HTMLLimelFormElementEventMap {
        "change": object;
        "validate": ValidationStatus;
    }
    /**
     * @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-array-item-controls
     * @exampleComponent limel-example-form-with-help
     * @exampleComponent limel-example-form-row-layout
     * @exampleComponent limel-example-builtin-field-types-form
     * @exampleComponent limel-example-code-editor-form
     */
    interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelFormElementEventMap>(type: K, listener: (this: HTMLLimelFormElement, ev: LimelFormCustomEvent<HTMLLimelFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelFormElementEventMap>(type: K, listener: (this: HTMLLimelFormElement, ev: LimelFormCustomEvent<HTMLLimelFormElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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-basic
     * @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-basic
     * @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-basic
     * @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;
    };
    /**
     * This is a display-only component used to visualize keyboard shortcuts.
     * It renders hotkey strings as styled `<kbd>` elements with
     * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
     * It does **not** listen for or handle any keyboard events.
     * Keyboard event handling is the responsibility of the parent component
     * (e.g. `limel-menu` or `limel-select`).
     * @exampleComponent limel-example-hotkey-basic
     * @exampleComponent limel-example-hotkey-disabled
     * @private 
     */
    interface HTMLLimelHotkeyElement extends Components.LimelHotkey, HTMLStencilElement {
    }
    var HTMLLimelHotkeyElement: {
        prototype: HTMLLimelHotkeyElement;
        new (): HTMLLimelHotkeyElement;
    };
    /**
     * :::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-helper-label
     * @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-basic
     * @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;
    };
    interface HTMLLimelInputFieldElementEventMap {
        "change": string;
        "action": void;
    }
    /**
     * @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
     * @exampleComponent limel-example-input-field-selection
     */
    interface HTMLLimelInputFieldElement extends Components.LimelInputField, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelInputFieldElementEventMap>(type: K, listener: (this: HTMLLimelInputFieldElement, ev: LimelInputFieldCustomEvent<HTMLLimelInputFieldElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelInputFieldElementEventMap>(type: K, listener: (this: HTMLLimelInputFieldElement, ev: LimelInputFieldCustomEvent<HTMLLimelInputFieldElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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-basic
     * @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;
    };
    interface HTMLLimelListElementEventMap {
        "change": ListItem | ListItem[];
        "select": ListItem | ListItem[];
        "interact": ListItem;
    }
    /**
     * @exampleComponent limel-example-list-basic
     * @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 {
        addEventListener<K extends keyof HTMLLimelListElementEventMap>(type: K, listener: (this: HTMLLimelListElement, ev: LimelListCustomEvent<HTMLLimelListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelListElementEventMap>(type: K, listener: (this: HTMLLimelListElement, ev: LimelListCustomEvent<HTMLLimelListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelListElement: {
        prototype: HTMLLimelListElement;
        new (): HTMLLimelListElement;
    };
    /**
     * This components displays the list item.
     * This centralizes styles and functionality, and helps reduce redundant code
     * in consumer components such as `limel-list` and `limel-menu-list`.
     * :::note
     * The component has `shadow: false`. There are a few reasons for it:
     * 1. This is to improve performance, and ensure that its internal elements are
     * considered as internal parts of the consumer's DOM.
     * 2. The consumer does not need to implement the interactive styles
     * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no
     * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,
     * within the component's own styles.
     * 3. Most importantly, the MDCList checks the light DOM of each list item
     * to find native inputs to decide the list mode (checkbox/radio).
     * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s
     * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given
     * an array index (for the items).
     * With `shadow: false`, the native `<input type="checkbox/radio">` from this template
     * would be visible to MDC.
     * :::
     * @exampleComponent limel-example-list-item-basic
     * @exampleComponent limel-example-list-item-icon
     * @exampleComponent limel-example-list-item-icon-size
     * @exampleComponent limel-example-list-item-pictures
     * @exampleComponent limel-example-list-item-multiple-lines
     * @exampleComponent limel-example-list-item-interactive
     * @exampleComponent limel-example-list-item-radio
     * @exampleComponent limel-example-list-item-checkbox
     * @exampleComponent limel-example-list-item-actions
     * @exampleComponent limel-example-list-item-primary-component
     * @exampleComponent limel-example-list-item-command-text
     * @private 
     */
    interface HTMLLimelListItemElement extends Components.LimelListItem, HTMLStencilElement {
    }
    var HTMLLimelListItemElement: {
        prototype: HTMLLimelListItemElement;
        new (): HTMLLimelListItemElement;
    };
    /**
     * The Markdown component receives markdown syntax
     * and renders it as HTML.
     * A built-in set of lime-elements components is whitelisted by default
     * and can be used directly in markdown content without any configuration.
     * Consumers can extend this list via the `whitelist` prop or `limel-config`.
     * When custom elements use JSON attribute values, any URL-bearing
     * properties (`href`, `src`, `cite`, `longDesc`) are automatically
     * sanitized using the same protocol allowlists as rehype-sanitize.
     * URLs with dangerous schemes (e.g. `javascript:`, `data:`) are
     * removed (with a console warning) to prevent script injection.
     * @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-custom-component
     * @exampleComponent limel-example-markdown-custom-component-with-json-props
     * @exampleComponent limel-example-markdown-remove-empty-paragraphs
     * @exampleComponent limel-example-markdown-composite
     */
    interface HTMLLimelMarkdownElement extends Components.LimelMarkdown, HTMLStencilElement {
    }
    var HTMLLimelMarkdownElement: {
        prototype: HTMLLimelMarkdownElement;
        new (): HTMLLimelMarkdownElement;
    };
    interface HTMLLimelMenuElementEventMap {
        "cancel": void;
        "select": MenuItem;
        "navigateMenu": MenuItem | null;
    }
    /**
     * @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-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-hotkeys
     * @exampleComponent limel-example-menu-searchable-hotkeys
     * @exampleComponent limel-example-menu-composite
     */
    interface HTMLLimelMenuElement extends Components.LimelMenu, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelMenuElementEventMap>(type: K, listener: (this: HTMLLimelMenuElement, ev: LimelMenuCustomEvent<HTMLLimelMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelMenuElementEventMap>(type: K, listener: (this: HTMLLimelMenuElement, ev: LimelMenuCustomEvent<HTMLLimelMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelMenuElement: {
        prototype: HTMLLimelMenuElement;
        new (): HTMLLimelMenuElement;
    };
    /**
     * Meta content for menu list items
     * This sub-component is intended to be passed as `primaryComponent`
     * to `limel-list-item`, when it is used in the menu list.
     * It includes command text, badge, and chevron, which are the
     * features of menu list items.
     * @private 
     */
    interface HTMLLimelMenuItemMetaElement extends Components.LimelMenuItemMeta, HTMLStencilElement {
    }
    var HTMLLimelMenuItemMetaElement: {
        prototype: HTMLLimelMenuItemMetaElement;
        new (): HTMLLimelMenuItemMetaElement;
    };
    interface HTMLLimelMenuListElementEventMap {
        "select": MenuItem;
        "interact": MenuItem;
    }
    /**
     * @private 
     */
    interface HTMLLimelMenuListElement extends Components.LimelMenuList, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelMenuListElementEventMap>(type: K, listener: (this: HTMLLimelMenuListElement, ev: LimelMenuListCustomEvent<HTMLLimelMenuListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelMenuListElementEventMap>(type: K, listener: (this: HTMLLimelMenuListElement, ev: LimelMenuListCustomEvent<HTMLLimelMenuListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelMenuListElement: {
        prototype: HTMLLimelMenuListElement;
        new (): HTMLLimelMenuListElement;
    };
    interface HTMLLimelMenuSurfaceElementEventMap {
        "dismiss": void;
    }
    /**
     * @private 
     */
    interface HTMLLimelMenuSurfaceElement extends Components.LimelMenuSurface, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelMenuSurfaceElementEventMap>(type: K, listener: (this: HTMLLimelMenuSurfaceElement, ev: LimelMenuSurfaceCustomEvent<HTMLLimelMenuSurfaceElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelMenuSurfaceElementEventMap>(type: K, listener: (this: HTMLLimelMenuSurfaceElement, ev: LimelMenuSurfaceCustomEvent<HTMLLimelMenuSurfaceElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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;
    };
    interface HTMLLimelPickerElementEventMap {
        "change": ListItem<PickerValue> | Array<ListItem<PickerValue>>;
        "interact": ListItem<PickerValue>;
        "action": Action;
    }
    /**
     * @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 {
        addEventListener<K extends keyof HTMLLimelPickerElementEventMap>(type: K, listener: (this: HTMLLimelPickerElement, ev: LimelPickerCustomEvent<HTMLLimelPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelPickerElementEventMap>(type: K, listener: (this: HTMLLimelPickerElement, ev: LimelPickerCustomEvent<HTMLLimelPickerElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelPickerElement: {
        prototype: HTMLLimelPickerElement;
        new (): HTMLLimelPickerElement;
    };
    interface HTMLLimelPopoverElementEventMap {
        "close": void;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelPopoverElementEventMap>(type: K, listener: (this: HTMLLimelPopoverElement, ev: LimelPopoverCustomEvent<HTMLLimelPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelPopoverElementEventMap>(type: K, listener: (this: HTMLLimelPopoverElement, ev: LimelPopoverCustomEvent<HTMLLimelPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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;
    };
    interface HTMLLimelProfilePictureElementEventMap {
        "change": FileInfo | undefined;
        "filesRejected": FileInfo[];
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelProfilePictureElementEventMap>(type: K, listener: (this: HTMLLimelProfilePictureElement, ev: LimelProfilePictureCustomEvent<HTMLLimelProfilePictureElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelProfilePictureElementEventMap>(type: K, listener: (this: HTMLLimelProfilePictureElement, ev: LimelProfilePictureCustomEvent<HTMLLimelProfilePictureElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelProfilePictureElement: {
        prototype: HTMLLimelProfilePictureElement;
        new (): HTMLLimelProfilePictureElement;
    };
    interface HTMLLimelProgressFlowElementEventMap {
        "change": FlowItem;
    }
    /**
     * @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 {
        addEventListener<K extends keyof HTMLLimelProgressFlowElementEventMap>(type: K, listener: (this: HTMLLimelProgressFlowElement, ev: LimelProgressFlowCustomEvent<HTMLLimelProgressFlowElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelProgressFlowElementEventMap>(type: K, listener: (this: HTMLLimelProgressFlowElement, ev: LimelProgressFlowCustomEvent<HTMLLimelProgressFlowElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelProgressFlowElement: {
        prototype: HTMLLimelProgressFlowElement;
        new (): HTMLLimelProgressFlowElement;
    };
    interface HTMLLimelProgressFlowItemElementEventMap {
        "interact": void;
    }
    /**
     * @private 
     */
    interface HTMLLimelProgressFlowItemElement extends Components.LimelProgressFlowItem, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelProgressFlowItemElementEventMap>(type: K, listener: (this: HTMLLimelProgressFlowItemElement, ev: LimelProgressFlowItemCustomEvent<HTMLLimelProgressFlowItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelProgressFlowItemElementEventMap>(type: K, listener: (this: HTMLLimelProgressFlowItemElement, ev: LimelProgressFlowItemCustomEvent<HTMLLimelProgressFlowItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelProgressFlowItemElement: {
        prototype: HTMLLimelProgressFlowItemElement;
        new (): HTMLLimelProgressFlowItemElement;
    };
    interface HTMLLimelProsemirrorAdapterElementEventMap {
        "change": string;
        "imagePasted": ImageInserter;
        "imageRemoved": EditorImage;
        "metadataChange": EditorMetadata;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelProsemirrorAdapterElementEventMap>(type: K, listener: (this: HTMLLimelProsemirrorAdapterElement, ev: LimelProsemirrorAdapterCustomEvent<HTMLLimelProsemirrorAdapterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelProsemirrorAdapterElementEventMap>(type: K, listener: (this: HTMLLimelProsemirrorAdapterElement, ev: LimelProsemirrorAdapterCustomEvent<HTMLLimelProsemirrorAdapterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelProsemirrorAdapterElement: {
        prototype: HTMLLimelProsemirrorAdapterElement;
        new (): HTMLLimelProsemirrorAdapterElement;
    };
    /**
     * This is a low-level private component that renders individual radio button elements.
     * It's used internally by the list-item component to render radio buttons when
     * `type="radio"` is specified.
     * ## Usage in the Library
     * This template is primarily used by:
     * - `limel-list` component when `type="radio"`
     * - `limel-radio-button-group` component (which wraps `limel-list`)
     * ## Why This Exists
     * While we have `limel-radio-button-group` for most use cases, this template provides
     * the actual radio button HTML structure with proper MDC classes and accessibility
     * attributes. It ensures consistent styling and behavior across all radio button
     * implementations in the library.
     * ## Design Philosophy
     * This follows the principle that individual radio buttons should not be standalone
     * components, as a single radio button is never useful in a UI. Instead, this template
     * is used to build groups of radio buttons through higher-level components.
     * However, since this is a private component, consumers who need to use a radio button
     * outside of the context of a list or group, can still use the `limel-radio-button`
     * component directly according to in their UI needs.
     * @private 
     */
    interface HTMLLimelRadioButtonElement extends Components.LimelRadioButton, HTMLStencilElement {
    }
    var HTMLLimelRadioButtonElement: {
        prototype: HTMLLimelRadioButtonElement;
        new (): HTMLLimelRadioButtonElement;
    };
    interface HTMLLimelRadioButtonGroupElementEventMap {
        "change": ListItem<string | number | undefined>;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelRadioButtonGroupElementEventMap>(type: K, listener: (this: HTMLLimelRadioButtonGroupElement, ev: LimelRadioButtonGroupCustomEvent<HTMLLimelRadioButtonGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelRadioButtonGroupElementEventMap>(type: K, listener: (this: HTMLLimelRadioButtonGroupElement, ev: LimelRadioButtonGroupCustomEvent<HTMLLimelRadioButtonGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelRadioButtonGroupElement: {
        prototype: HTMLLimelRadioButtonGroupElement;
        new (): HTMLLimelRadioButtonGroupElement;
    };
    interface HTMLLimelSelectElementEventMap {
        "change": Option | Option[];
    }
    /**
     * @exampleComponent limel-example-select-basic
     * @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-multiple-icons
     * @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 {
        addEventListener<K extends keyof HTMLLimelSelectElementEventMap>(type: K, listener: (this: HTMLLimelSelectElement, ev: LimelSelectCustomEvent<HTMLLimelSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelSelectElementEventMap>(type: K, listener: (this: HTMLLimelSelectElement, ev: LimelSelectCustomEvent<HTMLLimelSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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-basic
     * @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;
    };
    interface HTMLLimelSliderElementEventMap {
        "change": number;
    }
    /**
     * @exampleComponent limel-example-slider-basic
     * @exampleComponent limel-example-slider-multiplier
     * @exampleComponent limel-example-slider-multiplier-percentage-colors
     * @exampleComponent limel-example-slider-unit
     * @exampleComponent limel-example-slider-composite
     */
    interface HTMLLimelSliderElement extends Components.LimelSlider, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelSliderElementEventMap>(type: K, listener: (this: HTMLLimelSliderElement, ev: LimelSliderCustomEvent<HTMLLimelSliderElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelSliderElementEventMap>(type: K, listener: (this: HTMLLimelSliderElement, ev: LimelSliderCustomEvent<HTMLLimelSliderElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelSliderElement: {
        prototype: HTMLLimelSliderElement;
        new (): HTMLLimelSliderElement;
    };
    interface HTMLLimelSnackbarElementEventMap {
        "action": void;
        "hide": void;
    }
    /**
     * 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-basic
     * @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 {
        addEventListener<K extends keyof HTMLLimelSnackbarElementEventMap>(type: K, listener: (this: HTMLLimelSnackbarElement, ev: LimelSnackbarCustomEvent<HTMLLimelSnackbarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelSnackbarElementEventMap>(type: K, listener: (this: HTMLLimelSnackbarElement, ev: LimelSnackbarCustomEvent<HTMLLimelSnackbarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelSnackbarElement: {
        prototype: HTMLLimelSnackbarElement;
        new (): HTMLLimelSnackbarElement;
    };
    /**
     * @exampleComponent limel-example-spinner-basic
     * @exampleComponent limel-example-spinner-color
     * @exampleComponent limel-example-spinner-size
     */
    interface HTMLLimelSpinnerElement extends Components.LimelSpinner, HTMLStencilElement {
    }
    var HTMLLimelSpinnerElement: {
        prototype: HTMLLimelSpinnerElement;
        new (): HTMLLimelSpinnerElement;
    };
    interface HTMLLimelSplitButtonElementEventMap {
        "select": MenuItem;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelSplitButtonElementEventMap>(type: K, listener: (this: HTMLLimelSplitButtonElement, ev: LimelSplitButtonCustomEvent<HTMLLimelSplitButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelSplitButtonElementEventMap>(type: K, listener: (this: HTMLLimelSplitButtonElement, ev: LimelSplitButtonCustomEvent<HTMLLimelSplitButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelSplitButtonElement: {
        prototype: HTMLLimelSplitButtonElement;
        new (): HTMLLimelSplitButtonElement;
    };
    interface HTMLLimelSwitchElementEventMap {
        "change": 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-basic
     * @exampleComponent limel-example-switch-helper-text
     * @exampleComponent limel-example-switch-readonly
     */
    interface HTMLLimelSwitchElement extends Components.LimelSwitch, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelSwitchElementEventMap>(type: K, listener: (this: HTMLLimelSwitchElement, ev: LimelSwitchCustomEvent<HTMLLimelSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelSwitchElementEventMap>(type: K, listener: (this: HTMLLimelSwitchElement, ev: LimelSwitchCustomEvent<HTMLLimelSwitchElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelSwitchElement: {
        prototype: HTMLLimelSwitchElement;
        new (): HTMLLimelSwitchElement;
    };
    interface HTMLLimelTabBarElementEventMap {
        "changeTab": Tab;
    }
    /**
     * 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-basic
     * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
     * @exampleComponent limel-example-tab-bar-with-equal-tab-width
     */
    interface HTMLLimelTabBarElement extends Components.LimelTabBar, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelTabBarElementEventMap>(type: K, listener: (this: HTMLLimelTabBarElement, ev: LimelTabBarCustomEvent<HTMLLimelTabBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelTabBarElementEventMap>(type: K, listener: (this: HTMLLimelTabBarElement, ev: LimelTabBarCustomEvent<HTMLLimelTabBarElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelTabBarElement: {
        prototype: HTMLLimelTabBarElement;
        new (): HTMLLimelTabBarElement;
    };
    interface HTMLLimelTabPanelElementEventMap {
        "changeTab": 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-basic
     */
    interface HTMLLimelTabPanelElement extends Components.LimelTabPanel, HTMLStencilElement {
        addEventListener<K extends keyof HTMLLimelTabPanelElementEventMap>(type: K, listener: (this: HTMLLimelTabPanelElement, ev: LimelTabPanelCustomEvent<HTMLLimelTabPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelTabPanelElementEventMap>(type: K, listener: (this: HTMLLimelTabPanelElement, ev: LimelTabPanelCustomEvent<HTMLLimelTabPanelElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelTabPanelElement: {
        prototype: HTMLLimelTabPanelElement;
        new (): HTMLLimelTabPanelElement;
    };
    interface HTMLLimelTableElementEventMap {
        "sort": ColumnSorter[];
        "changePage": number;
        "load": TableParams;
        "activate": object;
        "changeColumns": Column[];
        "select": object[];
        "selectAll": boolean;
    }
    /**
     * @exampleComponent limel-example-table-basic
     * @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-pagination
     * @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 {
        addEventListener<K extends keyof HTMLLimelTableElementEventMap>(type: K, listener: (this: HTMLLimelTableElement, ev: LimelTableCustomEvent<HTMLLimelTableElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelTableElementEventMap>(type: K, listener: (this: HTMLLimelTableElement, ev: LimelTableCustomEvent<HTMLLimelTableElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelTableElement: {
        prototype: HTMLLimelTableElement;
        new (): HTMLLimelTableElement;
    };
    interface HTMLLimelTextEditorElementEventMap {
        "change": string;
        "imagePasted": ImageInserter;
        "imageRemoved": EditorImage;
        "metadataChange": EditorMetadata;
        "triggerStart": TriggerEventDetail;
        "triggerStop": TriggerEventDetail;
        "triggerChange": TriggerEventDetail;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelTextEditorElementEventMap>(type: K, listener: (this: HTMLLimelTextEditorElement, ev: LimelTextEditorCustomEvent<HTMLLimelTextEditorElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelTextEditorElementEventMap>(type: K, listener: (this: HTMLLimelTextEditorElement, ev: LimelTextEditorCustomEvent<HTMLLimelTextEditorElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var HTMLLimelTextEditorElement: {
        prototype: HTMLLimelTextEditorElement;
        new (): HTMLLimelTextEditorElement;
    };
    interface HTMLLimelTextEditorLinkMenuElementEventMap {
        "cancel": void;
        "save": void;
        "linkChange": EditorTextLink;
    }
    /**
     * 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 {
        addEventListener<K extends keyof HTMLLimelTextEditorLinkMenuElementEventMap>(type: K, listener: (this: HTMLLimelTextEditorLinkMenuElement, ev: LimelTextEditorLinkMenuCustomEvent<HTMLLimelTextEditorLinkMenuElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
        removeEventListener<K extends keyof HTMLLimelTextEditorLinkMenuElementEventMap>(type: K, listener: (this: HTMLLimelTextEditorLinkMenuElement, ev: LimelTextEditorLinkMenuCustomEvent<HTMLLimelTextEditorLinkMenuElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
    }
    var 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-diff": HTMLLimelCodeDiffElement;
        "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-drag-handle": HTMLLimelDragHandleElement;
        "limel-dynamic-label": HTMLLimelDynamicLabelElement;
        "limel-email-viewer": HTMLLimelEmailViewerElement;
        "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-hotkey": HTMLLimelHotkeyElement;
        "limel-icon": HTMLLimelIconElement;
        "limel-icon-button": HTMLLimelIconButtonElement;
        "limel-info-tile": HTMLLimelInfoTileElement;
        "limel-input-field": HTMLLimelInputFieldElement;
        "limel-linear-progress": HTMLLimelLinearProgressElement;
        "limel-list": HTMLLimelListElement;
        "limel-list-item": HTMLLimelListItemElement;
        "limel-markdown": HTMLLimelMarkdownElement;
        "limel-menu": HTMLLimelMenuElement;
        "limel-menu-item-meta": HTMLLimelMenuItemMetaElement;
        "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": HTMLLimelRadioButtonElement;
        "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 {
    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };

    /**
     * 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.
          * @default []
         */
        "actions"?: Array<ActionBarItem | ListSeparator>;
        /**
          * When set to `true`, the action bar will be collapsible.
          * @default false
         */
        "collapsible"?: boolean;
        /**
          * Defines the language for translations.
          * @default document.documentElement.lang as Languages
         */
        "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`.
          * @default true
         */
        "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`.
          * @default false
         */
        "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.
          * @default 'bottom-end'
         */
        "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
     * @exampleComponent limel-example-ai-avatar-white-background
     * @exampleComponent limel-example-ai-avatar-color-props
     */
    interface LimelAiAvatar {
        /**
          * Set to `true` to trigger animations that indicate that the AI is "thinking" or processing something.
          * @default false
         */
        "isThinking"?: boolean;
        /**
          * Defines the language for translations.
          * @default document.documentElement.lang as Languages
         */
        "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-basic
     * @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-basic
     */
    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 `,`.
          * @default '›'
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "loading"?: boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
          * @default false
         */
        "loadingFailed"?: boolean;
        /**
          * Set to `true` to make the button outlined.
          * @default false
         */
        "outlined"?: boolean;
        /**
          * Set to `true` to make the button primary.
          * @default false
         */
        "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-basic
     * @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
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Dispatched when a button is selected/deselected
         */
        "onChange"?: (event: LimelButtonGroupCustomEvent<Button>) => void;
        /**
          * List of buttons for the group
          * @default []
         */
        "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.
          * @default 'en'
         */
        "language"?: Languages;
        /**
          * Defines how the component is visualized, for example which heading, color or icon is used in its user interface.
          * @default 'note'
         */
        "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-3d-effect
     * @exampleComponent limel-example-card-selected
     * @exampleComponent limel-example-card-orientation
     * @exampleComponent limel-example-card-slot
     * @exampleComponent limel-example-card-styling
     * @exampleComponent limel-example-card-scrollable-shadow
     */
    interface LimelCard {
        /**
          * Actions to display in the card, to provide the user with options to interact with the content.
          * @default []
         */
        "actions"?: Array<ActionBarItem | ListSeparator1>;
        /**
          * When true, improve the accessibility of the component and hints the user that the card can be interacted width.
          * @default false
         */
        "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.
          * @default 'portrait'
         */
        "orientation"?: 'landscape' | 'portrait';
        /**
          * When `true`, the card displays a visual selected state (highlighted border shadow). Should be used together with `clickable` to let users toggle selection.
          * @default false
         */
        "selected"?: boolean;
        /**
          * When `true`, the card displays a glow effect on hover, following the 3D tilt hover effect.
          * @default true
         */
        "show3dEffect"?: boolean;
        /**
          * 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-axis-labels
     * @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. Defaults to the translation for "items" in the current language.
         */
        "accessibleItemsLabel"?: string;
        /**
          * Helps users of assistive technologies to understand the context of the chart, and what is being displayed.
         */
        "accessibleLabel"?: string;
        /**
          * Helps users of assistive technologies to understand what the values in the chart represent. Defaults to the translation for "value" in the current language.
         */
        "accessibleValuesLabel"?: string;
        /**
          * Specifies the increment for the axis lines.
         */
        "axisIncrement"?: number;
        /**
          * When set to true, renders visible labels for X and Y axes. Only affects chart types with X and Y axes, such as area, bar, and line charts.
          * @default false
         */
        "displayAxisLabels"?: boolean;
        /**
          * Makes the `text` of chart items constantly visible, By default, item texts are displayed in a tooltip, when the item is hovered or focused. Only affects chart types with X and Y axes, such as area, bar, and line charts.
          * @default false
         */
        "displayItemText"?: boolean;
        /**
          * Makes the `value` (or `formattedValue`) of chart items constantly visible, By default, item values are displayed in a tooltip, when the item is hovered or focused. Only affects chart types with X and Y axes, such as area, bar, and line charts.
          * @default false
         */
        "displayItemValue"?: boolean;
        /**
          * 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.
          * @default 'en'
         */
        "language"?: Languages;
        /**
          * Indicates whether the chart is in a loading state.
          * @default false
         */
        "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.
          * @default 'landscape'
         */
        "orientation"?: 'landscape' | 'portrait';
        /**
          * Defines how items are visualized in the chart.
          * @default 'stacked-bar'
         */
        "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-basic
     * @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.
          * @default false
         */
        "checked"?: boolean;
        /**
          * Disables the checkbox when `true`. Works exactly the same as `readonly`. If either property is `true`, the checkbox will be disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Optional helper text to display below the checkbox
         */
        "helperText"?: string;
        /**
          * Enables indeterminate state. Set to `true` to signal indeterminate check.
          * @default false
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
          * @default []
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * Set to `true` to indicate that the checkbox must be checked.
          * @default false
         */
        "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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Icon of the chip.
         */
        "icon"?: string | Icon;
        /**
          * Identifier for the chip. Must be unique.
          * @default crypto.randomUUID()
         */
        "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.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "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!
          * @default false
         */
        "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.
          * @default []
         */
        "menuItems"?: Array<MenuItem | ListSeparator>;
        /**
          * Emitted when a menu item is selected from the actions menu.
         */
        "onMenuItemSelected"?: (event: LimelChipCustomEvent<MenuItem>) => 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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to render a remove button on the chip.
          * @default false
         */
        "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.
          * @default false
         */
        "selected"?: boolean;
        /**
          * Defines the size of the chip.
          * @default 'default'
         */
        "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.
          * @default 'default'
         */
        "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-basic
     * @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).
          * @default 'off'
         */
        "autocomplete"?: string;
        /**
          * Whether the "Clear all" buttons should be shown
          * @default true
         */
        "clearAllButton"?: boolean;
        /**
          * For chip-set of type `input`. Sets delimiters between chips.
          * @default null
         */
        "delimiter"?: string;
        /**
          * True if the chip set should be disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Whether the input field should be emptied when the chip-set loses focus.
          * @default true
         */
        "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.
          * @default 'text'
         */
        "inputType"?: 'search' | 'text';
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
          * @default false
         */
        "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.
          * @default 'en'
         */
        "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
          * @default null
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * True if the control requires a value
          * @default false
         */
        "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
          * @default []
         */
        "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-basic
     * @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%.
          * @default false
         */
        "displayPercentageColors"?: boolean;
        /**
          * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
          * @default PERCENT
         */
        "maxValue"?: number;
        /**
          * The prefix which is displayed before the `value`, must be a few characters characters long.
          * @default null
         */
        "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 `%`
          * @default '%'
         */
        "suffix"?: string;
        /**
          * The value of the progress bar.
          * @default 0
         */
        "value"?: number;
    }
    /**
     * Displays a visual diff between two text values, modeled on
     * GitHub's code difference view.
     * Supports unified and split (side-by-side) views with line numbers,
     * color-coded additions and removals, word-level inline highlighting,
     * and collapsible unchanged context sections.
     * @beta 
     * @exampleComponent limel-example-code-diff-basic
     * @exampleComponent limel-example-code-diff-headings
     * @exampleComponent limel-example-code-diff-json
     * @exampleComponent limel-example-code-diff-split
     * @exampleComponent limel-example-code-diff-line-wrap
     * @exampleComponent limel-example-code-diff-expand
     */
    interface LimelCodeDiff {
        /**
          * Number of unchanged context lines to display around each change.
          * @default 3
         */
        "contextLines"?: number;
        /**
          * Language for syntax highlighting. Currently supports `"json"`. When set, code tokens are colorized (strings, numbers, keys, etc.) alongside the diff highlighting.
         */
        "language"?: string;
        /**
          * The layout of the diff view. - `unified` — single column with interleaved additions and removals - `split` — side-by-side comparison with old on left, new on right
          * @default 'unified'
         */
        "layout"?: 'unified' | 'split';
        /**
          * When `true`, long lines are wrapped instead of causing horizontal scrolling. Useful when comparing prose or config files with long values.
          * @default true
         */
        "lineWrapping"?: boolean;
        /**
          * Heading for the modified (after) version, displayed in the diff header. Defaults to `"Modified"`, localized via `translationLanguage`.
         */
        "newHeading"?: string;
        /**
          * The "after" value to compare. Can be a string or an object (which will be serialized to JSON).
          * @default ''
         */
        "newValue"?: string | object;
        /**
          * Heading for the original (before) version, displayed in the diff header. Defaults to `"Original"`, localized via `translationLanguage`.
         */
        "oldHeading"?: string;
        /**
          * The "before" value to compare. Can be a string or an object (which will be serialized to JSON).
          * @default ''
         */
        "oldValue"?: string | object;
        /**
          * When `true`, JSON values are parsed, keys are sorted, and indentation is normalized before diffing. This eliminates noise from formatting or key-order differences.
          * @default false
         */
        "reformatJson"?: boolean;
        /**
          * Defines the language for translations. Will translate all visible labels and announcements.
          * @default 'en'
         */
        "translationLanguage"?: Languages;
    }
    /**
     * @exampleComponent limel-example-code-editor-basic
     * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
     * @exampleComponent limel-example-code-editor-fold-lint-wrap
     * @exampleComponent limel-example-code-editor-copy
     * @exampleComponent limel-example-code-editor-composite
     */
    interface LimelCodeEditor {
        /**
          * Select color scheme for the editor
          * @default 'auto'
         */
        "colorScheme"?: ColorScheme;
        /**
          * Set to `true` to disable the editor. Use `disabled` to indicate that the editor can normally be interacted with, but is currently disabled. This tells the user that if certain requirements are met, the editor may become enabled again.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Allows the user to fold code
          * @default false
         */
        "fold"?: 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 editor is invalid.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * The input label.
         */
        "label"?: string;
        /**
          * The language of the code
         */
        "language"?: Language;
        /**
          * Displays line numbers in the editor
          * @default false
         */
        "lineNumbers"?: boolean;
        /**
          * Wraps long lines instead of showing horizontal scrollbar
          * @default false
         */
        "lineWrapping"?: boolean;
        /**
          * Enables linting of JSON content
          * @default false
         */
        "lint"?: boolean;
        /**
          * Emitted when the code has changed. Will only be emitted when the code area has lost focus
         */
        "onChange"?: (event: LimelCodeEditorCustomEvent<string>) => void;
        /**
          * Set to `true` to make the editor read-only. Use `readonly` when the editor is only there to present the data it holds, and will not become possible for the current user to edit.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "required"?: boolean;
        /**
          * Set to false to hide the copy button
          * @default true
         */
        "showCopyButton"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "translationLanguage"?: Languages;
        /**
          * The code to be rendered
          * @default ''
         */
        "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.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * `true` if the section is expanded, `false` if collapsed.
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "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-basic
     * @exampleComponent limel-example-color-picker-custom-palette
     * @exampleComponent limel-example-color-picker-manual-input
     * @exampleComponent limel-example-color-picker-composite
     */
    interface LimelColorPicker {
        /**
          * 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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Helper text of the input field
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * The label of the input field
         */
        "label"?: string;
        /**
          * Set to `false` to disallow custom color values to be typed into the input field. Setting this to `false` does not completely disable the color picker. It will only allow users to pick from the provided color palette.
          * @default true
         */
        "manualInput"?: boolean;
        /**
          * Emits chosen value to the parent component
         */
        "onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
        /**
          * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
         */
        "palette"?: Array<string | CustomColorSwatch>;
        /**
          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
         */
        "paletteColumnCount"?: number;
        /**
          * 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.
          * @default false
         */
        "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 {
        /**
          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
         */
        "columnCount"?: number;
        /**
          * Helper text of the input field
         */
        "helperText"?: string;
        /**
          * Set to `true` to indicate that the current value of the input field is invalid.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * Label of the input field
         */
        "label"?: string;
        /**
          * Set to `false` to disallow custom color values to be typed into the input field.
          * @default true
         */
        "manualInput"?: boolean;
        /**
          * Emits chosen value to the parent component
         */
        "onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
        /**
          * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
         */
        "palette"?: CustomPalette;
        /**
          * The placeholder text shown inside the input field, when the field is focused and empty.
         */
        "placeholder"?: 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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default 'en'
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "required"?: boolean;
        /**
          * Type of date picker.
          * @default 'datetime'
         */
        "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-basic
     * @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.
          * @default {         escapeKey: true,         scrimClick: true,     }
         */
        "closingActions"?: ClosingActions;
        /**
          * Set to `true` to make the dialog "fullscreen".
          * @default false
         */
        "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.
          * @default false
         */
        "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`.
          * @default true
         */
        "allowResize"?: boolean;
        /**
          * Items that are placed at the bottom of the dock. (Or at the end in mobile layout.)
          * @default []
         */
        "dockFooterItems"?: DockItem[];
        /**
          * Items that are placed in the dock.
          * @default []
         */
        "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…
          * @default false
         */
        "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.
          * @default DEFAULT_MOBILE_BREAKPOINT
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "useMobileLayout"?: boolean;
    }
    /**
     * This component resembles a drag handle button, but is implemented
     * as a `private` component to allow for easier styling and future extensions.
     * :::important
     * This component has its `shadow` set to `false` in order to
     * integrate well with the drag-and-drop functionality, as well as
     * providing a better accessibility.
     * Keep in mind that its styles might be affected by the consumer
     * component, due to its light dom.
     * :::
     * :::tip
     * It's recommended to place the drag handle on the right side of
     * the item it is meant to reorder, to ensure consistent layout
     * design conventions.
     * :::
     * @exampleComponent limel-example-drag-handle-basic
     * @exampleComponent limel-example-drag-handle-horizontal
     * @private 
     */
    interface LimelDragHandle {
        /**
          * The direction in which the drag handle can be used to reorder items.
          * @default 'vertical'
         */
        "dragDirection"?: 'vertical' | 'horizontal';
        /**
          * Language to use for translations.
          * @default 'en'
         */
        "language"?: Languages;
        /**
          * The preferred direction for the tooltip to open. Defaults to 'left', as our recommended placement for a drag handle in the UI is on the far right side of draggable elements.
          * @default 'left'
         */
        "tooltipOpenDirection"?: OpenDirection;
    }
    /**
     * 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-basic
     * @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.
          * @default {}
         */
        "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.
          * @default []
         */
        "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 is a private component, used to render `.eml` files inside
     * `limel-file-viewer`.
     * :::note
     * If `bodyHtml` is provided, it will be rendered using `innerHTML`.
     * Consumers should pre-sanitize `bodyHtml` before passing it to the component.
     * :::
     * @exampleComponent limel-example-email-viewer-plain-text
     * @exampleComponent limel-example-email-viewer-inline-image
     * @exampleComponent limel-example-email-viewer-remote-image-policy
     * @private 
     */
    interface LimelEmailViewer {
        /**
          * Controls whether remote images (http/https) are loaded.  If omitted, the component treats this as a per-email setting. Consumers that want to remember the choice (per session/global) can provide this prop and listen for `allowRemoteImagesChange`.
         */
        "allowRemoteImages"?: boolean;
        /**
          * The email message to display.  If `email.bodyHtml` is set directly, consumers must provide sanitized HTML.
         */
        "email"?: Email;
        /**
          * Optional URL to render as a final fallback using an `<object type="text/plain">`.
         */
        "fallbackUrl"?: string;
        /**
          * Defines the localization for translations.
          * @default 'en'
         */
        "language"?: Languages;
    }
    /**
     * 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-basic
     * @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)
          * @default '*'
         */
        "accept"?: string;
        /**
          * True if the input should be disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to indicate that the current value of the chosen file is invalid.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * The input label.
         */
        "label"?: string;
        /**
          * Defines the localisation for translations.
          * @default 'en'
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "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-basic
     * @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.
          * @default '*'
         */
        "accept"?: string;
        /**
          * Set to `true` to disable the file dropzone.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Is displayed to provide supplementary information to the end users, for instance, which filetypes or file sizes are accepted.
          * @default ''
         */
        "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-basic
     * @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.
          * @default '*'
         */
        "accept"?: string;
        /**
          * Set to `true` to disable file input selection.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to enable selection of multiple files
          * @default false
         */
        "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-eml
     * @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!
          * @default false
         */
        "allowDownload"?: boolean;
        /**
          * Displays a button that allows the user to view the file in fullscreen mode. Not displayed for office files!
          * @default false
         */
        "allowFullscreen"?: boolean;
        /**
          * Displays a button that allows the user to open the file in a new browser tab. Not displayed for office files!
          * @default false
         */
        "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.
          * @default 'en'
         */
        "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.
          * @default 'microsoft-office'
         */
        "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.
          * @default 'en'
         */
        "language"?: Languages;
        /**
          * Emitted when the date picker value is changed.
         */
        "onChange"?: (event: LimelFlatpickrAdapterCustomEvent<Date>) => void;
        /**
          * Type of date picker.
          * @default 'datetime'
         */
        "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
          * @default 'center'
         */
        "align"?: FlexContainerAlign;
        /**
          * Direction of the main axis
          * @default 'horizontal'
         */
        "direction"?: FlexContainerDirection;
        /**
          * Specify how items are aligned along the main axis
          * @default 'space-between'
         */
        "justify"?: FlexContainerJustify;
        /**
          * Reverse the order of the items
          * @default false
         */
        "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-array-item-controls
     * @exampleComponent limel-example-form-with-help
     * @exampleComponent limel-example-form-row-layout
     * @exampleComponent limel-example-builtin-field-types-form
     * @exampleComponent limel-example-code-editor-form
     */
    interface LimelForm {
        /**
          * Set to `true` to disable the whole form.
          * @default false
         */
        "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
          * @default {}
         */
        "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-basic
     * @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 `,`.
          * @default '·'
         */
        "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-basic
     * @exampleComponent limel-example-read-more
     * @exampleComponent limel-example-open-direction
     * @exampleComponent limel-example-placement
     */
    interface LimelHelp {
        /**
          * {@inheritdoc Help.openDirection}
          * @default 'top-start'
         */
        "openDirection"?: OpenDirection;
        /**
          * {@inheritdoc Help.readMoreLink}
         */
        "readMoreLink"?: Link;
        /**
          * {@inheritdoc Help.trigger}
          * @default '?'
         */
        "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-basic
     * @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.
          * @default false
         */
        "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;
    }
    /**
     * This is a display-only component used to visualize keyboard shortcuts.
     * It renders hotkey strings as styled `<kbd>` elements with
     * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
     * It does **not** listen for or handle any keyboard events.
     * Keyboard event handling is the responsibility of the parent component
     * (e.g. `limel-menu` or `limel-select`).
     * @exampleComponent limel-example-hotkey-basic
     * @exampleComponent limel-example-hotkey-disabled
     * @private 
     */
    interface LimelHotkey {
        /**
          * When `true`, the hotkey is rendered in a visually disabled state.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The hotkey string to visualize, e.g. `"meta+c"` or `"shift+enter"`.
         */
        "value"?: string;
    }
    /**
     * :::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-helper-label
     * @exampleComponent limel-example-icon-button-composite
     */
    interface LimelIconButton {
        /**
          * Set to `true` to disable the button.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to give the button our standard "elevated" look, lifting it off the flat layout.
          * @default false
         */
        "elevated"?: boolean;
        /**
          * Additional helper text for the tooltip. Example usage can be a keyboard shortcut to activate the function of the button.
         */
        "helperLabel"?: string;
        /**
          * The icon to display.
         */
        "icon"?: string | Icon;
        /**
          * The text to show to screenreaders and other assistive tech. It is also displayed as a tooltip when the user hovers or focuses the button.
         */
        "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-basic
     * @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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the info tile.
         */
        "icon"?: string;
        /**
          * The text to show below the info tile. Long labels will be truncated.
          * @default null
         */
        "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.
          * @default false
         */
        "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
     * @exampleComponent limel-example-input-field-selection
     */
    interface LimelInputField {
        /**
          * list of suggestions `value` can autocomplete to.
          * @default []
         */
        "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.
          * @default false
         */
        "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.
          * @default true
         */
        "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.
          * @default false
         */
        "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.
          * @default globalConfig.defaultLocale
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the field is required.
          * @default false
         */
        "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.
          * @default false
         */
        "showLink"?: boolean;
        /**
          * Defines which numeric values are valid and the increment/decrement interval. For example, `step={0.1}` allows decimals and steps by 0.1. Set to `'any'` to allow any numeric value. Only applies when `type` is `number`.
          * @default 'any'
         */
        "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.
          * @default 'text'
         */
        "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-basic
     * @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
          * @default false
         */
        "indeterminate"?: boolean;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "language"?: Languages;
        /**
          * The value of the progress bar. Should be between `0` and `1`.
          * @default 0
         */
        "value"?: number;
    }
    /**
     * @exampleComponent limel-example-list-basic
     * @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
          * @default 'small'
         */
        "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.
          * @default 3
         */
        "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;
    }
    /**
     * This components displays the list item.
     * This centralizes styles and functionality, and helps reduce redundant code
     * in consumer components such as `limel-list` and `limel-menu-list`.
     * :::note
     * The component has `shadow: false`. There are a few reasons for it:
     * 1. This is to improve performance, and ensure that its internal elements are
     * considered as internal parts of the consumer's DOM.
     * 2. The consumer does not need to implement the interactive styles
     * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no
     * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,
     * within the component's own styles.
     * 3. Most importantly, the MDCList checks the light DOM of each list item
     * to find native inputs to decide the list mode (checkbox/radio).
     * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s
     * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given
     * an array index (for the items).
     * With `shadow: false`, the native `<input type="checkbox/radio">` from this template
     * would be visible to MDC.
     * :::
     * @exampleComponent limel-example-list-item-basic
     * @exampleComponent limel-example-list-item-icon
     * @exampleComponent limel-example-list-item-icon-size
     * @exampleComponent limel-example-list-item-pictures
     * @exampleComponent limel-example-list-item-multiple-lines
     * @exampleComponent limel-example-list-item-interactive
     * @exampleComponent limel-example-list-item-radio
     * @exampleComponent limel-example-list-item-checkbox
     * @exampleComponent limel-example-list-item-actions
     * @exampleComponent limel-example-list-item-primary-component
     * @exampleComponent limel-example-list-item-command-text
     * @private 
     */
    interface LimelListItem {
        /**
          * {@inheritdoc ListItem.selected}
         */
        "actions"?: ListItem['actions'];
        /**
          * Set to `true` if the list should display larger icons with a background
          * @default false
         */
        "badgeIcon"?: boolean;
        /**
          * {@inheritdoc ListItem.disabled}
          * @default false
         */
        "disabled"?: boolean;
        /**
          * {@inheritdoc ListItem.icon}
         */
        "icon"?: string | ListItem['icon'];
        /**
          * Size of the icon displayed for this item.
          * @default 'small'
         */
        "iconSize"?: IconSize;
        /**
          * {@inheritdoc ListItem.image}
         */
        "image"?: ListItem['image'];
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "language"?: Languages;
        /**
          * {@inheritdoc ListItem.selected}
         */
        "primaryComponent"?: ListItem['primaryComponent'];
        /**
          * {@inheritdoc ListItem.secondaryText}
         */
        "secondaryText"?: string;
        /**
          * {@inheritdoc ListItem.selected}
          * @default false
         */
        "selected"?: boolean;
        /**
          * {@inheritdoc ListItem.text}
         */
        "text"?: string;
        /**
          * The semantic role of the list item. This affects the ARIA role and the interaction behavior.  - 'option' → selectable via click/Enter/Space, aria-selected - 'radio'/'checkbox' → selectable, aria-checked - 'menuitem'/'listitem' → activation only, no selection toggle
          * @default 'listitem'
         */
        "type"?: 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox';
        /**
          * {@inheritdoc ListItem.value}
         */
        "value"?: any;
    }
    /**
     * The Markdown component receives markdown syntax
     * and renders it as HTML.
     * A built-in set of lime-elements components is whitelisted by default
     * and can be used directly in markdown content without any configuration.
     * Consumers can extend this list via the `whitelist` prop or `limel-config`.
     * When custom elements use JSON attribute values, any URL-bearing
     * properties (`href`, `src`, `cite`, `longDesc`) are automatically
     * sanitized using the same protocol allowlists as rehype-sanitize.
     * URLs with dangerous schemes (e.g. `javascript:`, `data:`) are
     * removed (with a console warning) to prevent script injection.
     * @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-custom-component
     * @exampleComponent limel-example-markdown-custom-component-with-json-props
     * @exampleComponent limel-example-markdown-remove-empty-paragraphs
     * @exampleComponent limel-example-markdown-composite
     */
    interface LimelMarkdown {
        /**
          * Enable lazy loading for images
          * @default false
         */
        "lazyLoadImages"?: boolean;
        /**
          * Set to `false` to preserve empty paragraphs before rendering. Empty paragraphs are paragraphs that do not contain any meaningful content (text, images, etc.), or only contain whitespace (`<br />` or `&nbsp;`).
          * @default true
         */
        "removeEmptyParagraphs"?: 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.
          * @default ''
         */
        "value"?: string;
        /**
          * Additional whitelisted custom elements to render inside markdown.  A built-in set of lime-elements components (such as `limel-chip`, `limel-icon`, `limel-badge`, `limel-callout`, etc.) is always allowed by default. Any entries provided here are **merged** with those defaults — if both define the same `tagName`, their attributes are combined.  Can also be set via `limel-config`. Setting this property will override the global config.  JSON attribute values that contain URL-bearing properties (`href`, `src`, `cite`, `longDesc`) are automatically sanitized using the same protocol allowlists as rehype-sanitize. URLs with dangerous schemes (e.g. `javascript:`, `data:`) are removed (with a console warning).
          * @alpha 
          * @default globalConfig.markdownWhitelist
         */
        "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-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-hotkeys
     * @exampleComponent limel-example-menu-searchable-hotkeys
     * @exampleComponent limel-example-menu-composite
     */
    interface LimelMenu {
        /**
          * Defines whether the menu should show badges.
          * @default false
         */
        "badgeIcons"?: boolean;
        /**
          * Sets the disabled state of the menu.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Message to display when search returns 0 results.
         */
        "emptyResultMessage"?: string;
        /**
          * Renders list items in a grid layout, rather than a vertical list
          * @default false
         */
        "gridLayout"?: boolean;
        /**
          * A list of items and separators to show in the menu.
          * @default []
         */
        "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.
          * @default false
         */
        "open"?: boolean;
        /**
          * Decides the menu's location in relation to its trigger
          * @default 'bottom-start'
         */
        "openDirection"?: OpenDirection;
        /**
          * A root breadcrumb item to show above the menu items. Clicking it navigates back from a sub-menu to the root menu.
          * @default DEFAULT_ROOT_BREADCRUMBS_ITEM
         */
        "rootItem"?: BreadcrumbsItem;
        /**
          * Placeholder text for the search input field.
         */
        "searchPlaceholder"?: 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 `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
          * @default 'inherit-from-items'
         */
        "surfaceWidth"?: SurfaceWidth;
    }
    /**
     * Meta content for menu list items
     * This sub-component is intended to be passed as `primaryComponent`
     * to `limel-list-item`, when it is used in the menu list.
     * It includes command text, badge, and chevron, which are the
     * features of menu list items.
     * @private 
     */
    interface LimelMenuItemMeta {
        /**
          * Optional badge value
         */
        "badge"?: string | number;
        /**
          * Use to display optional keyboard shortcut or command hint, e.g. `⌘ + K`
         */
        "commandText"?: string;
        /**
          * Will be set to `true` when the menu item is disabled.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Hotkey to display. When provided, `commandText` is ignored.
         */
        "hotkey"?: string;
        /**
          * Shows a submenu chevron to indicate nested items
          * @default false
         */
        "showChevron"?: boolean;
    }
    /**
     * @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
          * @default 'small'
         */
        "iconSize"?: IconSize;
        /**
          * List of items to display
         */
        "items"?: Array<MenuItem | ListSeparator>;
        /**
          * 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
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "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'`.
          * @default '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.
          * @default 'sticky'
         */
        "actionScrollBehavior"?: ActionScrollBehavior;
        /**
          * Static actions that can be clicked by the user.
          * @default []
         */
        "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.
          * @default []
         */
        "allItems"?: Array<ListItem<PickerValue>>;
        /**
          * Whether badge icons should be used in the result list or not
          * @default false
         */
        "badgeIcons"?: boolean;
        /**
          * Sets delimiters between chips. Works only when `multiple` is `true`.
          * @default null
         */
        "delimiter"?: string;
        /**
          * True if the picker should be disabled
          * @default false
         */
        "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.
          * @default false
         */
        "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
          * @default false
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * True if the control requires a value
          * @default false
         */
        "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
          * @default false
         */
        "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.
          * @default null
         */
        "anchor"?: HTMLElement;
        /**
          * A unique ID.
         */
        "containerId"?: string;
        /**
          * Dynamic styling that can be applied to the container holding the content.
          * @default {}
         */
        "containerStyle"?: object;
        /**
          * Used to make a dropdown have the same width as the trigger, for example in `limel-picker`.
          * @default false
         */
        "inheritParentWidth"?: boolean;
        /**
          * Decides which direction the portal content should open.
          * @default 'bottom'
         */
        "openDirection"?: OpenDirection;
        /**
          * Position of the content.
          * @default 'absolute'
         */
        "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.
          * @default false
         */
        "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.
          * @default 'image/jpeg,image/png,image/heic,.jpg,.jpeg,.png,.heic'
         */
        "accept"?: string;
        /**
          * Disables user interaction. Prevents uploading new pictures or removing existing ones.
          * @default false
         */
        "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.
          * @default 'user'
         */
        "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.
          * @default 'cover'
         */
        "imageFit"?: 'cover' | 'contain';
        /**
          * Marks the control as invalid.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * Accessible label for the the browse button.
         */
        "label"?: string;
        /**
          * Defines the language for translations. Will translate the translatable strings on the components.
          * @default 'en'
         */
        "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!
          * @default false
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Marks the control as required.
          * @default false
         */
        "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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * What flow items to render
          * @default []
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
    }
    /**
     * @private 
     */
    interface LimelProgressFlowItem {
        /**
          * True for current step
          * @default false
         */
        "currentStep"?: boolean;
        /**
          * True if the flow item should be disabled
          * @default false
         */
        "disabled"?: boolean;
        /**
          * The flow item that should be rendered
          * @default null
         */
        "item"?: FlowItem;
        /**
          * Fired when clicking on the flow item
         */
        "onInteract"?: (event: LimelProgressFlowItemCustomEvent<void>) => void;
        /**
          * True if the flow item should be readonly
          * @default false
         */
        "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
          * @default 'markdown'
         */
        "contentType"?: 'markdown' | 'html';
        /**
          * set to private to avoid usage while under development
          * @private 
          * @alpha 
          * @default []
         */
        "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.
          * @default false
         */
        "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 
          * @default []
         */
        "triggerCharacters"?: TriggerCharacter[];
        /**
          * Specifies the visual appearance of the editor.
          * @default 'standard'
         */
        "ui"?: EditorUiType;
        /**
          * The value of the editor, expected to be markdown
         */
        "value"?: string;
    }
    /**
     * This is a low-level private component that renders individual radio button elements.
     * It's used internally by the list-item component to render radio buttons when
     * `type="radio"` is specified.
     * ## Usage in the Library
     * This template is primarily used by:
     * - `limel-list` component when `type="radio"`
     * - `limel-radio-button-group` component (which wraps `limel-list`)
     * ## Why This Exists
     * While we have `limel-radio-button-group` for most use cases, this template provides
     * the actual radio button HTML structure with proper MDC classes and accessibility
     * attributes. It ensures consistent styling and behavior across all radio button
     * implementations in the library.
     * ## Design Philosophy
     * This follows the principle that individual radio buttons should not be standalone
     * components, as a single radio button is never useful in a UI. Instead, this template
     * is used to build groups of radio buttons through higher-level components.
     * However, since this is a private component, consumers who need to use a radio button
     * outside of the context of a list or group, can still use the `limel-radio-button`
     * component directly according to in their UI needs.
     * @private 
     */
    interface LimelRadioButton {
        /**
          * Indicates whether the radio button is checked.
         */
        "checked"?: boolean;
        /**
          * Disables the radio button when set to `true`.
         */
        "disabled"?: boolean;
        /**
          * Associates the internal input with an external label.
         */
        "id": string;
        /**
          * Visual label shown next to the radio button.
         */
        "label"?: string;
        /**
          * Change handler forwarded to the underlying input element.
         */
        "onChange"?: (event: Event) => void;
    }
    /**
     * 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`
          * @default false
         */
        "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.
          * @default 3
         */
        "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-basic
     * @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-multiple-icons
     * @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.
          * @default false
         */
        "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.
          * @default false
         */
        "multiple"?: boolean;
        /**
          * Emitted when the value is changed.
         */
        "onChange"?: (event: LimelSelectCustomEvent<Option | Option[]>) => void;
        /**
          * List of options.
          * @default []
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * True if the control requires a value.
          * @default false
         */
        "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-basic
     * @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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Name of icon for the shortcut.
         */
        "icon"?: string;
        /**
          * The text to show below the shortcut. Long label will be truncated.
          * @default null
         */
        "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-unit
     * @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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Set to `true` to display percentage-based colors on the slider. The colors change in intervals of 10% as the value changes, creating a color spectrum from red (low) → orange → yellow → green → teal (high).
          * @default false
         */
        "displaysPercentageColors"?: 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.
          * @default DEFAULT_FACTOR
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * Set to `true` to indicate that the slider is required.
          * @default false
         */
        "required"?: boolean;
        /**
          * The stepping interval to use when adjusting the value
         */
        "step"?: number;
        /**
          * Unit to display next to the value
          * @default ''
         */
        "unit"?: string;
        /**
          * The value of the input
         */
        "value"?: number;
        /**
          * The maximum value allowed
          * @default DEFAULT_MAX_VALUE
         */
        "valuemax"?: number;
        /**
          * The minimum value allowed
          * @default DEFAULT_MIN_VALUE
         */
        "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-basic
     * @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.
          * @default true
         */
        "dismissible"?: boolean;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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.
          * @default false
         */
        "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.
          * @default 5000
         */
        "timeout"?: number;
    }
    /**
     * @exampleComponent limel-example-spinner-basic
     * @exampleComponent limel-example-spinner-color
     * @exampleComponent limel-example-spinner-size
     */
    interface LimelSpinner {
        /**
          * Gives the spinner the shape of Lime Technologies' logo
          * @default false
         */
        "limeBranded"?: boolean;
        /**
          * Determines the size of the spinner.
          * @default 'mini'
         */
        "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.
          * @default false
         */
        "disabled"?: boolean;
        /**
          * Set icon for the button
         */
        "icon"?: string;
        /**
          * A list of items and separators to show in the menu.
          * @default []
         */
        "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.
          * @default false
         */
        "loading"?: boolean;
        /**
          * Set to `true` to indicate failure instead of success when the button is no longer in the `loading` state.
          * @default false
         */
        "loadingFailed"?: boolean;
        /**
          * Is emitted when a menu item is selected.
         */
        "onSelect"?: (event: LimelSplitButtonCustomEvent<MenuItem>) => void;
        /**
          * Set to `true` to make the button primary.
          * @default false
         */
        "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-basic
     * @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.
          * @default false
         */
        "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.
          * @default false
         */
        "readonly"?: boolean;
        /**
          * The labels to use to clarify what kind of data is being visualized, when the component is `readonly`.
          * @default []
         */
        "readonlyLabels"?: Array<Label<boolean>>;
        /**
          * The value of the switch
          * @default false
         */
        "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-basic
     * @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
          * @default []
         */
        "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-basic
     */
    interface LimelTabPanel {
        /**
          * Emitted when a tab has been changed
         */
        "onChangeTab"?: (event: LimelTabPanelCustomEvent<Tab>) => void;
        /**
          * The tabs to display in the panel
          * @default []
         */
        "tabs"?: Tab[];
    }
    /**
     * @exampleComponent limel-example-table-basic
     * @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-pagination
     * @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
          * @default []
         */
        "columns"?: Column[];
        /**
          * Data to be displayed in the table. Provide a stable `id` on each row to keep scroll position, focus, and selections intact across updates.
          * @default []
         */
        "data"?: object[];
        /**
          * A message to display when the table has no data
         */
        "emptyMessage"?: string;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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
          * @default false
         */
        "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
          * @default 'local'
         */
        "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
          * @default FIRST_PAGE
         */
        "page"?: number;
        /**
          * Number of rows per page
         */
        "pageSize"?: number;
        /**
          * Location of the pagination controls. - `top`: Display pagination controls at the top of the table - `bottom`: Display pagination controls at the bottom of the table (default)
          * @default 'bottom'
         */
        "paginationLocation"?: 'top' | 'bottom';
        /**
          * Enables row selection
         */
        "selectable"?: boolean;
        /**
          * Selected data. Requires `selectable` to be true.
         */
        "selection"?: object[];
        /**
          * Set to `false` to disable column sorting through header interactions. Programmatic sorting through the `sorting` prop and `sort` event remains available.
          * @default true
         */
        "sortableColumns"?: boolean;
        /**
          * The initial sorted columns
          * @default []
         */
        "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.
          * @default true
         */
        "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
          * @default 'markdown'
         */
        "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 
          * @default []
         */
        "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.
          * @default false
         */
        "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.
          * @default false
         */
        "invalid"?: boolean;
        /**
          * The label of the editor
         */
        "label"?: string;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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. :::
          * @default false
         */
        "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. :::
          * @default false
         */
        "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 
          * @default []
         */
        "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.
          * @default 'standard'
         */
        "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
          * @default false
         */
        "isOpen"?: boolean;
        /**
          * Defines the language for translations.
          * @default 'en'
         */
        "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.
          * @default DEFAULT_MAX_LENGTH
         */
        "maxlength"?: number;
        /**
          * Decides the tooltip's location in relation to its trigger.
          * @default 'top'
         */
        "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 LimelActionBarAttributes {
        "language": Languages;
        "accessibleLabel": string;
        "layout": 'fullWidth' | 'floating';
        "collapsible": boolean;
        "openDirection": OpenDirection;
    }
    interface LimelActionBarItemAttributes {
        "isVisible": boolean;
        "selected": boolean;
    }
    interface LimelActionBarOverflowMenuAttributes {
        "openDirection": OpenDirection;
    }
    interface LimelAiAvatarAttributes {
        "isThinking": boolean;
        "language": Languages;
    }
    interface LimelBadgeAttributes {
        "label": string;
    }
    interface LimelBannerAttributes {
        "message": string;
        "icon": string;
    }
    interface LimelBreadcrumbsAttributes {
        "divider": string;
    }
    interface LimelButtonAttributes {
        "label": string;
        "primary": boolean;
        "outlined": boolean;
        "icon": string | Icon;
        "disabled": boolean;
        "loading": boolean;
        "loadingFailed": boolean;
    }
    interface LimelButtonGroupAttributes {
        "disabled": boolean;
    }
    interface LimelCalloutAttributes {
        "heading": string;
        "icon": string;
        "type": CalloutType;
        "language": Languages;
    }
    interface LimelCardAttributes {
        "heading": string;
        "subheading": string;
        "icon": string | Icon;
        "value": string;
        "clickable": boolean;
        "orientation": 'landscape' | 'portrait';
        "selected": boolean;
        "show3dEffect": boolean;
    }
    interface LimelChartAttributes {
        "language": Languages;
        "accessibleLabel": string;
        "accessibleItemsLabel": string;
        "accessibleValuesLabel": string;
        "displayAxisLabels": boolean;
        "displayItemText": boolean;
        "displayItemValue": boolean;
        "type": | 'area'
        | 'bar'
        | 'doughnut'
        | 'line'
        | 'nps'
        | 'pie'
        | 'ring'
        | 'dot'
        | 'stacked-bar';
        "orientation": 'landscape' | 'portrait';
        "maxValue": number;
        "axisIncrement": number;
        "loading": boolean;
    }
    interface LimelCheckboxAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "label": string;
        "helperText": string;
        "checked": boolean;
        "indeterminate": boolean;
        "required": boolean;
    }
    interface LimelChipAttributes {
        "language": Languages;
        "text": string;
        "icon": string | Icon;
        "badge": string;
        "disabled": boolean;
        "readonly": boolean;
        "selected": boolean;
        "invalid": boolean;
        "removable": boolean;
        "type": ChipType;
        "loading": boolean;
        "progress": number;
        "identifier": string;
        "size": 'small' | 'default';
    }
    interface LimelChipSetAttributes {
        "type": 'choice' | 'filter' | 'input';
        "label": string;
        "helperText": string;
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "inputType": 'search' | 'text';
        "maxItems": number;
        "required": boolean;
        "searchLabel": string;
        "emptyInputOnBlur": boolean;
        "clearAllButton": boolean;
        "leadingIcon": string;
        "delimiter": string;
        "autocomplete": string;
        "language": Languages;
    }
    interface LimelCircularProgressAttributes {
        "value": number;
        "maxValue": number;
        "prefix": string;
        "suffix": string;
        "displayPercentageColors": boolean;
        "size": CircularProgressSize;
    }
    interface LimelCodeDiffAttributes {
        "oldValue": string | object;
        "newValue": string | object;
        "oldHeading": string;
        "newHeading": string;
        "layout": 'unified' | 'split';
        "contextLines": number;
        "lineWrapping": boolean;
        "language": string;
        "reformatJson": boolean;
        "translationLanguage": Languages;
    }
    interface LimelCodeEditorAttributes {
        "value": string;
        "language": Language;
        "readonly": boolean;
        "disabled": boolean;
        "invalid": boolean;
        "required": boolean;
        "label": string;
        "helperText": string;
        "lineNumbers": boolean;
        "lineWrapping": boolean;
        "fold": boolean;
        "lint": boolean;
        "colorScheme": ColorScheme;
        "translationLanguage": Languages;
        "showCopyButton": boolean;
    }
    interface LimelCollapsibleSectionAttributes {
        "isOpen": boolean;
        "header": string;
        "icon": string | Icon;
        "invalid": boolean;
        "language": Languages;
    }
    interface LimelColorPickerAttributes {
        "value": string;
        "label": string;
        "helperText": string;
        "tooltipLabel": string;
        "required": boolean;
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "placeholder": string;
        "manualInput": boolean;
        "paletteColumnCount": number;
    }
    interface LimelColorPickerPaletteAttributes {
        "value": string;
        "label": string;
        "helperText": string;
        "placeholder": string;
        "required": boolean;
        "invalid": boolean;
        "manualInput": boolean;
        "columnCount": number;
    }
    interface LimelDatePickerAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "label": string;
        "placeholder": string;
        "helperText": string;
        "required": boolean;
        "type": DateType;
        "format": string;
        "language": Languages;
    }
    interface LimelDialogAttributes {
        "heading": string | DialogHeading;
        "fullscreen": boolean;
        "open": boolean;
    }
    interface LimelDockAttributes {
        "accessibleLabel": string;
        "expanded": boolean;
        "allowResize": boolean;
        "mobileBreakPoint": number;
    }
    interface LimelDockButtonAttributes {
        "expanded": boolean;
        "useMobileLayout": boolean;
    }
    interface LimelDragHandleAttributes {
        "dragDirection": 'vertical' | 'horizontal';
        "tooltipOpenDirection": OpenDirection;
        "language": Languages;
    }
    interface LimelDynamicLabelAttributes {
        "value": string;
    }
    interface LimelEmailViewerAttributes {
        "fallbackUrl": string;
        "language": Languages;
        "allowRemoteImages": boolean;
    }
    interface LimelFileAttributes {
        "label": string;
        "required": boolean;
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "accept": string;
        "language": Languages;
    }
    interface LimelFileDropzoneAttributes {
        "accept": string;
        "disabled": boolean;
        "text": string;
        "helperText": string;
    }
    interface LimelFileInputAttributes {
        "accept": string;
        "disabled": boolean;
        "multiple": boolean;
    }
    interface LimelFileViewerAttributes {
        "url": string;
        "filename": string;
        "alt": string;
        "allowFullscreen": boolean;
        "allowOpenInNewTab": boolean;
        "allowDownload": boolean;
        "language": Languages;
        "officeViewer": OfficeViewer;
    }
    interface LimelFlatpickrAdapterAttributes {
        "type": DateType;
        "format": string;
        "isOpen": boolean;
        "language": Languages;
    }
    interface LimelFlexContainerAttributes {
        "direction": FlexContainerDirection;
        "justify": FlexContainerJustify;
        "align": FlexContainerAlign;
        "reverse": boolean;
    }
    interface LimelFormAttributes {
        "disabled": boolean;
    }
    interface LimelHeaderAttributes {
        "icon": string | Icon;
        "heading": string;
        "subheading": string;
        "supportingText": string;
        "subheadingDivider": string;
    }
    interface LimelHelpAttributes {
        "value": string;
        "trigger": string;
        "openDirection": OpenDirection;
    }
    interface LimelHelpContentAttributes {
        "value": string;
    }
    interface LimelHelperLineAttributes {
        "helperText": string;
        "length": number;
        "maxLength": number;
        "invalid": boolean;
        "helperTextId": string;
    }
    interface LimelHotkeyAttributes {
        "value": string;
        "disabled": boolean;
    }
    interface LimelIconAttributes {
        "size": IconSize;
        "name": string;
        "badge": boolean;
    }
    interface LimelIconButtonAttributes {
        "icon": string | Icon;
        "elevated": boolean;
        "label": string;
        "helperLabel": string;
        "disabled": boolean;
    }
    interface LimelInfoTileAttributes {
        "value": string;
        "icon": string;
        "label": string;
        "prefix": string;
        "suffix": string;
        "disabled": boolean;
        "badge": string;
        "loading": boolean;
    }
    interface LimelInputFieldAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "label": string;
        "placeholder": string;
        "helperText": string;
        "prefix": string;
        "suffix": string;
        "required": boolean;
        "value": string;
        "trailingIcon": string;
        "leadingIcon": string;
        "pattern": string;
        "type": InputType;
        "formatNumber": boolean;
        "step": string;
        "max": number;
        "min": number;
        "maxlength": number;
        "minlength": number;
        "showLink": boolean;
        "locale": string;
    }
    interface LimelLinearProgressAttributes {
        "language": Languages;
        "value": number;
        "indeterminate": boolean;
        "accessibleLabel": string;
    }
    interface LimelListAttributes {
        "badgeIcons": boolean;
        "iconSize": IconSize;
        "type": ListType;
        "maxLinesSecondaryText": number;
    }
    interface LimelListItemAttributes {
        "language": Languages;
        "value": string;
        "text": string;
        "secondaryText": string;
        "disabled": boolean;
        "icon": string | ListItem['icon'];
        "iconSize": IconSize;
        "badgeIcon": boolean;
        "selected": boolean;
        "type": 'listitem' | 'menuitem' | 'option' | 'radio' | 'checkbox';
    }
    interface LimelMarkdownAttributes {
        "value": string;
        "lazyLoadImages": boolean;
        "removeEmptyParagraphs": boolean;
    }
    interface LimelMenuAttributes {
        "disabled": boolean;
        "openDirection": OpenDirection;
        "surfaceWidth": SurfaceWidth;
        "open": boolean;
        "badgeIcons": boolean;
        "gridLayout": boolean;
        "searchPlaceholder": string;
        "emptyResultMessage": string;
    }
    interface LimelMenuItemMetaAttributes {
        "commandText": string;
        "hotkey": string;
        "disabled": boolean;
        "badge": string;
        "showChevron": boolean;
    }
    interface LimelMenuListAttributes {
        "badgeIcons": boolean;
        "iconSize": IconSize;
    }
    interface LimelMenuSurfaceAttributes {
        "open": boolean;
    }
    interface LimelNotchedOutlineAttributes {
        "required": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "disabled": boolean;
        "label": string;
        "labelId": string;
        "hasValue": boolean;
        "hasLeadingIcon": boolean;
        "hasFloatingLabel": boolean;
    }
    interface LimelPickerAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "label": string;
        "searchLabel": string;
        "helperText": string;
        "leadingIcon": string;
        "emptyResultMessage": string;
        "required": boolean;
        "invalid": boolean;
        "multiple": boolean;
        "delimiter": string;
        "actionPosition": ActionPosition;
        "actionScrollBehavior": ActionScrollBehavior;
        "badgeIcons": boolean;
    }
    interface LimelPopoverAttributes {
        "open": boolean;
        "openDirection": OpenDirection;
    }
    interface LimelPortalAttributes {
        "openDirection": OpenDirection;
        "position": 'fixed' | 'absolute';
        "containerId": string;
        "inheritParentWidth": boolean;
        "visible": boolean;
    }
    interface LimelProfilePictureAttributes {
        "language": Languages;
        "label": string;
        "icon": string | Icon;
        "helperText": string;
        "disabled": boolean;
        "readonly": boolean;
        "required": boolean;
        "invalid": boolean;
        "loading": boolean;
        "value": string | FileInfo;
        "imageFit": 'cover' | 'contain';
        "accept": string;
    }
    interface LimelProgressFlowAttributes {
        "disabled": boolean;
        "readonly": boolean;
    }
    interface LimelProgressFlowItemAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "currentStep": boolean;
    }
    interface LimelProsemirrorAdapterAttributes {
        "contentType": 'markdown' | 'html';
        "value": string;
        "language": Languages;
        "disabled": boolean;
        "ui": EditorUiType;
    }
    interface LimelRadioButtonAttributes {
        "checked": boolean;
        "disabled": boolean;
        "id": string;
        "label": string;
    }
    interface LimelRadioButtonGroupAttributes {
        "disabled": boolean;
        "badgeIcons": boolean;
        "maxLinesSecondaryText": number;
    }
    interface LimelSelectAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "required": boolean;
        "label": string;
        "helperText": string;
        "multiple": boolean;
    }
    interface LimelShortcutAttributes {
        "icon": string;
        "label": string;
        "disabled": boolean;
        "badge": string;
    }
    interface LimelSliderAttributes {
        "disabled": boolean;
        "readonly": boolean;
        "factor": number;
        "label": string;
        "helperText": string;
        "required": boolean;
        "invalid": boolean;
        "displaysPercentageColors": boolean;
        "unit": string;
        "value": number;
        "valuemax": number;
        "valuemin": number;
        "step": number;
    }
    interface LimelSnackbarAttributes {
        "open": boolean;
        "message": string;
        "timeout": number;
        "actionText": string;
        "dismissible": boolean;
        "multiline": boolean;
        "language": Languages;
    }
    interface LimelSpinnerAttributes {
        "size": SpinnerSize;
        "limeBranded": boolean;
    }
    interface LimelSplitButtonAttributes {
        "label": string;
        "primary": boolean;
        "icon": string;
        "disabled": boolean;
        "loading": boolean;
        "loadingFailed": boolean;
    }
    interface LimelSwitchAttributes {
        "label": string;
        "disabled": boolean;
        "readonly": boolean;
        "invalid": boolean;
        "value": boolean;
        "helperText": string;
    }
    interface LimelTableAttributes {
        "mode": 'local' | 'remote';
        "layout": Layout;
        "pageSize": number;
        "totalRows": number;
        "movableColumns": boolean;
        "sortableColumns": boolean;
        "loading": boolean;
        "page": number;
        "emptyMessage": string;
        "selectable": boolean;
        "language": Languages;
        "paginationLocation": 'top' | 'bottom';
    }
    interface LimelTextEditorAttributes {
        "contentType": 'markdown' | 'html';
        "language": Languages;
        "disabled": boolean;
        "readonly": boolean;
        "helperText": string;
        "placeholder": string;
        "label": string;
        "invalid": boolean;
        "value": string;
        "required": boolean;
        "allowResize": boolean;
        "ui": EditorUiType;
    }
    interface LimelTextEditorLinkMenuAttributes {
        "language": Languages;
        "isOpen": boolean;
    }
    interface LimelTooltipAttributes {
        "elementId": string;
        "label": string;
        "helperLabel": string;
        "maxlength": number;
        "openDirection": OpenDirection;
    }
    interface LimelTooltipContentAttributes {
        "label": string;
        "helperLabel": string;
        "maxlength": number;
    }

    interface IntrinsicElements {
        "limel-3d-hover-effect-glow": Limel3dHoverEffectGlow;
        "limel-action-bar": Omit<LimelActionBar, keyof LimelActionBarAttributes> & { [K in keyof LimelActionBar & keyof LimelActionBarAttributes]?: LimelActionBar[K] } & { [K in keyof LimelActionBar & keyof LimelActionBarAttributes as `attr:${K}`]?: LimelActionBarAttributes[K] } & { [K in keyof LimelActionBar & keyof LimelActionBarAttributes as `prop:${K}`]?: LimelActionBar[K] };
        "limel-action-bar-item": Omit<LimelActionBarItem, keyof LimelActionBarItemAttributes> & { [K in keyof LimelActionBarItem & keyof LimelActionBarItemAttributes]?: LimelActionBarItem[K] } & { [K in keyof LimelActionBarItem & keyof LimelActionBarItemAttributes as `attr:${K}`]?: LimelActionBarItemAttributes[K] } & { [K in keyof LimelActionBarItem & keyof LimelActionBarItemAttributes as `prop:${K}`]?: LimelActionBarItem[K] };
        "limel-action-bar-overflow-menu": Omit<LimelActionBarOverflowMenu, keyof LimelActionBarOverflowMenuAttributes> & { [K in keyof LimelActionBarOverflowMenu & keyof LimelActionBarOverflowMenuAttributes]?: LimelActionBarOverflowMenu[K] } & { [K in keyof LimelActionBarOverflowMenu & keyof LimelActionBarOverflowMenuAttributes as `attr:${K}`]?: LimelActionBarOverflowMenuAttributes[K] } & { [K in keyof LimelActionBarOverflowMenu & keyof LimelActionBarOverflowMenuAttributes as `prop:${K}`]?: LimelActionBarOverflowMenu[K] };
        "limel-ai-avatar": Omit<LimelAiAvatar, keyof LimelAiAvatarAttributes> & { [K in keyof LimelAiAvatar & keyof LimelAiAvatarAttributes]?: LimelAiAvatar[K] } & { [K in keyof LimelAiAvatar & keyof LimelAiAvatarAttributes as `attr:${K}`]?: LimelAiAvatarAttributes[K] } & { [K in keyof LimelAiAvatar & keyof LimelAiAvatarAttributes as `prop:${K}`]?: LimelAiAvatar[K] };
        "limel-badge": Omit<LimelBadge, keyof LimelBadgeAttributes> & { [K in keyof LimelBadge & keyof LimelBadgeAttributes]?: LimelBadge[K] } & { [K in keyof LimelBadge & keyof LimelBadgeAttributes as `attr:${K}`]?: LimelBadgeAttributes[K] } & { [K in keyof LimelBadge & keyof LimelBadgeAttributes as `prop:${K}`]?: LimelBadge[K] };
        "limel-banner": Omit<LimelBanner, keyof LimelBannerAttributes> & { [K in keyof LimelBanner & keyof LimelBannerAttributes]?: LimelBanner[K] } & { [K in keyof LimelBanner & keyof LimelBannerAttributes as `attr:${K}`]?: LimelBannerAttributes[K] } & { [K in keyof LimelBanner & keyof LimelBannerAttributes as `prop:${K}`]?: LimelBanner[K] };
        "limel-breadcrumbs": Omit<LimelBreadcrumbs, keyof LimelBreadcrumbsAttributes> & { [K in keyof LimelBreadcrumbs & keyof LimelBreadcrumbsAttributes]?: LimelBreadcrumbs[K] } & { [K in keyof LimelBreadcrumbs & keyof LimelBreadcrumbsAttributes as `attr:${K}`]?: LimelBreadcrumbsAttributes[K] } & { [K in keyof LimelBreadcrumbs & keyof LimelBreadcrumbsAttributes as `prop:${K}`]?: LimelBreadcrumbs[K] };
        "limel-button": Omit<LimelButton, keyof LimelButtonAttributes> & { [K in keyof LimelButton & keyof LimelButtonAttributes]?: LimelButton[K] } & { [K in keyof LimelButton & keyof LimelButtonAttributes as `attr:${K}`]?: LimelButtonAttributes[K] } & { [K in keyof LimelButton & keyof LimelButtonAttributes as `prop:${K}`]?: LimelButton[K] };
        "limel-button-group": Omit<LimelButtonGroup, keyof LimelButtonGroupAttributes> & { [K in keyof LimelButtonGroup & keyof LimelButtonGroupAttributes]?: LimelButtonGroup[K] } & { [K in keyof LimelButtonGroup & keyof LimelButtonGroupAttributes as `attr:${K}`]?: LimelButtonGroupAttributes[K] } & { [K in keyof LimelButtonGroup & keyof LimelButtonGroupAttributes as `prop:${K}`]?: LimelButtonGroup[K] };
        "limel-callout": Omit<LimelCallout, keyof LimelCalloutAttributes> & { [K in keyof LimelCallout & keyof LimelCalloutAttributes]?: LimelCallout[K] } & { [K in keyof LimelCallout & keyof LimelCalloutAttributes as `attr:${K}`]?: LimelCalloutAttributes[K] } & { [K in keyof LimelCallout & keyof LimelCalloutAttributes as `prop:${K}`]?: LimelCallout[K] };
        "limel-card": Omit<LimelCard, keyof LimelCardAttributes> & { [K in keyof LimelCard & keyof LimelCardAttributes]?: LimelCard[K] } & { [K in keyof LimelCard & keyof LimelCardAttributes as `attr:${K}`]?: LimelCardAttributes[K] } & { [K in keyof LimelCard & keyof LimelCardAttributes as `prop:${K}`]?: LimelCard[K] };
        "limel-chart": Omit<LimelChart, keyof LimelChartAttributes> & { [K in keyof LimelChart & keyof LimelChartAttributes]?: LimelChart[K] } & { [K in keyof LimelChart & keyof LimelChartAttributes as `attr:${K}`]?: LimelChartAttributes[K] } & { [K in keyof LimelChart & keyof LimelChartAttributes as `prop:${K}`]?: LimelChart[K] };
        "limel-checkbox": Omit<LimelCheckbox, keyof LimelCheckboxAttributes> & { [K in keyof LimelCheckbox & keyof LimelCheckboxAttributes]?: LimelCheckbox[K] } & { [K in keyof LimelCheckbox & keyof LimelCheckboxAttributes as `attr:${K}`]?: LimelCheckboxAttributes[K] } & { [K in keyof LimelCheckbox & keyof LimelCheckboxAttributes as `prop:${K}`]?: LimelCheckbox[K] };
        "limel-chip": Omit<LimelChip, keyof LimelChipAttributes> & { [K in keyof LimelChip & keyof LimelChipAttributes]?: LimelChip[K] } & { [K in keyof LimelChip & keyof LimelChipAttributes as `attr:${K}`]?: LimelChipAttributes[K] } & { [K in keyof LimelChip & keyof LimelChipAttributes as `prop:${K}`]?: LimelChip[K] };
        "limel-chip-set": Omit<LimelChipSet, keyof LimelChipSetAttributes> & { [K in keyof LimelChipSet & keyof LimelChipSetAttributes]?: LimelChipSet[K] } & { [K in keyof LimelChipSet & keyof LimelChipSetAttributes as `attr:${K}`]?: LimelChipSetAttributes[K] } & { [K in keyof LimelChipSet & keyof LimelChipSetAttributes as `prop:${K}`]?: LimelChipSet[K] };
        "limel-circular-progress": Omit<LimelCircularProgress, keyof LimelCircularProgressAttributes> & { [K in keyof LimelCircularProgress & keyof LimelCircularProgressAttributes]?: LimelCircularProgress[K] } & { [K in keyof LimelCircularProgress & keyof LimelCircularProgressAttributes as `attr:${K}`]?: LimelCircularProgressAttributes[K] } & { [K in keyof LimelCircularProgress & keyof LimelCircularProgressAttributes as `prop:${K}`]?: LimelCircularProgress[K] };
        "limel-code-diff": Omit<LimelCodeDiff, keyof LimelCodeDiffAttributes> & { [K in keyof LimelCodeDiff & keyof LimelCodeDiffAttributes]?: LimelCodeDiff[K] } & { [K in keyof LimelCodeDiff & keyof LimelCodeDiffAttributes as `attr:${K}`]?: LimelCodeDiffAttributes[K] } & { [K in keyof LimelCodeDiff & keyof LimelCodeDiffAttributes as `prop:${K}`]?: LimelCodeDiff[K] };
        "limel-code-editor": Omit<LimelCodeEditor, keyof LimelCodeEditorAttributes> & { [K in keyof LimelCodeEditor & keyof LimelCodeEditorAttributes]?: LimelCodeEditor[K] } & { [K in keyof LimelCodeEditor & keyof LimelCodeEditorAttributes as `attr:${K}`]?: LimelCodeEditorAttributes[K] } & { [K in keyof LimelCodeEditor & keyof LimelCodeEditorAttributes as `prop:${K}`]?: LimelCodeEditor[K] };
        "limel-collapsible-section": Omit<LimelCollapsibleSection, keyof LimelCollapsibleSectionAttributes> & { [K in keyof LimelCollapsibleSection & keyof LimelCollapsibleSectionAttributes]?: LimelCollapsibleSection[K] } & { [K in keyof LimelCollapsibleSection & keyof LimelCollapsibleSectionAttributes as `attr:${K}`]?: LimelCollapsibleSectionAttributes[K] } & { [K in keyof LimelCollapsibleSection & keyof LimelCollapsibleSectionAttributes as `prop:${K}`]?: LimelCollapsibleSection[K] };
        "limel-color-picker": Omit<LimelColorPicker, keyof LimelColorPickerAttributes> & { [K in keyof LimelColorPicker & keyof LimelColorPickerAttributes]?: LimelColorPicker[K] } & { [K in keyof LimelColorPicker & keyof LimelColorPickerAttributes as `attr:${K}`]?: LimelColorPickerAttributes[K] } & { [K in keyof LimelColorPicker & keyof LimelColorPickerAttributes as `prop:${K}`]?: LimelColorPicker[K] };
        "limel-color-picker-palette": Omit<LimelColorPickerPalette, keyof LimelColorPickerPaletteAttributes> & { [K in keyof LimelColorPickerPalette & keyof LimelColorPickerPaletteAttributes]?: LimelColorPickerPalette[K] } & { [K in keyof LimelColorPickerPalette & keyof LimelColorPickerPaletteAttributes as `attr:${K}`]?: LimelColorPickerPaletteAttributes[K] } & { [K in keyof LimelColorPickerPalette & keyof LimelColorPickerPaletteAttributes as `prop:${K}`]?: LimelColorPickerPalette[K] };
        "limel-config": LimelConfig;
        "limel-date-picker": Omit<LimelDatePicker, keyof LimelDatePickerAttributes> & { [K in keyof LimelDatePicker & keyof LimelDatePickerAttributes]?: LimelDatePicker[K] } & { [K in keyof LimelDatePicker & keyof LimelDatePickerAttributes as `attr:${K}`]?: LimelDatePickerAttributes[K] } & { [K in keyof LimelDatePicker & keyof LimelDatePickerAttributes as `prop:${K}`]?: LimelDatePicker[K] };
        "limel-dialog": Omit<LimelDialog, keyof LimelDialogAttributes> & { [K in keyof LimelDialog & keyof LimelDialogAttributes]?: LimelDialog[K] } & { [K in keyof LimelDialog & keyof LimelDialogAttributes as `attr:${K}`]?: LimelDialogAttributes[K] } & { [K in keyof LimelDialog & keyof LimelDialogAttributes as `prop:${K}`]?: LimelDialog[K] };
        "limel-dock": Omit<LimelDock, keyof LimelDockAttributes> & { [K in keyof LimelDock & keyof LimelDockAttributes]?: LimelDock[K] } & { [K in keyof LimelDock & keyof LimelDockAttributes as `attr:${K}`]?: LimelDockAttributes[K] } & { [K in keyof LimelDock & keyof LimelDockAttributes as `prop:${K}`]?: LimelDock[K] };
        "limel-dock-button": Omit<LimelDockButton, keyof LimelDockButtonAttributes> & { [K in keyof LimelDockButton & keyof LimelDockButtonAttributes]?: LimelDockButton[K] } & { [K in keyof LimelDockButton & keyof LimelDockButtonAttributes as `attr:${K}`]?: LimelDockButtonAttributes[K] } & { [K in keyof LimelDockButton & keyof LimelDockButtonAttributes as `prop:${K}`]?: LimelDockButton[K] };
        "limel-drag-handle": Omit<LimelDragHandle, keyof LimelDragHandleAttributes> & { [K in keyof LimelDragHandle & keyof LimelDragHandleAttributes]?: LimelDragHandle[K] } & { [K in keyof LimelDragHandle & keyof LimelDragHandleAttributes as `attr:${K}`]?: LimelDragHandleAttributes[K] } & { [K in keyof LimelDragHandle & keyof LimelDragHandleAttributes as `prop:${K}`]?: LimelDragHandle[K] };
        "limel-dynamic-label": Omit<LimelDynamicLabel, keyof LimelDynamicLabelAttributes> & { [K in keyof LimelDynamicLabel & keyof LimelDynamicLabelAttributes]?: LimelDynamicLabel[K] } & { [K in keyof LimelDynamicLabel & keyof LimelDynamicLabelAttributes as `attr:${K}`]?: LimelDynamicLabelAttributes[K] } & { [K in keyof LimelDynamicLabel & keyof LimelDynamicLabelAttributes as `prop:${K}`]?: LimelDynamicLabel[K] };
        "limel-email-viewer": Omit<LimelEmailViewer, keyof LimelEmailViewerAttributes> & { [K in keyof LimelEmailViewer & keyof LimelEmailViewerAttributes]?: LimelEmailViewer[K] } & { [K in keyof LimelEmailViewer & keyof LimelEmailViewerAttributes as `attr:${K}`]?: LimelEmailViewerAttributes[K] } & { [K in keyof LimelEmailViewer & keyof LimelEmailViewerAttributes as `prop:${K}`]?: LimelEmailViewer[K] };
        "limel-file": Omit<LimelFile, keyof LimelFileAttributes> & { [K in keyof LimelFile & keyof LimelFileAttributes]?: LimelFile[K] } & { [K in keyof LimelFile & keyof LimelFileAttributes as `attr:${K}`]?: LimelFileAttributes[K] } & { [K in keyof LimelFile & keyof LimelFileAttributes as `prop:${K}`]?: LimelFile[K] };
        "limel-file-dropzone": Omit<LimelFileDropzone, keyof LimelFileDropzoneAttributes> & { [K in keyof LimelFileDropzone & keyof LimelFileDropzoneAttributes]?: LimelFileDropzone[K] } & { [K in keyof LimelFileDropzone & keyof LimelFileDropzoneAttributes as `attr:${K}`]?: LimelFileDropzoneAttributes[K] } & { [K in keyof LimelFileDropzone & keyof LimelFileDropzoneAttributes as `prop:${K}`]?: LimelFileDropzone[K] };
        "limel-file-input": Omit<LimelFileInput, keyof LimelFileInputAttributes> & { [K in keyof LimelFileInput & keyof LimelFileInputAttributes]?: LimelFileInput[K] } & { [K in keyof LimelFileInput & keyof LimelFileInputAttributes as `attr:${K}`]?: LimelFileInputAttributes[K] } & { [K in keyof LimelFileInput & keyof LimelFileInputAttributes as `prop:${K}`]?: LimelFileInput[K] };
        "limel-file-viewer": Omit<LimelFileViewer, keyof LimelFileViewerAttributes> & { [K in keyof LimelFileViewer & keyof LimelFileViewerAttributes]?: LimelFileViewer[K] } & { [K in keyof LimelFileViewer & keyof LimelFileViewerAttributes as `attr:${K}`]?: LimelFileViewerAttributes[K] } & { [K in keyof LimelFileViewer & keyof LimelFileViewerAttributes as `prop:${K}`]?: LimelFileViewer[K] };
        "limel-flatpickr-adapter": Omit<LimelFlatpickrAdapter, keyof LimelFlatpickrAdapterAttributes> & { [K in keyof LimelFlatpickrAdapter & keyof LimelFlatpickrAdapterAttributes]?: LimelFlatpickrAdapter[K] } & { [K in keyof LimelFlatpickrAdapter & keyof LimelFlatpickrAdapterAttributes as `attr:${K}`]?: LimelFlatpickrAdapterAttributes[K] } & { [K in keyof LimelFlatpickrAdapter & keyof LimelFlatpickrAdapterAttributes as `prop:${K}`]?: LimelFlatpickrAdapter[K] };
        "limel-flex-container": Omit<LimelFlexContainer, keyof LimelFlexContainerAttributes> & { [K in keyof LimelFlexContainer & keyof LimelFlexContainerAttributes]?: LimelFlexContainer[K] } & { [K in keyof LimelFlexContainer & keyof LimelFlexContainerAttributes as `attr:${K}`]?: LimelFlexContainerAttributes[K] } & { [K in keyof LimelFlexContainer & keyof LimelFlexContainerAttributes as `prop:${K}`]?: LimelFlexContainer[K] };
        "limel-form": Omit<LimelForm, keyof LimelFormAttributes> & { [K in keyof LimelForm & keyof LimelFormAttributes]?: LimelForm[K] } & { [K in keyof LimelForm & keyof LimelFormAttributes as `attr:${K}`]?: LimelFormAttributes[K] } & { [K in keyof LimelForm & keyof LimelFormAttributes as `prop:${K}`]?: LimelForm[K] };
        "limel-grid": LimelGrid;
        "limel-header": Omit<LimelHeader, keyof LimelHeaderAttributes> & { [K in keyof LimelHeader & keyof LimelHeaderAttributes]?: LimelHeader[K] } & { [K in keyof LimelHeader & keyof LimelHeaderAttributes as `attr:${K}`]?: LimelHeaderAttributes[K] } & { [K in keyof LimelHeader & keyof LimelHeaderAttributes as `prop:${K}`]?: LimelHeader[K] };
        "limel-help": Omit<LimelHelp, keyof LimelHelpAttributes> & { [K in keyof LimelHelp & keyof LimelHelpAttributes]?: LimelHelp[K] } & { [K in keyof LimelHelp & keyof LimelHelpAttributes as `attr:${K}`]?: LimelHelpAttributes[K] } & { [K in keyof LimelHelp & keyof LimelHelpAttributes as `prop:${K}`]?: LimelHelp[K] };
        "limel-help-content": Omit<LimelHelpContent, keyof LimelHelpContentAttributes> & { [K in keyof LimelHelpContent & keyof LimelHelpContentAttributes]?: LimelHelpContent[K] } & { [K in keyof LimelHelpContent & keyof LimelHelpContentAttributes as `attr:${K}`]?: LimelHelpContentAttributes[K] } & { [K in keyof LimelHelpContent & keyof LimelHelpContentAttributes as `prop:${K}`]?: LimelHelpContent[K] };
        "limel-helper-line": Omit<LimelHelperLine, keyof LimelHelperLineAttributes> & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes]?: LimelHelperLine[K] } & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes as `attr:${K}`]?: LimelHelperLineAttributes[K] } & { [K in keyof LimelHelperLine & keyof LimelHelperLineAttributes as `prop:${K}`]?: LimelHelperLine[K] };
        "limel-hotkey": Omit<LimelHotkey, keyof LimelHotkeyAttributes> & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes]?: LimelHotkey[K] } & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes as `attr:${K}`]?: LimelHotkeyAttributes[K] } & { [K in keyof LimelHotkey & keyof LimelHotkeyAttributes as `prop:${K}`]?: LimelHotkey[K] };
        "limel-icon": Omit<LimelIcon, keyof LimelIconAttributes> & { [K in keyof LimelIcon & keyof LimelIconAttributes]?: LimelIcon[K] } & { [K in keyof LimelIcon & keyof LimelIconAttributes as `attr:${K}`]?: LimelIconAttributes[K] } & { [K in keyof LimelIcon & keyof LimelIconAttributes as `prop:${K}`]?: LimelIcon[K] };
        "limel-icon-button": Omit<LimelIconButton, keyof LimelIconButtonAttributes> & { [K in keyof LimelIconButton & keyof LimelIconButtonAttributes]?: LimelIconButton[K] } & { [K in keyof LimelIconButton & keyof LimelIconButtonAttributes as `attr:${K}`]?: LimelIconButtonAttributes[K] } & { [K in keyof LimelIconButton & keyof LimelIconButtonAttributes as `prop:${K}`]?: LimelIconButton[K] };
        "limel-info-tile": Omit<LimelInfoTile, keyof LimelInfoTileAttributes> & { [K in keyof LimelInfoTile & keyof LimelInfoTileAttributes]?: LimelInfoTile[K] } & { [K in keyof LimelInfoTile & keyof LimelInfoTileAttributes as `attr:${K}`]?: LimelInfoTileAttributes[K] } & { [K in keyof LimelInfoTile & keyof LimelInfoTileAttributes as `prop:${K}`]?: LimelInfoTile[K] };
        "limel-input-field": Omit<LimelInputField, keyof LimelInputFieldAttributes> & { [K in keyof LimelInputField & keyof LimelInputFieldAttributes]?: LimelInputField[K] } & { [K in keyof LimelInputField & keyof LimelInputFieldAttributes as `attr:${K}`]?: LimelInputFieldAttributes[K] } & { [K in keyof LimelInputField & keyof LimelInputFieldAttributes as `prop:${K}`]?: LimelInputField[K] };
        "limel-linear-progress": Omit<LimelLinearProgress, keyof LimelLinearProgressAttributes> & { [K in keyof LimelLinearProgress & keyof LimelLinearProgressAttributes]?: LimelLinearProgress[K] } & { [K in keyof LimelLinearProgress & keyof LimelLinearProgressAttributes as `attr:${K}`]?: LimelLinearProgressAttributes[K] } & { [K in keyof LimelLinearProgress & keyof LimelLinearProgressAttributes as `prop:${K}`]?: LimelLinearProgress[K] };
        "limel-list": Omit<LimelList, keyof LimelListAttributes> & { [K in keyof LimelList & keyof LimelListAttributes]?: LimelList[K] } & { [K in keyof LimelList & keyof LimelListAttributes as `attr:${K}`]?: LimelListAttributes[K] } & { [K in keyof LimelList & keyof LimelListAttributes as `prop:${K}`]?: LimelList[K] };
        "limel-list-item": Omit<LimelListItem, keyof LimelListItemAttributes> & { [K in keyof LimelListItem & keyof LimelListItemAttributes]?: LimelListItem[K] } & { [K in keyof LimelListItem & keyof LimelListItemAttributes as `attr:${K}`]?: LimelListItemAttributes[K] } & { [K in keyof LimelListItem & keyof LimelListItemAttributes as `prop:${K}`]?: LimelListItem[K] };
        "limel-markdown": Omit<LimelMarkdown, keyof LimelMarkdownAttributes> & { [K in keyof LimelMarkdown & keyof LimelMarkdownAttributes]?: LimelMarkdown[K] } & { [K in keyof LimelMarkdown & keyof LimelMarkdownAttributes as `attr:${K}`]?: LimelMarkdownAttributes[K] } & { [K in keyof LimelMarkdown & keyof LimelMarkdownAttributes as `prop:${K}`]?: LimelMarkdown[K] };
        "limel-menu": Omit<LimelMenu, keyof LimelMenuAttributes> & { [K in keyof LimelMenu & keyof LimelMenuAttributes]?: LimelMenu[K] } & { [K in keyof LimelMenu & keyof LimelMenuAttributes as `attr:${K}`]?: LimelMenuAttributes[K] } & { [K in keyof LimelMenu & keyof LimelMenuAttributes as `prop:${K}`]?: LimelMenu[K] };
        "limel-menu-item-meta": Omit<LimelMenuItemMeta, keyof LimelMenuItemMetaAttributes> & { [K in keyof LimelMenuItemMeta & keyof LimelMenuItemMetaAttributes]?: LimelMenuItemMeta[K] } & { [K in keyof LimelMenuItemMeta & keyof LimelMenuItemMetaAttributes as `attr:${K}`]?: LimelMenuItemMetaAttributes[K] } & { [K in keyof LimelMenuItemMeta & keyof LimelMenuItemMetaAttributes as `prop:${K}`]?: LimelMenuItemMeta[K] };
        "limel-menu-list": Omit<LimelMenuList, keyof LimelMenuListAttributes> & { [K in keyof LimelMenuList & keyof LimelMenuListAttributes]?: LimelMenuList[K] } & { [K in keyof LimelMenuList & keyof LimelMenuListAttributes as `attr:${K}`]?: LimelMenuListAttributes[K] } & { [K in keyof LimelMenuList & keyof LimelMenuListAttributes as `prop:${K}`]?: LimelMenuList[K] };
        "limel-menu-surface": Omit<LimelMenuSurface, keyof LimelMenuSurfaceAttributes> & { [K in keyof LimelMenuSurface & keyof LimelMenuSurfaceAttributes]?: LimelMenuSurface[K] } & { [K in keyof LimelMenuSurface & keyof LimelMenuSurfaceAttributes as `attr:${K}`]?: LimelMenuSurfaceAttributes[K] } & { [K in keyof LimelMenuSurface & keyof LimelMenuSurfaceAttributes as `prop:${K}`]?: LimelMenuSurface[K] };
        "limel-notched-outline": Omit<LimelNotchedOutline, keyof LimelNotchedOutlineAttributes> & { [K in keyof LimelNotchedOutline & keyof LimelNotchedOutlineAttributes]?: LimelNotchedOutline[K] } & { [K in keyof LimelNotchedOutline & keyof LimelNotchedOutlineAttributes as `attr:${K}`]?: LimelNotchedOutlineAttributes[K] } & { [K in keyof LimelNotchedOutline & keyof LimelNotchedOutlineAttributes as `prop:${K}`]?: LimelNotchedOutline[K] };
        "limel-picker": Omit<LimelPicker, keyof LimelPickerAttributes> & { [K in keyof LimelPicker & keyof LimelPickerAttributes]?: LimelPicker[K] } & { [K in keyof LimelPicker & keyof LimelPickerAttributes as `attr:${K}`]?: LimelPickerAttributes[K] } & { [K in keyof LimelPicker & keyof LimelPickerAttributes as `prop:${K}`]?: LimelPicker[K] };
        "limel-popover": Omit<LimelPopover, keyof LimelPopoverAttributes> & { [K in keyof LimelPopover & keyof LimelPopoverAttributes]?: LimelPopover[K] } & { [K in keyof LimelPopover & keyof LimelPopoverAttributes as `attr:${K}`]?: LimelPopoverAttributes[K] } & { [K in keyof LimelPopover & keyof LimelPopoverAttributes as `prop:${K}`]?: LimelPopover[K] };
        "limel-popover-surface": LimelPopoverSurface;
        "limel-portal": Omit<LimelPortal, keyof LimelPortalAttributes> & { [K in keyof LimelPortal & keyof LimelPortalAttributes]?: LimelPortal[K] } & { [K in keyof LimelPortal & keyof LimelPortalAttributes as `attr:${K}`]?: LimelPortalAttributes[K] } & { [K in keyof LimelPortal & keyof LimelPortalAttributes as `prop:${K}`]?: LimelPortal[K] };
        "limel-profile-picture": Omit<LimelProfilePicture, keyof LimelProfilePictureAttributes> & { [K in keyof LimelProfilePicture & keyof LimelProfilePictureAttributes]?: LimelProfilePicture[K] } & { [K in keyof LimelProfilePicture & keyof LimelProfilePictureAttributes as `attr:${K}`]?: LimelProfilePictureAttributes[K] } & { [K in keyof LimelProfilePicture & keyof LimelProfilePictureAttributes as `prop:${K}`]?: LimelProfilePicture[K] };
        "limel-progress-flow": Omit<LimelProgressFlow, keyof LimelProgressFlowAttributes> & { [K in keyof LimelProgressFlow & keyof LimelProgressFlowAttributes]?: LimelProgressFlow[K] } & { [K in keyof LimelProgressFlow & keyof LimelProgressFlowAttributes as `attr:${K}`]?: LimelProgressFlowAttributes[K] } & { [K in keyof LimelProgressFlow & keyof LimelProgressFlowAttributes as `prop:${K}`]?: LimelProgressFlow[K] };
        "limel-progress-flow-item": Omit<LimelProgressFlowItem, keyof LimelProgressFlowItemAttributes> & { [K in keyof LimelProgressFlowItem & keyof LimelProgressFlowItemAttributes]?: LimelProgressFlowItem[K] } & { [K in keyof LimelProgressFlowItem & keyof LimelProgressFlowItemAttributes as `attr:${K}`]?: LimelProgressFlowItemAttributes[K] } & { [K in keyof LimelProgressFlowItem & keyof LimelProgressFlowItemAttributes as `prop:${K}`]?: LimelProgressFlowItem[K] };
        "limel-prosemirror-adapter": Omit<LimelProsemirrorAdapter, keyof LimelProsemirrorAdapterAttributes> & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes]?: LimelProsemirrorAdapter[K] } & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes as `attr:${K}`]?: LimelProsemirrorAdapterAttributes[K] } & { [K in keyof LimelProsemirrorAdapter & keyof LimelProsemirrorAdapterAttributes as `prop:${K}`]?: LimelProsemirrorAdapter[K] };
        "limel-radio-button": Omit<LimelRadioButton, keyof LimelRadioButtonAttributes> & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes]?: LimelRadioButton[K] } & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes as `attr:${K}`]?: LimelRadioButtonAttributes[K] } & { [K in keyof LimelRadioButton & keyof LimelRadioButtonAttributes as `prop:${K}`]?: LimelRadioButton[K] } & OneOf<"id", LimelRadioButton["id"], LimelRadioButtonAttributes["id"]>;
        "limel-radio-button-group": Omit<LimelRadioButtonGroup, keyof LimelRadioButtonGroupAttributes> & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes]?: LimelRadioButtonGroup[K] } & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes as `attr:${K}`]?: LimelRadioButtonGroupAttributes[K] } & { [K in keyof LimelRadioButtonGroup & keyof LimelRadioButtonGroupAttributes as `prop:${K}`]?: LimelRadioButtonGroup[K] };
        "limel-select": Omit<LimelSelect, keyof LimelSelectAttributes> & { [K in keyof LimelSelect & keyof LimelSelectAttributes]?: LimelSelect[K] } & { [K in keyof LimelSelect & keyof LimelSelectAttributes as `attr:${K}`]?: LimelSelectAttributes[K] } & { [K in keyof LimelSelect & keyof LimelSelectAttributes as `prop:${K}`]?: LimelSelect[K] };
        "limel-shortcut": Omit<LimelShortcut, keyof LimelShortcutAttributes> & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes]?: LimelShortcut[K] } & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes as `attr:${K}`]?: LimelShortcutAttributes[K] } & { [K in keyof LimelShortcut & keyof LimelShortcutAttributes as `prop:${K}`]?: LimelShortcut[K] };
        "limel-slider": Omit<LimelSlider, keyof LimelSliderAttributes> & { [K in keyof LimelSlider & keyof LimelSliderAttributes]?: LimelSlider[K] } & { [K in keyof LimelSlider & keyof LimelSliderAttributes as `attr:${K}`]?: LimelSliderAttributes[K] } & { [K in keyof LimelSlider & keyof LimelSliderAttributes as `prop:${K}`]?: LimelSlider[K] };
        "limel-snackbar": Omit<LimelSnackbar, keyof LimelSnackbarAttributes> & { [K in keyof LimelSnackbar & keyof LimelSnackbarAttributes]?: LimelSnackbar[K] } & { [K in keyof LimelSnackbar & keyof LimelSnackbarAttributes as `attr:${K}`]?: LimelSnackbarAttributes[K] } & { [K in keyof LimelSnackbar & keyof LimelSnackbarAttributes as `prop:${K}`]?: LimelSnackbar[K] };
        "limel-spinner": Omit<LimelSpinner, keyof LimelSpinnerAttributes> & { [K in keyof LimelSpinner & keyof LimelSpinnerAttributes]?: LimelSpinner[K] } & { [K in keyof LimelSpinner & keyof LimelSpinnerAttributes as `attr:${K}`]?: LimelSpinnerAttributes[K] } & { [K in keyof LimelSpinner & keyof LimelSpinnerAttributes as `prop:${K}`]?: LimelSpinner[K] };
        "limel-split-button": Omit<LimelSplitButton, keyof LimelSplitButtonAttributes> & { [K in keyof LimelSplitButton & keyof LimelSplitButtonAttributes]?: LimelSplitButton[K] } & { [K in keyof LimelSplitButton & keyof LimelSplitButtonAttributes as `attr:${K}`]?: LimelSplitButtonAttributes[K] } & { [K in keyof LimelSplitButton & keyof LimelSplitButtonAttributes as `prop:${K}`]?: LimelSplitButton[K] };
        "limel-switch": Omit<LimelSwitch, keyof LimelSwitchAttributes> & { [K in keyof LimelSwitch & keyof LimelSwitchAttributes]?: LimelSwitch[K] } & { [K in keyof LimelSwitch & keyof LimelSwitchAttributes as `attr:${K}`]?: LimelSwitchAttributes[K] } & { [K in keyof LimelSwitch & keyof LimelSwitchAttributes as `prop:${K}`]?: LimelSwitch[K] };
        "limel-tab-bar": LimelTabBar;
        "limel-tab-panel": LimelTabPanel;
        "limel-table": Omit<LimelTable, keyof LimelTableAttributes> & { [K in keyof LimelTable & keyof LimelTableAttributes]?: LimelTable[K] } & { [K in keyof LimelTable & keyof LimelTableAttributes as `attr:${K}`]?: LimelTableAttributes[K] } & { [K in keyof LimelTable & keyof LimelTableAttributes as `prop:${K}`]?: LimelTable[K] };
        "limel-text-editor": Omit<LimelTextEditor, keyof LimelTextEditorAttributes> & { [K in keyof LimelTextEditor & keyof LimelTextEditorAttributes]?: LimelTextEditor[K] } & { [K in keyof LimelTextEditor & keyof LimelTextEditorAttributes as `attr:${K}`]?: LimelTextEditorAttributes[K] } & { [K in keyof LimelTextEditor & keyof LimelTextEditorAttributes as `prop:${K}`]?: LimelTextEditor[K] };
        "limel-text-editor-link-menu": Omit<LimelTextEditorLinkMenu, keyof LimelTextEditorLinkMenuAttributes> & { [K in keyof LimelTextEditorLinkMenu & keyof LimelTextEditorLinkMenuAttributes]?: LimelTextEditorLinkMenu[K] } & { [K in keyof LimelTextEditorLinkMenu & keyof LimelTextEditorLinkMenuAttributes as `attr:${K}`]?: LimelTextEditorLinkMenuAttributes[K] } & { [K in keyof LimelTextEditorLinkMenu & keyof LimelTextEditorLinkMenuAttributes as `prop:${K}`]?: LimelTextEditorLinkMenu[K] };
        "limel-tooltip": Omit<LimelTooltip, keyof LimelTooltipAttributes> & { [K in keyof LimelTooltip & keyof LimelTooltipAttributes]?: LimelTooltip[K] } & { [K in keyof LimelTooltip & keyof LimelTooltipAttributes as `attr:${K}`]?: LimelTooltipAttributes[K] } & { [K in keyof LimelTooltip & keyof LimelTooltipAttributes as `prop:${K}`]?: LimelTooltip[K] } & OneOf<"elementId", LimelTooltip["elementId"], LimelTooltipAttributes["elementId"]> & OneOf<"label", LimelTooltip["label"], LimelTooltipAttributes["label"]>;
        "limel-tooltip-content": Omit<LimelTooltipContent, keyof LimelTooltipContentAttributes> & { [K in keyof LimelTooltipContent & keyof LimelTooltipContentAttributes]?: LimelTooltipContent[K] } & { [K in keyof LimelTooltipContent & keyof LimelTooltipContentAttributes as `attr:${K}`]?: LimelTooltipContentAttributes[K] } & { [K in keyof LimelTooltipContent & keyof LimelTooltipContentAttributes as `prop:${K}`]?: LimelTooltipContent[K] } & OneOf<"label", LimelTooltipContent["label"], LimelTooltipContentAttributes["label"]>;
    }
}
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.IntrinsicElements["limel-3d-hover-effect-glow"] & 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.IntrinsicElements["limel-action-bar"] & JSXBase.HTMLAttributes<HTMLLimelActionBarElement>;
            /**
             * @private 
             */
            "limel-action-bar-item": LocalJSX.IntrinsicElements["limel-action-bar-item"] & JSXBase.HTMLAttributes<HTMLLimelActionBarItemElement>;
            /**
             * @private 
             */
            "limel-action-bar-overflow-menu": LocalJSX.IntrinsicElements["limel-action-bar-overflow-menu"] & 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
             * @exampleComponent limel-example-ai-avatar-white-background
             * @exampleComponent limel-example-ai-avatar-color-props
             */
            "limel-ai-avatar": LocalJSX.IntrinsicElements["limel-ai-avatar"] & 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-basic
             * @exampleComponent limel-example-badge-number
             * @exampleComponent limel-example-badge-string
             */
            "limel-badge": LocalJSX.IntrinsicElements["limel-badge"] & JSXBase.HTMLAttributes<HTMLLimelBadgeElement>;
            /**
             * @exampleComponent limel-example-banner-basic
             */
            "limel-banner": LocalJSX.IntrinsicElements["limel-banner"] & 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.IntrinsicElements["limel-breadcrumbs"] & 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.IntrinsicElements["limel-button"] & 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-basic
             * @exampleComponent limel-example-button-group-mix
             * @exampleComponent limel-example-button-group-badges
             * @exampleComponent limel-example-button-group-composite
             */
            "limel-button-group": LocalJSX.IntrinsicElements["limel-button-group"] & 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.IntrinsicElements["limel-callout"] & 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-3d-effect
             * @exampleComponent limel-example-card-selected
             * @exampleComponent limel-example-card-orientation
             * @exampleComponent limel-example-card-slot
             * @exampleComponent limel-example-card-styling
             * @exampleComponent limel-example-card-scrollable-shadow
             */
            "limel-card": LocalJSX.IntrinsicElements["limel-card"] & 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-axis-labels
             * @exampleComponent limel-example-chart-styling
             * @exampleComponent limel-example-chart-creative-styling
             * @beta 
             */
            "limel-chart": LocalJSX.IntrinsicElements["limel-chart"] & 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-basic
             * @exampleComponent limel-example-checkbox-helper-text
             * @exampleComponent limel-example-checkbox-readonly
             */
            "limel-checkbox": LocalJSX.IntrinsicElements["limel-checkbox"] & 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.IntrinsicElements["limel-chip"] & 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-basic
             * @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.IntrinsicElements["limel-chip-set"] & 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-basic
             * @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.IntrinsicElements["limel-circular-progress"] & JSXBase.HTMLAttributes<HTMLLimelCircularProgressElement>;
            /**
             * Displays a visual diff between two text values, modeled on
             * GitHub's code difference view.
             * Supports unified and split (side-by-side) views with line numbers,
             * color-coded additions and removals, word-level inline highlighting,
             * and collapsible unchanged context sections.
             * @beta 
             * @exampleComponent limel-example-code-diff-basic
             * @exampleComponent limel-example-code-diff-headings
             * @exampleComponent limel-example-code-diff-json
             * @exampleComponent limel-example-code-diff-split
             * @exampleComponent limel-example-code-diff-line-wrap
             * @exampleComponent limel-example-code-diff-expand
             */
            "limel-code-diff": LocalJSX.IntrinsicElements["limel-code-diff"] & JSXBase.HTMLAttributes<HTMLLimelCodeDiffElement>;
            /**
             * @exampleComponent limel-example-code-editor-basic
             * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
             * @exampleComponent limel-example-code-editor-fold-lint-wrap
             * @exampleComponent limel-example-code-editor-copy
             * @exampleComponent limel-example-code-editor-composite
             */
            "limel-code-editor": LocalJSX.IntrinsicElements["limel-code-editor"] & 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.IntrinsicElements["limel-collapsible-section"] & 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-basic
             * @exampleComponent limel-example-color-picker-custom-palette
             * @exampleComponent limel-example-color-picker-manual-input
             * @exampleComponent limel-example-color-picker-composite
             */
            "limel-color-picker": LocalJSX.IntrinsicElements["limel-color-picker"] & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
            /**
             * @private 
             */
            "limel-color-picker-palette": LocalJSX.IntrinsicElements["limel-color-picker-palette"] & 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.IntrinsicElements["limel-config"] & 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.IntrinsicElements["limel-date-picker"] & 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-basic
             * @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.IntrinsicElements["limel-dialog"] & 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.IntrinsicElements["limel-dock"] & JSXBase.HTMLAttributes<HTMLLimelDockElement>;
            /**
             * @private 
             */
            "limel-dock-button": LocalJSX.IntrinsicElements["limel-dock-button"] & JSXBase.HTMLAttributes<HTMLLimelDockButtonElement>;
            /**
             * This component resembles a drag handle button, but is implemented
             * as a `private` component to allow for easier styling and future extensions.
             * :::important
             * This component has its `shadow` set to `false` in order to
             * integrate well with the drag-and-drop functionality, as well as
             * providing a better accessibility.
             * Keep in mind that its styles might be affected by the consumer
             * component, due to its light dom.
             * :::
             * :::tip
             * It's recommended to place the drag handle on the right side of
             * the item it is meant to reorder, to ensure consistent layout
             * design conventions.
             * :::
             * @exampleComponent limel-example-drag-handle-basic
             * @exampleComponent limel-example-drag-handle-horizontal
             * @private 
             */
            "limel-drag-handle": LocalJSX.IntrinsicElements["limel-drag-handle"] & JSXBase.HTMLAttributes<HTMLLimelDragHandleElement>;
            /**
             * 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-basic
             * @exampleComponent limel-example-dynamic-label-readonly-boolean
             */
            "limel-dynamic-label": LocalJSX.IntrinsicElements["limel-dynamic-label"] & JSXBase.HTMLAttributes<HTMLLimelDynamicLabelElement>;
            /**
             * This is a private component, used to render `.eml` files inside
             * `limel-file-viewer`.
             * :::note
             * If `bodyHtml` is provided, it will be rendered using `innerHTML`.
             * Consumers should pre-sanitize `bodyHtml` before passing it to the component.
             * :::
             * @exampleComponent limel-example-email-viewer-plain-text
             * @exampleComponent limel-example-email-viewer-inline-image
             * @exampleComponent limel-example-email-viewer-remote-image-policy
             * @private 
             */
            "limel-email-viewer": LocalJSX.IntrinsicElements["limel-email-viewer"] & JSXBase.HTMLAttributes<HTMLLimelEmailViewerElement>;
            /**
             * 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-basic
             * @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.IntrinsicElements["limel-file"] & 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-basic
             * @exampleComponent limel-example-file-dropzone-type-filtering
             * @private 
             */
            "limel-file-dropzone": LocalJSX.IntrinsicElements["limel-file-dropzone"] & 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-basic
             * @exampleComponent limel-example-file-input-type-filtering
             * @private 
             */
            "limel-file-input": LocalJSX.IntrinsicElements["limel-file-input"] & 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-eml
             * @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.IntrinsicElements["limel-file-viewer"] & 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.IntrinsicElements["limel-flatpickr-adapter"] & 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.IntrinsicElements["limel-flex-container"] & 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-array-item-controls
             * @exampleComponent limel-example-form-with-help
             * @exampleComponent limel-example-form-row-layout
             * @exampleComponent limel-example-builtin-field-types-form
             * @exampleComponent limel-example-code-editor-form
             */
            "limel-form": LocalJSX.IntrinsicElements["limel-form"] & 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.IntrinsicElements["limel-grid"] & 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-basic
             * @exampleComponent limel-example-header-slot-actions
             * @exampleComponent limel-example-header-colors
             * @exampleComponent limel-example-header-responsive
             * @exampleComponent limel-example-header-narrow
             */
            "limel-header": LocalJSX.IntrinsicElements["limel-header"] & 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-basic
             * @exampleComponent limel-example-read-more
             * @exampleComponent limel-example-open-direction
             * @exampleComponent limel-example-placement
             */
            "limel-help": LocalJSX.IntrinsicElements["limel-help"] & 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.IntrinsicElements["limel-help-content"] & 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-basic
             * @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.IntrinsicElements["limel-helper-line"] & JSXBase.HTMLAttributes<HTMLLimelHelperLineElement>;
            /**
             * This is a display-only component used to visualize keyboard shortcuts.
             * It renders hotkey strings as styled `<kbd>` elements with
             * platform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).
             * It does **not** listen for or handle any keyboard events.
             * Keyboard event handling is the responsibility of the parent component
             * (e.g. `limel-menu` or `limel-select`).
             * @exampleComponent limel-example-hotkey-basic
             * @exampleComponent limel-example-hotkey-disabled
             * @private 
             */
            "limel-hotkey": LocalJSX.IntrinsicElements["limel-hotkey"] & JSXBase.HTMLAttributes<HTMLLimelHotkeyElement>;
            /**
             * :::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.IntrinsicElements["limel-icon"] & 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-helper-label
             * @exampleComponent limel-example-icon-button-composite
             */
            "limel-icon-button": LocalJSX.IntrinsicElements["limel-icon-button"] & 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-basic
             * @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.IntrinsicElements["limel-info-tile"] & 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
             * @exampleComponent limel-example-input-field-selection
             */
            "limel-input-field": LocalJSX.IntrinsicElements["limel-input-field"] & 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-basic
             * @exampleComponent limel-example-linear-progress-indeterminate
             * @exampleComponent limel-example-linear-progress-accessible-label
             * @exampleComponent limel-example-linear-progress-color
             */
            "limel-linear-progress": LocalJSX.IntrinsicElements["limel-linear-progress"] & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
            /**
             * @exampleComponent limel-example-list-basic
             * @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.IntrinsicElements["limel-list"] & JSXBase.HTMLAttributes<HTMLLimelListElement>;
            /**
             * This components displays the list item.
             * This centralizes styles and functionality, and helps reduce redundant code
             * in consumer components such as `limel-list` and `limel-menu-list`.
             * :::note
             * The component has `shadow: false`. There are a few reasons for it:
             * 1. This is to improve performance, and ensure that its internal elements are
             * considered as internal parts of the consumer's DOM.
             * 2. The consumer does not need to implement the interactive styles
             * (such as `visualize-keyboard-focus` mixin) on their own. Since there is no
             * shadow DOM, our mixins can be applied directly to the `limel-list-item` elements,
             * within the component's own styles.
             * 3. Most importantly, the MDCList checks the light DOM of each list item
             * to find native inputs to decide the list mode (checkbox/radio).
             * With `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s
             * shadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given
             * an array index (for the items).
             * With `shadow: false`, the native `<input type="checkbox/radio">` from this template
             * would be visible to MDC.
             * :::
             * @exampleComponent limel-example-list-item-basic
             * @exampleComponent limel-example-list-item-icon
             * @exampleComponent limel-example-list-item-icon-size
             * @exampleComponent limel-example-list-item-pictures
             * @exampleComponent limel-example-list-item-multiple-lines
             * @exampleComponent limel-example-list-item-interactive
             * @exampleComponent limel-example-list-item-radio
             * @exampleComponent limel-example-list-item-checkbox
             * @exampleComponent limel-example-list-item-actions
             * @exampleComponent limel-example-list-item-primary-component
             * @exampleComponent limel-example-list-item-command-text
             * @private 
             */
            "limel-list-item": LocalJSX.IntrinsicElements["limel-list-item"] & JSXBase.HTMLAttributes<HTMLLimelListItemElement>;
            /**
             * The Markdown component receives markdown syntax
             * and renders it as HTML.
             * A built-in set of lime-elements components is whitelisted by default
             * and can be used directly in markdown content without any configuration.
             * Consumers can extend this list via the `whitelist` prop or `limel-config`.
             * When custom elements use JSON attribute values, any URL-bearing
             * properties (`href`, `src`, `cite`, `longDesc`) are automatically
             * sanitized using the same protocol allowlists as rehype-sanitize.
             * URLs with dangerous schemes (e.g. `javascript:`, `data:`) are
             * removed (with a console warning) to prevent script injection.
             * @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-custom-component
             * @exampleComponent limel-example-markdown-custom-component-with-json-props
             * @exampleComponent limel-example-markdown-remove-empty-paragraphs
             * @exampleComponent limel-example-markdown-composite
             */
            "limel-markdown": LocalJSX.IntrinsicElements["limel-markdown"] & 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-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-hotkeys
             * @exampleComponent limel-example-menu-searchable-hotkeys
             * @exampleComponent limel-example-menu-composite
             */
            "limel-menu": LocalJSX.IntrinsicElements["limel-menu"] & JSXBase.HTMLAttributes<HTMLLimelMenuElement>;
            /**
             * Meta content for menu list items
             * This sub-component is intended to be passed as `primaryComponent`
             * to `limel-list-item`, when it is used in the menu list.
             * It includes command text, badge, and chevron, which are the
             * features of menu list items.
             * @private 
             */
            "limel-menu-item-meta": LocalJSX.IntrinsicElements["limel-menu-item-meta"] & JSXBase.HTMLAttributes<HTMLLimelMenuItemMetaElement>;
            /**
             * @private 
             */
            "limel-menu-list": LocalJSX.IntrinsicElements["limel-menu-list"] & JSXBase.HTMLAttributes<HTMLLimelMenuListElement>;
            /**
             * @private 
             */
            "limel-menu-surface": LocalJSX.IntrinsicElements["limel-menu-surface"] & 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.IntrinsicElements["limel-notched-outline"] & 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.IntrinsicElements["limel-picker"] & 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.IntrinsicElements["limel-popover"] & JSXBase.HTMLAttributes<HTMLLimelPopoverElement>;
            /**
             * @private 
             */
            "limel-popover-surface": LocalJSX.IntrinsicElements["limel-popover-surface"] & 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.IntrinsicElements["limel-portal"] & 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.IntrinsicElements["limel-profile-picture"] & 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.IntrinsicElements["limel-progress-flow"] & JSXBase.HTMLAttributes<HTMLLimelProgressFlowElement>;
            /**
             * @private 
             */
            "limel-progress-flow-item": LocalJSX.IntrinsicElements["limel-progress-flow-item"] & 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.IntrinsicElements["limel-prosemirror-adapter"] & JSXBase.HTMLAttributes<HTMLLimelProsemirrorAdapterElement>;
            /**
             * This is a low-level private component that renders individual radio button elements.
             * It's used internally by the list-item component to render radio buttons when
             * `type="radio"` is specified.
             * ## Usage in the Library
             * This template is primarily used by:
             * - `limel-list` component when `type="radio"`
             * - `limel-radio-button-group` component (which wraps `limel-list`)
             * ## Why This Exists
             * While we have `limel-radio-button-group` for most use cases, this template provides
             * the actual radio button HTML structure with proper MDC classes and accessibility
             * attributes. It ensures consistent styling and behavior across all radio button
             * implementations in the library.
             * ## Design Philosophy
             * This follows the principle that individual radio buttons should not be standalone
             * components, as a single radio button is never useful in a UI. Instead, this template
             * is used to build groups of radio buttons through higher-level components.
             * However, since this is a private component, consumers who need to use a radio button
             * outside of the context of a list or group, can still use the `limel-radio-button`
             * component directly according to in their UI needs.
             * @private 
             */
            "limel-radio-button": LocalJSX.IntrinsicElements["limel-radio-button"] & JSXBase.HTMLAttributes<HTMLLimelRadioButtonElement>;
            /**
             * 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.IntrinsicElements["limel-radio-button-group"] & JSXBase.HTMLAttributes<HTMLLimelRadioButtonGroupElement>;
            /**
             * @exampleComponent limel-example-select-basic
             * @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-multiple-icons
             * @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.IntrinsicElements["limel-select"] & 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-basic
             * @exampleComponent limel-example-shortcut-notification
             * @exampleComponent limel-example-shortcut-styling
             * @exampleComponent limel-example-shortcut-with-click-handler
             */
            "limel-shortcut": LocalJSX.IntrinsicElements["limel-shortcut"] & JSXBase.HTMLAttributes<HTMLLimelShortcutElement>;
            /**
             * @exampleComponent limel-example-slider-basic
             * @exampleComponent limel-example-slider-multiplier
             * @exampleComponent limel-example-slider-multiplier-percentage-colors
             * @exampleComponent limel-example-slider-unit
             * @exampleComponent limel-example-slider-composite
             */
            "limel-slider": LocalJSX.IntrinsicElements["limel-slider"] & 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-basic
             * @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.IntrinsicElements["limel-snackbar"] & JSXBase.HTMLAttributes<HTMLLimelSnackbarElement>;
            /**
             * @exampleComponent limel-example-spinner-basic
             * @exampleComponent limel-example-spinner-color
             * @exampleComponent limel-example-spinner-size
             */
            "limel-spinner": LocalJSX.IntrinsicElements["limel-spinner"] & 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.IntrinsicElements["limel-split-button"] & 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-basic
             * @exampleComponent limel-example-switch-helper-text
             * @exampleComponent limel-example-switch-readonly
             */
            "limel-switch": LocalJSX.IntrinsicElements["limel-switch"] & 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-basic
             * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
             * @exampleComponent limel-example-tab-bar-with-equal-tab-width
             */
            "limel-tab-bar": LocalJSX.IntrinsicElements["limel-tab-bar"] & 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-basic
             */
            "limel-tab-panel": LocalJSX.IntrinsicElements["limel-tab-panel"] & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
            /**
             * @exampleComponent limel-example-table-basic
             * @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-pagination
             * @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.IntrinsicElements["limel-table"] & 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.IntrinsicElements["limel-text-editor"] & 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.IntrinsicElements["limel-text-editor-link-menu"] & 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.IntrinsicElements["limel-tooltip"] & JSXBase.HTMLAttributes<HTMLLimelTooltipElement>;
            /**
             * This component is used internally by `limel-tooltip`.
             * @private 
             */
            "limel-tooltip-content": LocalJSX.IntrinsicElements["limel-tooltip-content"] & JSXBase.HTMLAttributes<HTMLLimelTooltipContentElement>;
        }
    }
}