@limetech/lime-elements/dist/types/components.d.ts

Lime Elements

/* 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