lime-elements-vue 2.2.0 → 3.0.0-beta.1

package/dist/web-types.json

@@ -1,3999 +0,0 @@
-{
-  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
-  "framework": "vue",
-  "name": "lime-elements-vue",
-  "version": "2.2.0",
-  "js-types-syntax": "typescript",
-  "description-markup": "markdown",
-  "contributions": {
-    "html": {
-      "vue-components": [
-        {
-          "name": "Limel3dHoverEffectGlow",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "Limel3dHoverEffectGlow"
-          },
-          "description": "This component enhances the visual effects, when the `tiltFollowingTheCursor`\r\nutility function from `3d-tilt-hover-effect.ts` is implemented in a component.\r\n\r\nThis component should be added to the HTML structure of the consumer component.\r\n\r\nThis component carries its own styles which are needed to create a glow effect on the\r\n3D element within the parent element, when the parent is hovered.\r\n\r\nThe parent element must be using the `tiltFollowingTheCursor` utility function\r\nimported from `3d-tilt-hover-effect.ts`. This function will dynamically\r\naffect parts of the styles of this 3D glow effect.",
-          "props": []
-        },
-        {
-          "name": "LimelActionBar",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelActionBar"
-          },
-          "description": "An action bar is a user interface element commonly found in software applications and websites.\r\nIt typically appears at the top of the screen or within a specific section\r\nand serves as a centralized hub for accessing various actions and commands\r\nrelevant to the current context or page.\r\n\r\nThe action bar often contains a set of clickable icons or buttons (icons + labels)\r\nthat represent specific actions, such as saving, deleting, editing, sharing,\r\nor bulk operations for selected items.\r\n\r\nThe purpose of an action bar is to provide quick and convenient access to\r\nfrequently used functionalities, enabling users to perform common tasks efficiently.\r\nIt enhances usability by organizing important actions in a visually prominent and easily accessible location.\r\n\r\nThe action bar's design and layout can vary based on the platform or application,\r\nbut its primary goal remains consistent—to\r\nempower users to interact with the software and perform desired actions effortlessly.",
-          "props": [
-            {
-              "name": "accessibleLabel",
-              "description": "A label used to describe the purpose of the element to users\r\nof assistive technologies, like screen readers.\r\nIf not set, a localized default (\"Action bar\" in English, translated\r\nvia the `language` prop) is used, so the element is never announced\r\nwithout a name. Override this when a more specific label would help\r\nusers tell multiple action bars apart — for example \"Bulk actions\"\r\nor \"Contextual actions\".",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "layout",
-              "description": "- When set to `fullWidth`, the component will take the\r\nentire width of its container.\r\n- When set to `floating`, the component will get basic stylings\r\nto visualize the floating state.\r\n:::note\r\nYou should still properly position the component\r\naccording to the structure of your user interface.\r\nFor example, use an `absolute` or `fixed` position.\r\n:::",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "collapsible",
-              "description": "",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "openDirection",
-              "description": "Defines the location that the content of the overflow menu\r\nappears, in relation to its trigger.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelActionBarItem",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelActionBarItem"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "isVisible",
-              "description": "When the item is displayed in the available width,\r\nthis will be `false`.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "selected",
-              "description": "When the item is selected, this will be `true`.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelActionBarOverflowMenu",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelActionBarOverflowMenu"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "openDirection",
-              "description": "Defines the location that the content of the overflow menu\r\nappears, in relation to its trigger.\r\nIt defaults to `bottom-end`, since in normal scenarios\r\n(for example when the action bar is not floating at the bottom of the screen)\r\nthis menu is the right-most item in the user interface of the component.",
-              "type": "any",
-              "default": "'bottom-end'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelAiAvatar",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelAiAvatar"
-          },
-          "description": "This component displays an avatar, representing Lime AI assistants.\r\n\r\n:::warning\r\nThis is a private component used internally in Lime's various applications,\r\nwhich is the reason for having it in Lime Elements —to ease the distribution\r\nof the component across all our apps.\r\n\r\n3rd party developers are not allowed use this component directly.\r\n:::",
-          "props": [
-            {
-              "name": "isThinking",
-              "description": "",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "mode",
-              "description": "Represents the current activity of the AI agent. The avatar uses this\r\nto drive its visual state and animations. Defaults to `idle`.",
-              "type": "any",
-              "default": "'idle'",
-              "required": false
-            },
-            {
-              "name": "variant",
-              "description": "Selects the avatar's visual style. The `detailed` variant is the fully\r\ndetailed orb; the `minimal` variant is a simplified design with a\r\nsingle gradient orb, a stroked outline, and a soft halo. Eye and\r\nmouth shapes (and all animations driving them) are shared across\r\nvariants.",
-              "type": "any",
-              "default": "'minimal'",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "document.documentElement.lang as Languages",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelBadge",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelBadge"
-          },
-          "description": "The Badge component can be used to display a notification badge,\r\noptionally with a number or a text label.",
-          "props": [
-            {
-              "name": "label",
-              "description": "Label to display in the badge.\r\nNumeric labels larger than 999 will be rounded and abbreviated.\r\nString labels get truncated if their length is longer than\r\nsix characters.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelBanner",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelBanner"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "message",
-              "description": "The text to show on the banner.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Set icon for the banner",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "buttons",
-              "description": "Buttons to show in the banner"
-            }
-          ]
-        },
-        {
-          "name": "LimelBreadcrumbs",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelBreadcrumbs"
-          },
-          "description": "A Breadcrumb consists of a list of distinct \"places\" that a user has gone through,\r\nbefore ending up where they are right now, in a website or an application.\r\n\r\nThese \"places\" can be for example _pages_ of a website, which are hierarchically\r\nlaid out before the current page that the user is looking at.\r\nThey could also be _steps_ which the user has gone through, which perhaps have no\r\nhierarchical relation with each other, but has eventually led the user \"here\".\r\n\r\n:::note\r\n- Where the user currently is, is always the last step of the breadcrumb.\r\n- A breadcrumbs never shows where users can go after this place.\r\nIt only illustrates where user has been before ending up here.\r\nIf the path that a user can take is not changing and if next steps are clear,\r\nyou can use the [Progress flow component](#/component/limel-progress-flow) instead.\r\n:::\r\n\r\nBreadcrumbs are often placed horizontally before the main content of the current screen.",
-          "props": [
-            {
-              "name": "divider",
-              "description": "The visual divider that separates items.\r\nIt must be a single character such as `-` or `,`.",
-              "type": "any",
-              "default": "'›'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelButton",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelButton"
-          },
-          "description": "Buttons allow users to take actions with a single tap or click.\r\nThey are intentionally designed to look and feel clickable,\r\nand should clearly communicate the action that will happen\r\nwhen the user interacts with them.\r\n\r\nThe component offers three visual variants — **default**, **primary**,\r\nand **outlined** — that together establish a hierarchy of actions.\r\nSee the examples below for guidance on when to use each variant.\r\n\r\nFor more guidance on how to arrange buttons and choose between\r\nprimary and secondary actions, see our\r\n[Action buttons design guidelines](#/DesignGuidelines/action-buttons.md/).",
-          "props": [
-            {
-              "name": "label",
-              "description": "The text to show on the button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "primary",
-              "description": "Set to `true` to make the button primary.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "outlined",
-              "description": "Set to `true` to make the button outlined.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Set icon for the button",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the button.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to put the button in the `loading` state.\r\nThis also disables the button.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loadingFailed",
-              "description": "Set to `true` to indicate failure instead of success when the button is\r\nno longer in the `loading` state.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelButtonGroup",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelButtonGroup"
-          },
-          "description": "A button group control is a linear set of two or more buttons.\r\n\r\n## Usage\r\n\r\nButton groups are often used to display different views of the same thing. A\r\ncommon example of this component is when you switch between [ Map | Transit\r\n| Satellite ] views to look at an area on the map.\r\n\r\nIn some cases, button groups may serve as quick filters as well. For example\r\na list of contacts, in which the user can switch to [ All | Favorites\r\n| Frequently contacted ] can incorporate a button group to quickly filter out\r\nitems and display subsets of them.\r\n\r\n## Layout\r\n\r\nThe button groups are usually placed in top headers and action bars,\r\nsometimes with other elements. Since the group items will always be rendered\r\nin a row, you must make sure not to have too many buttons in the group.\r\nBecause if the container of your button group does not get enough space to\r\nfit in all its buttons, they will have to truncate their text and may appear\r\nvery cramped together. Always think about how your button group will appear\r\non a small screen such as phones.\r\n:::note\r\nButton can contain text or icons, but not both simultaneously!\r\n:::\r\n\r\nWithin the group, icon buttons will all have the same width, while each text button\r\ninherits its width from its content.",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "True if the button-group should be disabled",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCallout",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCallout"
-          },
-          "description": "Callouts—also known as Admonitions—are useful for including supportive or\r\nspecial content within a large piece of text, or even inside a user\r\ninterface.\r\n\r\nWhen used in a document or text based user interface, the callout attracts\r\nthe reader's attention to a particular piece of information, without\r\nsignificantly interrupting their flow of reading the document.\r\n\r\nIn a user interface, a callout is more intrusive to the end-user. Still, it\r\ncould be a good choice when you intend to slightly disturb the user's\r\nattention, and challenge them to pay extra attention to the information\r\npresented. In such cases, a callout should not be used as a static and\r\nconstantly present element of the UI. Rather, it should be displayed when\r\nsomething unusual or remarkable demands the user's attention.",
-          "props": [
-            {
-              "name": "heading",
-              "description": "Heading of the callout, which can be used to override the\r\ndefault heading which is displayed based on the chosen `type`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Icon of the callout, which can be used to override the\r\ndefault icon which is displayed based on the chosen `type`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "Defines how the component is visualized, for example\r\nwhich heading, color or icon is used in its user interface.",
-              "type": "any",
-              "default": "'note'",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the default headings for supported languages.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCard",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCard"
-          },
-          "description": "Card is a component that displays content about a single topic,\r\nin a structured way. It can contain a header, and some supporting media such\r\nas an image or an icon, a body of text, or optional actions.",
-          "props": [
-            {
-              "name": "heading",
-              "description": "Heading of the card,\r\nto provide a short title about the context.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "subheading",
-              "description": "Subheading of the card\r\nto provide a short description of the context.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "An icon, to display along with the heading and subheading.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "The content of the card.\r\nSupports markdown, to provide a rich text experience.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "clickable",
-              "description": "When true, improve the accessibility of the component and hints the user\r\nthat the card can be interacted width.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "orientation",
-              "description": "The orientation of the card,\r\nspecially useful when the card has an image.",
-              "type": "any",
-              "default": "'portrait'",
-              "required": false
-            },
-            {
-              "name": "selected",
-              "description": "When `true`, the card displays a visual selected state (highlighted border shadow).\r\nShould be used together with `clickable` to let users toggle selection.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "show-3dEffect",
-              "description": "When `true`, the card displays a glow effect on hover,\r\nfollowing the 3D tilt hover effect.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelChart",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelChart"
-          },
-          "description": "A chart is a graphical representation of data, in which\r\nvisual symbols such as such bars, dots, lines, or slices, represent\r\neach data point, in comparison to others.",
-          "props": [
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "accessibleLabel",
-              "description": "Helps users of assistive technologies to understand\r\nthe context of the chart, and what is being displayed.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "accessibleItemsLabel",
-              "description": "Helps users of assistive technologies to understand\r\nwhat the items in the chart represent.\r\nDefaults to the translation for \"items\" in the current language.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "accessibleValuesLabel",
-              "description": "Helps users of assistive technologies to understand\r\nwhat the values in the chart represent.\r\nDefaults to the translation for \"value\" in the current language.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "displayAxisLabels",
-              "description": "When set to true, renders visible labels for X and Y axes.\r\nOnly affects chart types with X and Y axes, such as area, bar, and line charts.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "displayItemText",
-              "description": "Makes the `text` of chart items constantly visible,\r\nBy default, item texts are displayed in a tooltip,\r\nwhen the item is hovered or focused.\r\nOnly affects chart types with X and Y axes, such as area, bar, and line charts.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "displayItemValue",
-              "description": "Makes the `value` (or `formattedValue`) of chart items constantly visible,\r\nBy default, item values are displayed in a tooltip,\r\nwhen the item is hovered or focused.\r\nOnly affects chart types with X and Y axes, such as area, bar, and line charts.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "Defines how items are visualized in the chart.",
-              "type": "any",
-              "default": "'stacked-bar'",
-              "required": false
-            },
-            {
-              "name": "orientation",
-              "description": "Defines whether the chart is intended to be displayed wide or tall.\r\nDoes not have any effect on chart types which generate circular forms.",
-              "type": "any",
-              "default": "'landscape'",
-              "required": false
-            },
-            {
-              "name": "maxValue",
-              "description": "Specifies the range that items' values could be in.\r\nThis is used in calculation of the size of the items in the chart.\r\nWhen not provided, the sum of all values in the items will be considered as the range.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "axisIncrement",
-              "description": "Specifies the increment for the axis lines.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Indicates whether the chart is in a loading state.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCheckbox",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCheckbox"
-          },
-          "description": "The Checkbox component is a classic and essential element in UI design that allows\r\nusers 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\r\nselect one or more items from a list of choices.\r\n\r\n## States of a Checkbox\r\nWhen a user clicks or taps on the box, it toggles between two states:\r\nChecked and Unchecked.\r\n\r\nHowever, a Checkbox can visualize a third state called the \"Indeterminate\" state.\r\nIn this state, the checkbox appears as a filled box with a horizontal line or dash inside it.\r\n\r\nThe Indeterminate state is typically used when dealing with checkbox groups\r\nthat have hierarchical relationships or when the group contains sub-items.\r\nThis state is used to indicate that that some, but not all, of the items in a group are selected.\r\n\r\n:::important\r\nCheckboxes are sometimes used interchangeably with switches in user interfaces.\r\nBut there is an important difference between the two! Please read our guidelines about\r\n[Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Disables the checkbox when `true`. Works exactly the same as `readonly`.\r\nIf either property is `true`, the checkbox will be disabled.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\r\nBut shows no visual sign indicating that the checkbox is disabled\r\nor can ever become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value is invalid.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The checkbox label.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the checkbox",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "checked",
-              "description": "The value of the checkbox. Set to `true` to make the checkbox checked.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "indeterminate",
-              "description": "Enables indeterminate state. Set to `true` to signal indeterminate check.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the checkbox must be checked.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelChip",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelChip"
-          },
-          "description": "Chips and buttons are both interactive elements in UI design,\r\nbut they serve different purposes and are used in different contexts.\r\n\r\n:::warning\r\nDo not use the chip component carelessly, as an alternative for\r\n[`limel-button`](#/component/limel-button/) in the UI design!\r\n\r\n**Buttons:**\r\nButtons are used to trigger actions. They are typically used to\r\nsubmit forms, open dialogs, initiate a process, or perform any action\r\nthat changes the state of the application.\r\nButtons' labels usually contain action words, in other words, the labels is\r\na _verb in imperative mood_ such as \"Submit\" or \"Delete\".\r\nButtons are placed in areas where it's clear they will initiate\r\nan action when clicked.\r\n\r\n**Chips:**\r\nChips however are elements which may look like buttons, but they are\r\nrepresenting choices, filters, or tags, in a small block\r\nor clearly bundled into a group. Chips are rarely used alone in the\r\nuser interface.\r\nThey are often used in a so called \"chip-set\", or placed together in\r\na section of the UI, where the user can expect more than one chip to be present.\r\n\r\nFor example, a chip may represent a filter in a filter bar, or a tag in a tag list,\r\nor an item in a shopping list.\r\nClicking a chip can also trigger an action, for example toggling a filter ON or OFF,\r\nor opening a page with all posts tagged with the tag represented by the chip,\r\nor navigating to a page with more information about the item in the shopping list.\r\n:::",
-          "props": [
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "text",
-              "description": "Label displayed on the chip",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Icon of the chip.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "badge",
-              "description": "The value of the badge, displayed on the chip.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the chip.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to render the chip as a static UI element.\r\nUseful when the parent component has a `readonly` state.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "selected",
-              "description": "Set to `true` to visualize the chip in a \"selected\" state.\r\nThis is typically used when the chip is used in a chip-set\r\nalong with other chips.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to visualize the chip in an \"invalid\" or \"error\" state.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "removable",
-              "description": "Set to `true` to render a remove button on the chip.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "Set to `filter` to render the chip with a distinct style\r\nsuitable for visualizing filters.",
-              "type": "any",
-              "default": "'default'",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to put the component in the `loading` state,\r\nand render an indeterminate progress indicator inside the chip.\r\nThis does _not_ disable the interactivity of the chip!",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "progress",
-              "description": "Reflects the current value of a progress bar on the chip,\r\nvisualizing the percentage of an ongoing process.\r\nMust be a number between `0` and `100`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "identifier",
-              "description": "Identifier for the chip. Must be unique.",
-              "type": "any",
-              "default": "crypto.randomUUID()",
-              "required": false
-            },
-            {
-              "name": "size",
-              "description": "Defines the size of the chip.",
-              "type": "any",
-              "default": "'default'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelChipSet",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelChipSet"
-          },
-          "description": ":::note\r\n**Regarding `click` and `interact` events:**\r\n\r\nThe `interact` event is emitted when a chip is interacted with, and is\r\nthe recommended way to listen for chip interactions.\r\n\r\nHowever, if you need to handle clicks differently depending on which chip\r\nwas clicked, or whether the click was on a chip or elsewhere, you need to\r\nlisten to the native `click` event instead.\r\n\r\nNative `click` events are passed through, and if the click came from\r\na chip, the chip object is available in the event object under\r\n`<event object>.Lime.chip`.\r\n\r\nExample usage:\r\n```ts\r\nprivate handleClick(event: Event) {\r\n    if (event && 'Lime' in event && (event.Lime as any).chip) {\r\n        if ((event.Lime as { chip: Chip }).chip.href) {\r\n            // Chip has href, so let the browser open the link.\r\n            return;\r\n        }\r\n        // handle click on chip without href\r\n    } else {\r\n        // handle click elsewhere\r\n    }\r\n}\r\n```\r\n:::",
-          "props": [
-            {
-              "name": "type",
-              "description": "Type of chip set\r\n\r\n- `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored\r\n- `filter` renders a set of selectable chips where all are selectable.\r\n- `input` renders a set of chips that can be used in conjunction with an input field\r\n\r\nIf no type is set, a basic set of chips without additional functionality will be rendered",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Label for the chip-set",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the chipset.\r\nWhen type is `input`, the helper text is displayed below the\r\ninput field when it has focus.\r\nWhen type is not `input`, the helper text is always displayed\r\nif the device is touch screen; otherwise it is shown when chip-set\r\nis hovered or focused using keyboard navigation.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "True if the chip set should be disabled",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "For chip-sets of type `input`, set to `true` to disable adding and\r\nremoving chips, but allow interaction with existing chips in the set.\r\nFor any other types, setting either `readonly` or `disabled` disables\r\nthe chip-set.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input field is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "inputType",
-              "description": "For chip-sets of type `input`. Value to use for the `type` attribute on the\r\ninput field inside the chip-set.",
-              "type": "any",
-              "default": "'text'",
-              "required": false
-            },
-            {
-              "name": "maxItems",
-              "description": "For chip-sets of type `input`. Limits the maximum number of chips.\r\nWhen the value is `0` or not set, no limit is applied.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "True if the control requires a value",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "searchLabel",
-              "description": "Search label to display when type is `input` and component is in search mode",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "emptyInputOnBlur",
-              "description": "Whether the input field should be emptied when the chip-set loses focus.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "emptyInputOnChange",
-              "description": "Whether the input field should be emptied when the set of chips\r\nchanges (i.e. when the `value` prop is updated — a chip is added,\r\nremoved, or the array is replaced).\r\n\r\nDefaults to `true`, which is the right behavior for a standalone\r\ninput chip-set where the typed text *becomes* the next chip on\r\n<kbd>Enter</kbd>. The input is then cleared to make room for the\r\nnext chip, and help user type a new keyword from scratch.\r\n\r\nSet to `false` when the input represents a search query over an\r\nexternal suggestion list (as in `limel-picker`), so the typed keyword\r\nsurvives while chips are added or removed (when user selects items from\r\nthe search results list, while it is open).",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "clearAllButton",
-              "description": "Whether the \"Clear all\" buttons should be shown",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "leadingIcon",
-              "description": "For chip-sets of type `input`. When the value is null, no leading icon is used.\r\nLeading icon to show to the far left in the text field",
-              "type": "any",
-              "default": "null",
-              "required": false
-            },
-            {
-              "name": "delimiter",
-              "description": "For chip-set of type `input`. Sets delimiters between chips.",
-              "type": "any",
-              "default": "null",
-              "required": false
-            },
-            {
-              "name": "autocomplete",
-              "description": "For chip-set of type `input`, defines whether the input field should have autocomplete enabled.\r\nRead more about the `autocomplete` attribute\r\n[here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).",
-              "type": "any",
-              "default": "'off'",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components. For example, the clear all chips label.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCircularProgress",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCircularProgress"
-          },
-          "description": "The circular progress component can be used to visualize the curent state of\r\na progress in a scale; for example percentage of completion of a task.\r\n\r\nIts compact UI makes the component suitable when there is not enough screen\r\nspace available to visualise such information.\r\n\r\nThis component allows you to define your scale, from `0` to a desired\r\n`maxValue`; and also lets you chose a proper `suffix` for your scale.\r\n\r\n:::note\r\nThe component will round up the value when it is displayed, and only shows\r\none decimal digit.\r\nIt also abbreviates large numbers. For example 1234 will be displayed as 1.2k.\r\nOf course such numbers, if bigger than `maxValue` will be visualized as a\r\nfull progress.\r\n:::",
-          "props": [
-            {
-              "name": "value",
-              "description": "The value of the progress bar.",
-              "type": "any",
-              "default": "0",
-              "required": false
-            },
-            {
-              "name": "maxValue",
-              "description": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`.",
-              "type": "any",
-              "default": "100",
-              "required": false
-            },
-            {
-              "name": "prefix",
-              "description": "The prefix which is displayed before the `value`, must be a few characters characters long.",
-              "type": "any",
-              "default": "null",
-              "required": false
-            },
-            {
-              "name": "suffix",
-              "description": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`",
-              "type": "any",
-              "default": "'%'",
-              "required": false
-            },
-            {
-              "name": "displayPercentageColors",
-              "description": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "size",
-              "description": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCodeDiff",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCodeDiff"
-          },
-          "description": "Displays a visual diff between two text values, modeled on\r\nGitHub's code difference view.\r\n\r\nSupports unified and split (side-by-side) views with line numbers,\r\ncolor-coded additions and removals, word-level inline highlighting,\r\nand collapsible unchanged context sections.",
-          "props": [
-            {
-              "name": "oldValue",
-              "description": "The \"before\" value to compare.\r\nCan be a string or an object (which will be serialized to JSON).",
-              "type": "any",
-              "default": "''",
-              "required": false
-            },
-            {
-              "name": "newValue",
-              "description": "The \"after\" value to compare.\r\nCan be a string or an object (which will be serialized to JSON).",
-              "type": "any",
-              "default": "''",
-              "required": false
-            },
-            {
-              "name": "oldHeading",
-              "description": "Heading for the original (before) version, displayed in the diff header.\r\nDefaults to `\"Original\"`, localized via `translationLanguage`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "newHeading",
-              "description": "Heading for the modified (after) version, displayed in the diff header.\r\nDefaults to `\"Modified\"`, localized via `translationLanguage`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "layout",
-              "description": "The layout of the diff view.\r\n- `unified` — single column with interleaved additions and removals\r\n- `split` — side-by-side comparison with old on left, new on right",
-              "type": "any",
-              "default": "'unified'",
-              "required": false
-            },
-            {
-              "name": "contextLines",
-              "description": "Number of unchanged context lines to display around each change.",
-              "type": "any",
-              "default": "3",
-              "required": false
-            },
-            {
-              "name": "lineWrapping",
-              "description": "When `true`, long lines are wrapped instead of causing\r\nhorizontal scrolling. Useful when comparing prose or\r\nconfig files with long values.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Language for syntax highlighting.\r\nCurrently supports `\"json\"`. When set, code tokens are\r\ncolorized (strings, numbers, keys, etc.) alongside the\r\ndiff highlighting.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "reformatJson",
-              "description": "When `true`, JSON values are parsed, keys are sorted,\r\nand indentation is normalized before diffing.\r\nThis eliminates noise from formatting or key-order differences.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "translationLanguage",
-              "description": "Defines the language for translations.\r\nWill translate all visible labels and announcements.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCodeEditor",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCodeEditor"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "value",
-              "description": "The code to be rendered",
-              "type": "any",
-              "default": "''",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "The language of the code",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to make the editor read-only.\r\nUse `readonly` when the editor is only there to present the data it holds,\r\nand will not become possible for the current user to edit.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the editor.\r\nUse `disabled` to indicate that the editor can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the editor may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input editor is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the field is required.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The input label.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the input field when it has focus",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "lineNumbers",
-              "description": "Displays line numbers in the editor",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "lineWrapping",
-              "description": "Wraps long lines instead of showing horizontal scrollbar",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "fold",
-              "description": "Allows the user to fold code",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "lint",
-              "description": "Enables linting of JSON content",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "colorScheme",
-              "description": "Select color scheme for the editor",
-              "type": "any",
-              "default": "'auto'",
-              "required": false
-            },
-            {
-              "name": "translationLanguage",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "showCopyButton",
-              "description": "Set to false to hide the copy button",
-              "type": "any",
-              "default": "true",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelCollapsibleSection",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelCollapsibleSection"
-          },
-          "description": "A collapsible section can be used to group related content together\r\nand hide the group when not needed.\r\nUsing this component can help to:\r\n- Save vertical space by hiding non-essential content\r\n- Improve content organization and scannability of the user interface\r\n- Reduce cognitive load by displaying only a set of relevant information at a time\r\n- Or disclose complex information, progressively to the user",
-          "props": [
-            {
-              "name": "isOpen",
-              "description": "`true` if the section is expanded, `false` if collapsed.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "header",
-              "description": "Text to display in the header of the section",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Icon to display in the header of the section",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "`true` if the section is invalid, `false` if valid.\r\nThis can be used to indicate that the content inside the section is invalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the collapsible section"
-            },
-            {
-              "name": "header",
-              "description": "Optional slot for custom header content"
-            }
-          ]
-        },
-        {
-          "name": "LimelColorPicker",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelColorPicker"
-          },
-          "description": "This component enables you to select a swatch from out color palette, simply\r\nby clicking on it. You can then copy the css variable name of the chosen color\r\nand use it where desired.\r\n\r\nThe color picker can also show you a preview of any valid color name or color value.\r\n\r\n:::note\r\nMake sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.\r\n:::",
-          "props": [
-            {
-              "name": "value",
-              "description": "Name or code of the chosen color",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The label of the input field",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Helper text of the input field",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "tooltipLabel",
-              "description": "Displayed as tooltips when picker is hovered.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` if a value is required",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the field.\r\nUse `disabled` to indicate that the field can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the field may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to make the field read-only.\r\nUse `readonly` when the field is only there to present the data it holds,\r\nand will not become possible for the current user to edit.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input field is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "placeholder",
-              "description": "The placeholder text shown inside the input field,\r\nwhen the field is focused and empty.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "manualInput",
-              "description": "Set to `false` to disallow custom color values to be typed into the input field.\r\nSetting this to `false` does not completely disable the color picker.\r\nIt will only allow users to pick from the provided color palette.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "paletteColumnCount",
-              "description": "Defines the number of columns in the color swatch grid.\r\nIf not provided, it will default to the number of colors in the palette;\r\nbut stops at a maximum of 25 columns.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelColorPickerPalette",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelColorPickerPalette"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "value",
-              "description": "Color value that is manually typed by the user",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Label of the input field",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Helper text of the input field",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "placeholder",
-              "description": "The placeholder text shown inside the input field,\r\nwhen the field is focused and empty.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` if a value is required",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input field is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "manualInput",
-              "description": "Set to `false` to disallow custom color values to be typed into the input field.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "columnCount",
-              "description": "Defines the number of columns in the color swatch grid.\r\nIf not provided, it will default to the number of colors in the palette.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelConfig",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelConfig"
-          },
-          "description": "Component used to set global configuration for Lime Elements.\r\n\r\n:::warning\r\n**Building something for Lime CRM?** Then you should _NOT_ use this component.\r\nLime CRM already uses this component to set the global configuration for\r\nLime Elements. No matter what problem you are facing at the moment, using\r\nthis component will not help, and might cause other problems.\r\n:::\r\n\r\nBuilding your own software, which is using Lime Elements?\r\nThen you _might_ need to use this component.",
-          "props": []
-        },
-        {
-          "name": "LimelDatePicker",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelDatePicker"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the field.\r\nUse `disabled` to indicate that the field can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the field may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to make the field read-only.\r\nUse `readonly` when the field is only there to present the data it holds,\r\nand will not become possible for the current user to edit.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the date picker is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Text to display next to the date picker",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "placeholder",
-              "description": "The placeholder text shown inside the input field, when the field is focused and empty",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the input field when it has focus",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the field is required.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "Type of date picker.",
-              "type": "any",
-              "default": "'datetime'",
-              "required": false
-            },
-            {
-              "name": "format",
-              "description": "Format to display the selected date in.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the localisation for translations and date formatting.\r\nProperty `format` customizes the localized date format.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelDialog",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelDialog"
-          },
-          "description": ":::note\r\nRegarding the `close` event: When putting other elements that emit `close`\r\nevents inside a dialog, those events must be caught and stopped inside the\r\ndialog. If not, they will bubble to the event handler listening for `close`\r\nevents on the dialog, which will close the dialog too.\r\n\r\nSee the example _Nested `close` events_.\r\n:::\r\n\r\n:::important\r\nAre you developing for\r\n[Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\r\nyou should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)\r\nfrom Lime Web Components to open dialogs in Lime CRM.\r\n:::",
-          "props": [
-            {
-              "name": "heading",
-              "description": "The heading for the dialog, if any.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "fullscreen",
-              "description": "Set to `true` to make the dialog \"fullscreen\".",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "open",
-              "description": "`true` if the dialog is open, `false` otherwise.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the dialog"
-            },
-            {
-              "name": "header",
-              "description": "actions   The dialog header buttons"
-            },
-            {
-              "name": "button",
-              "description": "The dialog buttons"
-            }
-          ]
-        },
-        {
-          "name": "LimelDock",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelDock"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "accessibleLabel",
-              "description": "A label used to describe the purpose of the navigation element to users\r\nof assistive technologies, like screen readers. Especially useful when\r\nthere are multiple navigation elements in the user interface.\r\nExample value: \"Primary navigation\"",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "expanded",
-              "description": "Defines the width of the component, when it loads.\r\n- `true`: shows both icons and labels of the Dock items.\r\n- `false`: only shows icons of the doc items, and displays\r\ntheir labels as tooltip.\r\n\r\nNote: when `useMobileLayout` is `true`, labels will always\r\nbe shown as tooltips. Read more below…",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "allowResize",
-              "description": "Set to `false` if you do not want to allow end-users\r\nto exapnd or shrink the Dock. This will hide the\r\nexpand/shrink button, and the only things that defines\r\nthe layout will be the `expanded` property, and\r\nthe `mobileBreakPoint`.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "mobileBreakPoint",
-              "description": "Defines the breakpoint in pixles, at which the component will be rendered\r\nin a hoizontal layout. Default breakpoint is `700` pixels, which means\r\nwhen the screen size is smaller than `700px`, the component will automatically\r\nswitch to a horizontal layout.",
-              "type": "any",
-              "default": "700",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelDockButton",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelDockButton"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "expanded",
-              "description": "When the dock is expanded or collapsed, dock items\r\nshow labels and tooltips as suitable for the layout.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "useMobileLayout",
-              "description": "When dock is using mobile layout, dock items\r\nshow labels and tooltips as suitable for the layout.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelDragHandle",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelDragHandle"
-          },
-          "description": "This component resembles a drag handle button, but is implemented\r\nas a `private` component to allow for easier styling and future extensions.\r\n\r\n:::important\r\nThis component has its `shadow` set to `false` in order to\r\nintegrate well with the drag-and-drop functionality, as well as\r\nproviding a better accessibility.\r\n\r\nKeep in mind that its styles might be affected by the consumer\r\ncomponent, due to its light dom.\r\n:::\r\n\r\n:::tip\r\nIt's recommended to place the drag handle on the right side of\r\nthe item it is meant to reorder, to ensure consistent layout\r\ndesign conventions.\r\n:::",
-          "props": [
-            {
-              "name": "dragDirection",
-              "description": "The direction in which the drag handle can be used to reorder items.",
-              "type": "any",
-              "default": "'vertical'",
-              "required": false
-            },
-            {
-              "name": "tooltipOpenDirection",
-              "description": "The preferred direction for the tooltip to open.\r\nDefaults to 'left', as our recommended placement for a drag handle\r\nin the UI is on the far right side of draggable elements.",
-              "type": "any",
-              "default": "'left'",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Language to use for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelDynamicLabel",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelDynamicLabel"
-          },
-          "description": "This components displays a different label depending on the current given\r\nvalue. A label can consist of a text and an optional icon. If no matching\r\nlabel is found among the given `labels`, the `defaultLabel` will be displayed.\r\n\r\nOne use case of the component is to enhance the visualization of a `boolean`\r\nfield like a checkbox or switch in a `readonly` state.\r\n\r\nThe reason we offer this component is that the default styling\r\nof the Checkbox or Toggle switch in the `readonly` state may not always\r\nprovide the best way of _visualizing information_, potentially leading to\r\nconfusion and negatively affecting the end-users' experience.",
-          "props": [
-            {
-              "name": "value",
-              "description": "The current value of the component which is used to match with the given\r\n`labels` to determine what label to display.\r\n\r\nIf not matching label is found, the `defaultLabel` is displayed.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelEmailViewer",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelEmailViewer"
-          },
-          "description": "This is a private component, used to render `.eml` files inside\r\n`limel-file-viewer`.\r\n\r\n:::note\r\nIf `bodyHtml` is provided, it will be rendered using `innerHTML`.\r\nConsumers should pre-sanitize `bodyHtml` before passing it to the component.\r\n:::",
-          "props": [
-            {
-              "name": "fallbackUrl",
-              "description": "Optional URL to render as a final fallback using an `<object type=\"text/plain\">`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the localization for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "allowRemoteImages",
-              "description": "Controls whether remote images (http/https) are loaded.\r\n\r\nIf omitted, the component treats this as a per-email setting.\r\nConsumers that want to remember the choice (per session/global) can\r\nprovide this prop and listen for `allowRemoteImagesChange`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelFile",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelFile"
-          },
-          "description": "This component lets end-users select a *single* file from their device\r\nstorage. Regardless of the user's device or operating system, this component\r\nopens up a file picker dialog that allows the user to choose a file.\r\n\r\n## Using correct labels\r\n\r\nThis file picker can be used in different contexts. The component's distinct\r\nvisual design including the upload icon hints end-users that this is not a\r\nnormal input field like other fields in the form for example.\r\n\r\n:::important\r\nyou need to use a descriptive `label` that clarifies the\r\nfunctionality of the file picker, and/or provides users with clear\r\ninstructions.\r\n\r\nDepending on the context, you may need to avoid labels such as:\r\n- File\r\n- Document\r\n\r\nand instead consider using labels like:\r\n- Attach a file\r\n- Upload a file\r\n- Choose a document\r\n- Choose a file\r\n\r\nand similar phrases...\r\n:::",
-          "props": [
-            {
-              "name": "label",
-              "description": "The input label.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the component.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the field is required.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "True if the input should be disabled",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to disable adding and removing files, but allow interaction\r\nwith any already existing file.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the chosen file is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to put the component in the `loading` state, and render an\r\nindeterminate progress indicator. This does _not_ disable the\r\ninteractivity of the component!",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "accept",
-              "description": "The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)",
-              "type": "any",
-              "default": "'*'",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the localisation for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelFileDropzone",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelFileDropzone"
-          },
-          "description": "This component enables you to seamlessly convert any region of the user interface into\r\na file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\r\n\r\nThe file dropzone can then be used to allow end-users to upload files\r\nby dragging and dropping them into the specified area, for example to trigger an upload process.\r\n\r\nAfter receiving the files, the component emits a `filesSelected` event. For unsupported\r\nfiles (specified with the `accept` prop) a `filesRejected` event will be emitted.\r\n\r\nThe event detail would be an array of `FileInfo` objects,\r\neach representing a file dropped into the dropzone.",
-          "props": [
-            {
-              "name": "accept",
-              "description": "Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\r\n\r\nFor media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\r\nUnique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\r\nA comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\r\n`.png, .jpg, .jpeg`.",
-              "type": "any",
-              "default": "'*'",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the file dropzone.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "text",
-              "description": "Is displayed when the user is dragging a file over the dropzone.\r\nA suitable text could for instance be \"Drop your files here\".",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Is displayed to provide supplementary information to the end users,\r\nfor instance, which filetypes or file sizes are accepted.",
-              "type": "any",
-              "default": "''",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelFileInput",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelFileInput"
-          },
-          "description": "This component enables you to seamlessly transform any other clickable component that\r\ngenerates a `click` event into a file input selector.\r\n\r\nTo use it, just wrap any clickable component inside the `limel-file-input` component.\r\nUpon reception of the `click` event this component will open the native file selection\r\ndialog.\r\n\r\nAfter receiving the files, the component emits a `filesSelected` event.\r\n\r\nThe event detail would be an array of `FileInfo` objects,\r\neach representing a file dropped into the dropzone.",
-          "props": [
-            {
-              "name": "accept",
-              "description": "Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\r\n\r\nFor media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\r\nUnique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\r\nA comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\r\n`.png, .jpg, .jpeg`.",
-              "type": "any",
-              "default": "'*'",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable file input selection.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "multiple",
-              "description": "Set to `true` to enable selection of multiple files",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelFileViewer",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelFileViewer"
-          },
-          "description": "This is a smart component that automatically detects\r\nthe most common file types such as image, audio, video, and text,\r\nand properly displays them in the browser.\r\nThe component is also capable to render the most common office files.\r\n\r\n:::note\r\nImage files will always be contained in their containers, which means\r\nthey automatically increase or decrease in size to fill their containing box\r\nwhilst preserving their aspect-ratio.\r\n\r\nText and PDF files will also always respect the width and height of the\r\ncontainer in which the `limel-file-viewer` is loaded.\r\n:::\r\n\r\nFor some file types such as text and images, the component will display a\r\ndownload button and a button to open the file in a new browser tab.\r\nThis will allow users to preview the file in a fullscreen mode with the\r\nbrowser and take advantage of for example native zooming and panning\r\nfunctionalities.",
-          "props": [
-            {
-              "name": "url",
-              "description": "Link to the file",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "filename",
-              "description": "The name of the file that must also contains its extension.\r\nThis overrides the filename that the `url` ends with.\r\nUseful when the `url` does not contain the filename.\r\nWhen specified, the `filename` will be used as filename of\r\nthe downloaded file.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "alt",
-              "description": "An optional alternative text, mainly for assistive technologies and screen readers.\r\nIt is used for only image files, as an `alt` attribute.\r\nShould optimally hold a description of the image,\r\nwhich is also displayed on the page if the image can't be loaded for some reason.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "allowFullscreen",
-              "description": "Displays a button that allows the user to view the file\r\nin fullscreen mode.\r\nNot displayed for office files!",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "allowOpenInNewTab",
-              "description": "Displays a button that allows the user to open the file\r\nin a new browser tab.\r\nNot displayed for office files!",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "allowDownload",
-              "description": "Displays a button that allows the user to download the file.\r\nNote that due to the browser's security policies,\r\nthe file should be hosted on the same domain\r\nfor the download button to work properly.\r\nNot displayed for office files!",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the localization for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "officeViewer",
-              "description": "Defines the third-party viewer that should be used to render\r\nthe content of office files, such as word processing documents,\r\npresentations, or spreadsheets.",
-              "type": "any",
-              "default": "'microsoft-office'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelFlatpickrAdapter",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelFlatpickrAdapter"
-          },
-          "description": "This component is internal and only supposed to be used by\r\nthe limel-date-picker. This component is needed in order for us\r\nto render the flatpickr calendar in a portal.",
-          "props": [
-            {
-              "name": "type",
-              "description": "Type of date picker.",
-              "type": "any",
-              "default": "'datetime'",
-              "required": false
-            },
-            {
-              "name": "format",
-              "description": "Format to display the selected date in.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "isOpen",
-              "description": "Set to `true` if the calendar should be open.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the localisation for translations and date formatting.\r\nProperty `format` customizes the localized date format.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelFlexContainer",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelFlexContainer"
-          },
-          "description": "This component is deprecated and will be removed in a future version of\r\nLime Elements. Please use CSS for your flexible container needs 🙂\r\nhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox",
-          "props": [
-            {
-              "name": "direction",
-              "description": "Direction of the main axis",
-              "type": "any",
-              "default": "'horizontal'",
-              "required": false
-            },
-            {
-              "name": "justify",
-              "description": "Specify how items are aligned along the main axis",
-              "type": "any",
-              "default": "'space-between'",
-              "required": false
-            },
-            {
-              "name": "align",
-              "description": "Specify how items are aligned along the cross axis",
-              "type": "any",
-              "default": "'center'",
-              "required": false
-            },
-            {
-              "name": "reverse",
-              "description": "Reverse the order of the items",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Container content"
-            }
-          ]
-        },
-        {
-          "name": "LimelForm",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelForm"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the whole form.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "revealErrors",
-              "description": "Set to `true` to render every field with a validation error as\r\ninvalid, even untouched ones, and to reflect that on each\r\ncontaining collapsible section's header. Defaults to `false`,\r\nwhich keeps untouched required-empty fields silent.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelGrid",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelGrid"
-          },
-          "description": "This component is deprecated and will be removed in a future version of\r\nLime Elements. Please use CSS for your flexible container needs 🙂",
-          "props": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Grid content"
-            }
-          ]
-        },
-        {
-          "name": "LimelHeader",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelHeader"
-          },
-          "description": "A header is the top most visual element in a component, page, card, or a view.\r\n\r\n## Usage\r\nA header is the first thing that clarifies a context for users.\r\nDue to their positions in the UI hierarchy, headers are the most\r\nprominent elements of a user interface; and because of that, they carry both\r\nvital information and fundamental controls for the area of the interface\r\nthey represent.\r\n\r\nFor example, when a header is placed on top of a card, it should quickly\r\nexplain the card to the user. When placed on top of a modal, it should easily\r\nclarify what the modal is about. When displayed on top of a fullscreen view,\r\nit should indicate where in the system users are, and what part of the app\r\nthey are looking at.\r\n\r\n\r\n## Layout\r\nThe vital information in a header is usually manifested in form of an icon,\r\nand a heading. A subheading also could be added to provide supplementary\r\ninformation. There is also a third place for displaying supplementary information\r\nor \"supporting text\", which will be rendered as a part of the subheading.\r\nAlong with this information, headers can also include actions, controls, or\r\nmenus.\r\n\r\n:::important\r\nSuch actions or menus must affect the entire section of the interface\r\nwhich the header is representing. For example, a _Delete_ button on a card\r\nheader must delete that entire card and its respective contents all together,\r\nnot for example a selected item which is visible in the content of that card.\r\n:::\r\n\r\n\r\n:::warning\r\nDo not user background color on icons in the headers. It is much better and\r\nmuch easier for the eye if your icon itself has a color.\r\nBackground colors behind icons make them look like \"call to action\" buttons\r\nand take a lot of attention from users.\r\n:::",
-          "props": [
-            {
-              "name": "icon",
-              "description": "Icon to display",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "heading",
-              "description": "Title to display",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "subheading",
-              "description": "Subheading to display",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "supportingText",
-              "description": "An extra string of text to display along with with the Subheading",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "subheadingDivider",
-              "description": "The visual divider that separates the `subheading` and the `supportingText`.\r\nIt must be a single character such as `-` or `,`.",
-              "type": "any",
-              "default": "'·'",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "actions",
-              "description": "Content (actions) to be put inside the far right surface of\r\nthe header"
-            },
-            {
-              "name": "[no name]",
-              "description": "DEPRECATED. The `actions` slot used to be unnamed. This\r\nbehavior has been deprecated, and support will be dropped in a future\r\nversion. Please add `slot=\"actions\"` to your elements to ensure your code\r\nwill continue to work with future versions of Lime Elements."
-            }
-          ]
-        },
-        {
-          "name": "LimelHelp",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelHelp"
-          },
-          "description": "A good design is self-explanatory! However, sometimes concepts are\r\ntoo complex to understand, no matter how well-designed a user interface is.\r\nIn such cases, contextual help can be a great way to provide users with\r\nhelp precisely where and when users need it.\r\n\r\nIn app interface design, providing contextual help emerges as a viable practice\r\nfor enhancing user experience and usability.\r\nContextual help serves as a quick-to-access guiding,\r\nempowering users to more easily understand and navigate through\r\nthe intricacies of an application.\r\n\r\nUsing this component designers empower users to grasp the functionality\r\nof an app more effortlessly, minimizes the learning curve,\r\ntransforming complex features into accessible opportunities for exploration.",
-          "props": [
-            {
-              "name": "value",
-              "description": "{@inheritdoc Help.value}",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "trigger",
-              "description": "{@inheritdoc Help.trigger}",
-              "type": "any",
-              "default": "'?'",
-              "required": false
-            },
-            {
-              "name": "openDirection",
-              "description": "{@inheritdoc Help.openDirection}",
-              "type": "any",
-              "default": "'top-start'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelHelpContent",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelHelpContent"
-          },
-          "description": "Help content\r\nThis is scrollable content that is placed in the popover of the Help component.\r\nMoved here mostly to avoid having inlined styles in the parent component.\r\nSince you cannot send styles to the Portal component, we need to have this\r\nchild component.",
-          "props": [
-            {
-              "name": "value",
-              "description": "",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelHelperLine",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelHelperLine"
-          },
-          "description": "This is an internal and private component that many input fields\r\nuse to display a helper text, along with a character counter below the\r\ninput field.\r\n\r\nWe created this to keep the visual styles the same everywhere\r\nand to avoid importing styles separately.\r\n\r\nAlso this enables us to open the helper line in limel-portal,\r\nmore easily without having to send the styles to the portal.",
-          "props": [
-            {
-              "name": "helperText",
-              "description": "The helper text that is displayed on the left side.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "length",
-              "description": "Length of the current input value, coming from the parent component.\r\nUsed in the character counter section on the right side.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "maxLength",
-              "description": "Maximum length of the characters, defined on the parent component.\r\nUsed in the character counter section on the right side.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Turns `true`, when the parent component is invalid.\r\nFor example, when the parent component is `required` but is left empty.\r\nOr when the input format is invalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "helperTextId",
-              "description": "Used by `aria-controls` and `aria-describedby` in the parent component.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelHotkey",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelHotkey"
-          },
-          "description": "This is a display-only component used to visualize keyboard shortcuts.\r\nIt renders hotkey strings as styled `<kbd>` elements with\r\nplatform-aware glyphs (e.g. `⌘` on macOS, `⊞ Win` on Windows).\r\n\r\nIt does **not** listen for or handle any keyboard events.\r\nKeyboard event handling is the responsibility of the parent component\r\n(e.g. `limel-menu` or `limel-select`).",
-          "props": [
-            {
-              "name": "value",
-              "description": "The hotkey string to visualize, e.g. `\"meta+c\"` or `\"shift+enter\"`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "When `true`, the hotkey is rendered in a visually disabled state.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelIcon",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelIcon"
-          },
-          "description": ":::important\r\nTo install your icon set correctly, please read the [documentation here](#/).\r\n:::\r\n\r\nThe size and color of the icon is normally set in CSS, however there are a few\r\nstandard sizes defined that can be used with the `size` property.",
-          "props": [
-            {
-              "name": "size",
-              "description": "Size of the icon",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "name",
-              "description": "Name of the icon",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "badge",
-              "description": "Set to `true` to give the icon a round background with some padding.\r\nOnly works when the `size` attribute is also set.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "svgClass",
-              "description": "Sets the `class` attribute on the inner `<svg>` element rendered by\r\nthis component, replacing whatever class the source SVG shipped with.\r\n\r\nThis is meant for icons whose SVG file contains internal `<style>`\r\nblocks with rules that respond to classes — a single file that ships\r\nwith multiple visual states selectable via class names. Setting\r\n`svgClass` is how a consumer reaches across the shadow boundary to\r\npick which of those states is active.\r\n\r\nFor typical stateless icons, this prop has no visible effect.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelIconButton",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelIconButton"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "icon",
-              "description": "The icon to display.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "elevated",
-              "description": "Set to `true` to give the button our standard \"elevated\" look, lifting\r\nit off the flat layout.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The text to show to screenreaders and other assistive tech.\r\nIt is also displayed as a tooltip when the user hovers\r\nor focuses the button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperLabel",
-              "description": "Additional helper text for the tooltip.\r\nExample usage can be a keyboard shortcut to activate\r\nthe function of the button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the button.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelInfoTile",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelInfoTile"
-          },
-          "description": "This component can be used on places such as a start page or a dashboard.\r\nIt offers features for visualizing aggregated data along with supplementary\r\ninformation.\r\n\r\nIf clicking on the component should navigate the user to\r\na new screen or web page, you need to provide a URL,\r\nusing the `link` property.",
-          "props": [
-            {
-              "name": "value",
-              "description": "A piece of text or number that is the main piece of information\r\nwhich the component is intended to visualize.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Name of icon for the info tile.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The text to show below the info tile. Long labels will be truncated.",
-              "type": "any",
-              "default": "null",
-              "required": false
-            },
-            {
-              "name": "prefix",
-              "description": "A string of text that is visually placed before the value.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "suffix",
-              "description": "A string of text that is visually placed after the value.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` if info tile is disabled.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "reducedPresence",
-              "description": "Set to `true` to render the tile with a reduced visual presence —\r\nlower saturation and opacity, so the tile draws less attention.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "badge",
-              "description": "If supplied, the info tile will display a notification badge.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to put the component in the `loading` state.\r\nThis does _not_ disable the link. To do so, the\r\n`disabled` property should be set to `true` as well.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelInputField",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelInputField"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the field.\r\nUse `disabled` to indicate that the field can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the field may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to make the field read-only.\r\nUse `readonly` when the field is only there to present the data it holds,\r\nand will not become possible for the current user to edit.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input field is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The input label.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "placeholder",
-              "description": "The placeholder text shown inside the input field, when the field is focused and empty.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the input field when it has focus",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "prefix",
-              "description": "A short piece of text to display before the value inside the input field.\r\nDisplayed for all types except `textarea`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "suffix",
-              "description": "A short piece of text to display after the value inside the input field.\r\nDisplayed for all types except `textarea`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the field is required.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "The value of the field.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "trailingIcon",
-              "description": "Trailing icon to show to the far right in the field.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "leadingIcon",
-              "description": "Leading icon to show to the far left in the field.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "pattern",
-              "description": "Regular expression that the current value of the input field must match.\r\nNo forward slashes should be specified around the pattern.\r\nOnly used if type is `text`, `tel`, `email`, `url`, `urlAsText`,\r\n`password`, or `search`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "Type of input.\r\n\r\nNote** regarding type `url`: `limel-input` uses the native validation\r\nbuilt into the browser for many types of input fields. The native\r\nvalidation for `url` is very strict, and does not allow relative urls,\r\nnor any other formats that are not a \"fully qualified\" url. To allow\r\nsuch urls, use the type `urlAsText` instead. `urlAsText` works exactly\r\nlike `text` in all regards, except that it enables use of the `showLink`\r\nproperty.",
-              "type": "any",
-              "default": "'text'",
-              "required": false
-            },
-            {
-              "name": "formatNumber",
-              "description": "Set to `true` to format the current value of the input field only\r\nif the field is of type number.\r\nThe number format is determined by the current language of the browser.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "step",
-              "description": "Defines which numeric values are valid and the increment/decrement interval.\r\nFor example, `step={0.1}` allows decimals and steps by 0.1.\r\nSet to `'any'` to allow any numeric value.\r\nOnly applies when `type` is `number`.",
-              "type": "any",
-              "default": "'any'",
-              "required": false
-            },
-            {
-              "name": "max",
-              "description": "Maximum allowed value if input type is `number`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "min",
-              "description": "Minimum allowed value if input type is `number`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "maxlength",
-              "description": "Maximum length of the value if type is `password`, `search`, `tel`,\r\n`text`, `url`, or `urlAsText`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "minlength",
-              "description": "Minimum length of the value if type is `password`, `search`, `tel`,\r\n`text`, `url`, or `urlAsText`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "showLink",
-              "description": "For inputs of type `email`, `tel`, `url`, and `urlAsText`, set this to\r\n`true` to show a trailing icon with a `mailto:`,`tel:`, or normal link,\r\nrespectively. The default icon can be overridden using the `trailingIcon`\r\nproperty.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "locale",
-              "description": "The locale to use for formatting numbers.",
-              "type": "any",
-              "default": "globalConfig.defaultLocale",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelLinearProgress",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelLinearProgress"
-          },
-          "description": "The linear progress component can be used to visualize the current state of a progress in a scale;\r\nfor example percentage of completion of a task.",
-          "props": [
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "The value of the progress bar. Should be between `0` and `1`.",
-              "type": "any",
-              "default": "0",
-              "required": false
-            },
-            {
-              "name": "indeterminate",
-              "description": "Puts the progress bar in an indeterminate state",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "accessibleLabel",
-              "description": "A label used to describe the purpose of the element to users\r\nof assistive technologies, like screen readers.\r\nIf not provided, the generic word of \"Progress bar\" will be used.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelList",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelList"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "badgeIcons",
-              "description": "Set to `true` if the list should display larger icons with a background",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "iconSize",
-              "description": "Size of the icons in the list",
-              "type": "any",
-              "default": "'small'",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "The type of the list, omit to get a regular list. Available types are:\r\n`selectable`: regular list with single selection.\r\n`radio`: radio button list with single selection.\r\n`checkbox`: checkbox list with multiple selection.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "maxLinesSecondaryText",
-              "description": "By default, lists will display 3 lines of text, and then truncate the rest.\r\nConsumers can increase or decrease this number by specifying\r\n`maxLinesSecondaryText`. If consumer enters zero or negative\r\nnumbers we default to 1; and if they type decimals we round up.",
-              "type": "any",
-              "default": "3",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelListItem",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelListItem"
-          },
-          "description": "This components displays the list item.\r\nThis centralizes styles and functionality, and helps reduce redundant code\r\nin consumer components such as `limel-list` and `limel-menu-list`.\r\n\r\n:::note\r\nThe component has `shadow: false`. There are a few reasons for it:\r\n1. This is to improve performance, and ensure that its internal elements are\r\nconsidered as internal parts of the consumer's DOM.\r\n2. The consumer does not need to implement the interactive styles\r\n(such as `visualize-keyboard-focus` mixin) on their own. Since there is no\r\nshadow DOM, our mixins can be applied directly to the `limel-list-item` elements,\r\nwithin the component's own styles.\r\n3. Most importantly, the MDCList checks the light DOM of each list item\r\nto find native inputs to decide the list mode (checkbox/radio).\r\nWith `shadow: true`, those inputs would be hidden inside the `limel-list-items`’s\r\nshadow DOM, so MDC wouldn’t detect them and therefore throw errors, when given\r\nan array index (for the items).\r\nWith `shadow: false`, the native `<input type=\"checkbox/radio\">` from this template\r\nwould be visible to MDC.\r\n:::",
-          "props": [
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "{@inheritdoc ListItem.value}",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "text",
-              "description": "{@inheritdoc ListItem.text}",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "secondaryText",
-              "description": "{@inheritdoc ListItem.secondaryText}",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "{@inheritdoc ListItem.disabled}",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "{@inheritdoc ListItem.icon}",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "iconSize",
-              "description": "Size of the icon displayed for this item.",
-              "type": "any",
-              "default": "'small'",
-              "required": false
-            },
-            {
-              "name": "badgeIcon",
-              "description": "Set to `true` if the list should display larger icons with a background",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "selected",
-              "description": "{@inheritdoc ListItem.selected}",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "type",
-              "description": "The semantic role of the list item. This affects the ARIA role\r\nand the interaction behavior.\r\n\r\n- 'option' → selectable via click/Enter/Space, aria-selected\r\n- 'radio'/'checkbox' → selectable, aria-checked\r\n- 'menuitem'/'listitem' → activation only, no selection toggle",
-              "type": "any",
-              "default": "'listitem'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelMarkdown",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelMarkdown"
-          },
-          "description": "The Markdown component receives markdown syntax\r\nand renders it as HTML.\r\n\r\nA built-in set of lime-elements components is whitelisted by default\r\nand can be used directly in markdown content without any configuration.\r\nConsumers can extend this list via the `whitelist` prop or `limel-config`.\r\n\r\nWhen custom elements use JSON attribute values, any URL-bearing\r\nproperties (`href`, `src`, `cite`, `longDesc`) are automatically\r\nsanitized using the same protocol allowlists as rehype-sanitize.\r\nURLs with dangerous schemes (e.g. `javascript:`, `data:`) are\r\nremoved (with a console warning) to prevent script injection.",
-          "props": [
-            {
-              "name": "value",
-              "description": "The input text. Treated as GitHub Flavored Markdown, with the addition\r\nthat any included HTML will be parsed and rendered as HTML, rather than\r\nas text.",
-              "type": "any",
-              "default": "''",
-              "required": false
-            },
-            {
-              "name": "lazyLoadImages",
-              "description": "Enable lazy loading for images",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "removeEmptyParagraphs",
-              "description": "Set to `false` to preserve empty paragraphs before rendering.\r\nEmpty paragraphs are paragraphs that do not contain\r\nany meaningful content (text, images, etc.), or only contain\r\nwhitespace (`<br />` or `&nbsp;`).",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "adaptColorContrast",
-              "description": "Adapt rendered inline `color:` declarations to the surrounding\r\nsurface. After each markdown re-render the component walks the\r\nrendered DOM and removes any inline `color` whose contrast against\r\nthe resolved background falls below WCAG 3:1, letting the surface's\r\nthemed text color inherit through. Brand colors that already meet\r\ncontrast are left alone.\r\n\r\nDefault `false` so the component remains a neutral renderer; turn\r\nthis on for surfaces that render externally-authored content\r\n(e.g. imported email bodies) where the host application's theme\r\ndrives the surrounding text color.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelMasonryLayout",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelMasonryLayout"
-          },
-          "description": "A responsive masonry grid layout component.\r\n\r\nThis component arranges slotted elements into a masonry-style grid,\r\nwhere items are placed in the shortest column, resulting in a\r\nPinterest-like layout with minimal vertical gaps.\r\n\r\nThe component uses JavaScript to calculate positions, providing\r\nreliable cross-browser support — unlike CSS-only approaches such as\r\n`columns` or `grid-template-rows: masonry`, which have limited\r\nbrowser support or produce poor results.\r\n\r\nThe number of columns is determined automatically based on the\r\navailable width and the minimum column width.",
-          "props": [
-            {
-              "name": "ordered",
-              "description": "When `true`, items are placed left-to-right in DOM order.\r\nWhen `false` (default), items are placed in the shortest column.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Items to arrange in the masonry layout"
-            }
-          ]
-        },
-        {
-          "name": "LimelMenu",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelMenu"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Sets the disabled state of the menu.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "openDirection",
-              "description": "Decides the menu's location in relation to its trigger",
-              "type": "any",
-              "default": "'bottom-start'",
-              "required": false
-            },
-            {
-              "name": "surfaceWidth",
-              "description": "Decides the width of menu's dropdown",
-              "type": "any",
-              "default": "'inherit-from-items'",
-              "required": false
-            },
-            {
-              "name": "open",
-              "description": "Sets the open state of the menu.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "badgeIcons",
-              "description": "Defines whether the menu should show badges.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "gridLayout",
-              "description": "Renders list items in a grid layout, rather than a vertical list",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": ":::warning Internal Use Only\r\nThis property is for internal use only. We need it for now, but want to\r\nfind a better implementation of the functionality it currently enables.\r\nIf and when we do so, this property will be removed without prior\r\nnotice. If you use it, your code _will_ break in the future.\r\n:::",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "searchPlaceholder",
-              "description": "Placeholder text for the search input field.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "emptyResultMessage",
-              "description": "Message to display when search returns 0 results.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "keepOpenOnSelect",
-              "description": "When `true`, the menu stays open after an item is selected.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "trigger",
-              "description": "Element to use as a trigger for the menu."
-            }
-          ]
-        },
-        {
-          "name": "LimelMenuItemMeta",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelMenuItemMeta"
-          },
-          "description": "Meta content for menu list items\r\n\r\nThis sub-component is intended to be passed as `primaryComponent`\r\nto `limel-list-item`, when it is used in the menu list.\r\nIt includes command text, badge, and chevron, which are the\r\nfeatures of menu list items.",
-          "props": [
-            {
-              "name": "commandText",
-              "description": "Use to display optional keyboard shortcut or command hint, e.g. `⌘ + K`",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "hotkey",
-              "description": "Hotkey to display. When provided, `commandText` is ignored.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Will be set to `true` when the menu item is disabled.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "badge",
-              "description": "Optional badge value",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "showChevron",
-              "description": "Shows a submenu chevron to indicate nested items",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelMenuList",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelMenuList"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "badgeIcons",
-              "description": "Set to `true` if the list should display larger icons with a background",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "iconSize",
-              "description": "Size of the icons in the list",
-              "type": "any",
-              "default": "'small'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelMenuSurface",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelMenuSurface"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "open",
-              "description": "True if the menu surface is open, false otherwise",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the surface"
-            }
-          ]
-        },
-        {
-          "name": "LimelNotchedOutline",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelNotchedOutline"
-          },
-          "description": "This is a private component, used to render a notched outline\r\naround all input elements that can have a floating label.\r\nInspired by Material Design's styles for input fields.\r\nWe use it in various components to unify styles and avoid\r\nrepeating code.\r\n\r\n:::note\r\nThe component has `shadow: false`. This is to improve performance,\r\nand ensure that its internal elements are considered as internal parts\r\nof the consumer's DOM. This way, the value `for` in `<label for=\"id-of-input-element\">`\r\nwould be correctly associated with the input element's `id`, in the consumer component.\r\n:::",
-          "props": [
-            {
-              "name": "required",
-              "description": "Set to `true` when the input element is required.\r\nThis applies proper visual styles, such as inclusion of an asterisk\r\nbeside the label.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` when the input element is readonly.\r\nThis applies proper visual styles, such as making the outline transparent.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input element is\r\ninvalid. This applies proper visual styles, such as making the outlines red.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to indicate that the input element is\r\ndisabled. This applies proper visual styles, such as making the outlines\r\nand the label transparent.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Label to display for the input element.\r\n:::important\r\nNote that the input element of the consumer component will be\r\nlabeled by this label, using the `labelId` prop.\r\n:::",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "labelId",
-              "description": "The `id` of the input element which should be\r\nlabeled by the provided label.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "hasValue",
-              "description": "Set to `true` when the user has entered a value for the input element,\r\nshrinking the label in size, and visually rendering it above the entered value.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "hasLeadingIcon",
-              "description": "Set to `true` when the consumer element displays a leading icon.\r\nThis applies proper visual styles, such as rendering the label\r\ncorrectly placed beside the leading icon.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "hasFloatingLabel",
-              "description": "Set to `true` when the consumer element needs to render the\r\nlabel above the input element, despite existence of a `value`.\r\nFor example in the `text-editor` or `limel-select`,\r\nwhere the default layout requires a floating label.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelPicker",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelPicker"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "True if the picker should be disabled",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to disable adding and removing items,\r\nbut allow interaction with existing items.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Text to display for the input field of the picker",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "searchLabel",
-              "description": "Search label to display in the input field when searching",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the input field when it has focus",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "leadingIcon",
-              "description": "Leading icon to show to the far left in the text field",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "emptyResultMessage",
-              "description": "A message to display when the search returned an empty result.\r\n\r\nIf unset (or set to an empty string), the picker shows a\r\ndefault translated message (`No results matching \"X\"` in\r\nEnglish, where `X` is the current query) chosen by the\r\n`language` prop. Set this to override the default with custom\r\ntext — for example, when the picker's domain calls for more\r\nspecific wording like \"No matching participants found\".",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations. Affects the labels\r\nrendered by the picker itself, such as the \"Results matching\"\r\nheader shown above the suggestion list while the user is typing.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "True if the control requires a value",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the input field is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "multiple",
-              "description": "True if multiple values are allowed",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "delimiter",
-              "description": "Sets delimiters between chips. Works only when `multiple` is `true`.",
-              "type": "any",
-              "default": "null",
-              "required": false
-            },
-            {
-              "name": "actionPosition",
-              "description": "Position of the custom static actions in the picker's results dropdown.\r\nCan be set to `'top'` or `'bottom'`.",
-              "type": "any",
-              "default": "'bottom'",
-              "required": false
-            },
-            {
-              "name": "actionScrollBehavior",
-              "description": "Scroll behavior of the custom static actions, when user scrolls\r\nin the picker's results dropdown. Can be set to `'scroll'` which means\r\nthe action items will scroll together with the list, or `'sticky'` which\r\nretains their position at the top or bottom of the drop down while\r\nscrolling.",
-              "type": "any",
-              "default": "'sticky'",
-              "required": false
-            },
-            {
-              "name": "badgeIcons",
-              "description": "Whether badge icons should be used in the result list or not",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelPopover",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelPopover"
-          },
-          "description": "A popover is an impermanent layer that is displayed on top of other content\r\nwhen user taps an element that triggers the popover. This element can be\r\npractically anything, a button, piece of text, and icon, etc.\r\n\r\nPopovers are nonmodal, thus they don't have a semi-transparent backdrop layer\r\nthat darkens the content below them. Also for the same reason, they can be\r\ndismissed by tapping or clicking another part of the screen, but not by a\r\nclicking a button or link on the popover itself.\r\n\r\n## Usage\r\nUse a popover to show **options** or **information** related to the trigger\r\nonscreen. A typical use case for popovers is a tooltip, in which you show\r\nhelp text or contextual information to users.\r\n\r\nPopovers are most appropriate on larger screens but can be used on smaller\r\nscreens too, as long as their content is responsive and takes into account\r\nthe context they are displayed on.\r\n\r\nWhen a popover is displayed, interactions with other controls are blocked,\r\nuntil user dismisses the popover.\r\n\r\n\r\n## Layout\r\nPopovers has only one slot in which you can import a custom web-component.\r\n\r\n:::note\r\nYou must make sure that web-components that you import into the slot has\r\na `width: 100%;` style so that it can horizontally stretch across the popover.\r\n\r\nHowever, `width` of the popover can be controlled by specifying a CSS variable\r\nof `--popover-surface-width`. If you don't specify any width, the popover\r\nwill grow as wide as its content.\r\n:::\r\n\r\n:::important\r\nDo not make a popover too big. They should never take over the entire screen.\r\nIf your content is that big, you should probably be using a Modal instead.\r\n:::",
-          "props": [
-            {
-              "name": "open",
-              "description": "True if the content within the popover should be visible",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "openDirection",
-              "description": "Decides the popover's location in relation to its trigger",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the surface"
-            }
-          ]
-        },
-        {
-          "name": "LimelPopoverSurface",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelPopoverSurface"
-          },
-          "description": "",
-          "props": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the surface"
-            }
-          ]
-        },
-        {
-          "name": "LimelPortal",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelPortal"
-          },
-          "description": "The portal component provides a way to render children into a DOM node that\r\nexist outside the DOM hierarchy of the parent component.\r\n\r\nWhen the limel-portal component is used, it creates a new DOM node (a div element)\r\nand appends it to a parent element (by default, the body of the document).\r\nThe child elements of the limel-portal are then moved from\r\ntheir original location in the DOM to this new div element.\r\n\r\nThis technique is often used to overcome CSS stacking context issues,\r\nor to render UI elements like modals, dropdowns, tooltips, etc.,\r\nthat need to visually \"break out\" of their container.\r\n\r\nUsing this component, we ensure that the content is always rendered in the\r\ncorrect position, and never covers its own trigger, or another component\r\nthat is opened in the stacking layer. This way, we don't need to worry about\r\nz-indexes, or other stacking context issues.\r\n\r\n:::important\r\nThere are some caveats when using this component\r\n\r\n1. Events might not bubble up as expected since the content is moved out to\r\nanother DOM node.\r\n2. Any styling that is applied to content from the parent will be lost, if the\r\ncontent is just another web-component it will work without any issues.\r\nAlternatively, use the `style=\"\"` html attribute.\r\n3. Any component that is placed inside the container must have a style of\r\n`max-height: inherit`. This ensures that its placement is calculated\r\ncorrectly in relation to the trigger, and that it never covers its own\r\ntrigger.\r\n4. When the node is moved in the DOM, `disconnectedCallback` and\r\n`connectedCallback` will be invoked, so if `disconnectedCallback` is used\r\nto do any tear-down, the appropriate setup will have to be done again on\r\n`connectedCallback`.\r\n:::",
-          "props": [
-            {
-              "name": "openDirection",
-              "description": "Decides which direction the portal content should open.",
-              "type": "any",
-              "default": "'bottom'",
-              "required": false
-            },
-            {
-              "name": "position",
-              "description": "Position of the content.",
-              "type": "any",
-              "default": "'absolute'",
-              "required": false
-            },
-            {
-              "name": "containerId",
-              "description": "A unique ID.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "inheritParentWidth",
-              "description": "Used to make a dropdown have the same width as the trigger, for example\r\nin `limel-picker`.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "visible",
-              "description": "True if the content within the portal should be visible.\r\n\r\nIf the content is from within a dialog for instance, this can be set to\r\ntrue from false when the dialog opens to position the content properly.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the portal"
-            }
-          ]
-        },
-        {
-          "name": "LimelProfilePicture",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelProfilePicture"
-          },
-          "description": "This component displays a profile picture, while allowing the user\r\nto change it via a file input or drag-and-drop.\r\n\r\nIt supports client-side image resizing and conversion,\r\nas well as a simple lazy-loading mechanism.",
-          "props": [
-            {
-              "name": "language",
-              "description": "Defines the language for translations.\r\nWill translate the translatable strings on the components.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Accessible label for the the browse button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Placeholder icon of the component, displayed when no image is present.",
-              "type": "any",
-              "default": "'user'",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Helper text shown as a tooltip on hover or focus.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Disables user interaction.\r\nPrevents uploading new pictures or removing existing ones.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Readonly prevents changing the value but allows interaction like focus.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Marks the control as required.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Marks the control as invalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to put the component in the `loading` state,\r\nand render an indeterminate progress indicator inside.\r\nThis does _not_ disable the interactivity of the component!",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "Current image to display. Either a URL string or a `FileInfo` with an href.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "imageFit",
-              "description": "How the image should fit within the container.\r\n- `cover` will fill the container and crop excess parts.\r\n- `contain` will scale the image to fit within the container without cropping.",
-              "type": "any",
-              "default": "'cover'",
-              "required": false
-            },
-            {
-              "name": "accept",
-              "description": "A comma-separated list of accepted file types.",
-              "type": "any",
-              "default": "'image/jpeg,image/png,image/heic,.jpg,.jpeg,.png,.heic'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelProgressFlow",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelProgressFlow"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the progress flow.\r\nUse `disabled` to indicate that the component can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the field may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Disables the progress flow when `true`.\r\nThis does not visualize the component that much differently.\r\nBut since the component does not provide any feedback that users can\r\ninteract with the component, it makes it perfect for illustrative and\r\ninformative porpuses.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelProgressFlowItem",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelProgressFlowItem"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "True if the flow item should be disabled",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "True if the flow item should be readonly",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "currentStep",
-              "description": "True for current step",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelProsemirrorAdapter",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelProsemirrorAdapter"
-          },
-          "description": "The ProseMirror adapter offers a rich text editing experience with markdown support.\r\n[Read more...](https://prosemirror.net/)",
-          "props": [
-            {
-              "name": "contentType",
-              "description": "The type of content that the editor should handle and emit, defaults to `markdown`\r\n\r\nAssumed to be set only once, so not reactive to changes",
-              "type": "any",
-              "default": "'markdown'",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "The value of the editor, expected to be markdown",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the field.\r\nUse `disabled` to indicate that the field can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the field may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "ui",
-              "description": "Specifies the visual appearance of the editor.",
-              "type": "any",
-              "default": "'standard'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelRadioButton",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelRadioButton"
-          },
-          "description": "This is a low-level private component that renders individual radio button elements.\r\nIt's used internally by the list-item component to render radio buttons when\r\n`type=\"radio\"` is specified.\r\n\r\n## Usage in the Library\r\n\r\nThis template is primarily used by:\r\n- `limel-list` component when `type=\"radio\"`\r\n- `limel-radio-button-group` component (which wraps `limel-list`)\r\n\r\n## Why This Exists\r\n\r\nWhile we have `limel-radio-button-group` for most use cases, this template provides\r\nthe actual radio button HTML structure with proper MDC classes and accessibility\r\nattributes. It ensures consistent styling and behavior across all radio button\r\nimplementations in the library.\r\n\r\n## Design Philosophy\r\n\r\nThis follows the principle that individual radio buttons should not be standalone\r\ncomponents, as a single radio button is never useful in a UI. Instead, this template\r\nis used to build groups of radio buttons through higher-level components.\r\n\r\nHowever, since this is a private component, consumers who need to use a radio button\r\noutside of the context of a list or group, can still use the `limel-radio-button`\r\ncomponent directly according to in their UI needs.",
-          "props": [
-            {
-              "name": "checked",
-              "description": "Indicates whether the radio button is checked.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the radio button when set to `true`.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "id",
-              "description": "Associates the internal input with an external label.",
-              "type": "any",
-              "default": "",
-              "required": true
-            },
-            {
-              "name": "label",
-              "description": "Visual label shown next to the radio button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelRadioButtonGroup",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelRadioButtonGroup"
-          },
-          "description": "The Radio Button component provides a convenient way to create a group of radio buttons\r\nfrom an array of options. Radio buttons allow users to select a single option from\r\nmultiple choices, making them ideal for exclusive selections.\r\n\r\n:::note\r\nA single radio button is never useful in a UI. Radio buttons should always come in groups\r\nof at least 2 options where only one can be selected at a time.\r\n:::",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Disables all radio buttons when `true`",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "badgeIcons",
-              "description": "Set to `true` if the radio button group should display larger icons with a background",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "maxLinesSecondaryText",
-              "description": "By default, lists will display 3 lines of text, and then truncate the rest.\r\nConsumers can increase or decrease this number by specifying\r\n`maxLinesSecondaryText`. If consumer enters zero or negative\r\nnumbers we default to 1; and if they type decimals we round up.",
-              "type": "any",
-              "default": "3",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelSelect",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelSelect"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Set to `true` to make the field disabled.\r\nand visually shows that the `select` component is editable but disabled.\r\nThis tells the users that if certain requirements are met,\r\nthe component may become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to make the field read-only.\r\nThis visualizes the component slightly differently.\r\nBut shows no visual sign indicating that the component is disabled\r\nor can ever become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the select is\r\ninvalid.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "True if the control requires a value.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Text to display next to the select.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the input field when it has focus.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "multiple",
-              "description": "Set to `true` to allow multiple values to be selected.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelShortcut",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelShortcut"
-          },
-          "description": "This component can be used on places such as a start page or a dashboard.\r\nClicking on the component should navigate the user to a new screen,\r\nto which you need to provide a URL, by specifying an `href` for the `link` property.\r\n\r\nBy default, this navigation will happen within the same browser tab.\r\nHowever, it is possible to override that behavior, by specifying a `target`\r\nfor the `link` property",
-          "props": [
-            {
-              "name": "icon",
-              "description": "Name of icon for the shortcut.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The text to show below the shortcut. Long label will be truncated.",
-              "type": "any",
-              "default": "null",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` if shortcut is disabled.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "badge",
-              "description": "If specified, will display a notification badge\r\non the shortcut.",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelSlider",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelSlider"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "disabled",
-              "description": "Disables the slider when `true`,\r\nand visually shows that the field is editable but disabled.\r\nThis tells the users that if certain requirements are met,\r\nthe slider may become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Disables the slider when `true`. This visualizes the slider slightly differently.\r\nBut shows no visual sign indicating that the slider field\r\nis disabled or can ever become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "factor",
-              "description": "Default value: 1.\r\nThe factor that the properties `value`, `valuemax`, `valuemin`, and\r\n`step` are multiplied by. On `change` divides the value by the factor,\r\nso the original format stays the same.",
-              "type": "any",
-              "default": "1",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "Label to display next to the input",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the slider",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the slider is required.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the slider is invalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "displaysPercentageColors",
-              "description": "Set to `true` to display percentage-based colors on the slider.\r\nThe colors change in intervals of 10% as the value changes,\r\ncreating a color spectrum from red (low) → orange → yellow → green → teal (high).",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "unit",
-              "description": "Unit to display next to the value",
-              "type": "any",
-              "default": "''",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "The value of the input",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "valuemax",
-              "description": "The maximum value allowed",
-              "type": "any",
-              "default": "100",
-              "required": false
-            },
-            {
-              "name": "valuemin",
-              "description": "The minimum value allowed",
-              "type": "any",
-              "default": "0",
-              "required": false
-            },
-            {
-              "name": "step",
-              "description": "The stepping interval to use when adjusting the value",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelSnackbar",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelSnackbar"
-          },
-          "description": "A Snackbar –also known as \"Toast\"– is used to inform the end user\r\nabout an action or a process in the system.\r\nThe information could vary from announcing that a process has just started,\r\nis taking place now, has ended, or has been interrupted or canceled.\r\n\r\nThe information that you provide using a snackbar should be:\r\n- temporary\r\n- contextual\r\n- short\r\n- and most importantly, ignorable.\r\n\r\nIt means if the user misses the information, it shouldn't be a big deal.\r\n\r\n:::note\r\nIf the information you want to display has a higher importance or priority,\r\nand you need to make sure that the user takes an action to dismiss it,\r\nconsider using the [Banner](#/component/limel-banner/) component instead.\r\nFor more complex interactions and for delivering more detailed information,\r\n[Dialog](#/component/limel-dialog/) is a better choice.\r\n:::",
-          "props": [
-            {
-              "name": "open",
-              "description": "`true` if the snackbar is open, `false` otherwise.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "message",
-              "description": "The message to display.\r\n\r\nSupports [Markdown](#/component/limel-markdown/) for light inline\r\nemphasis such as `**bold**` or `*italic*`. See the Markdown example\r\nbelow for UX guidance.\r\n\r\n:::important\r\nWhen the message is composed from dynamic content such as user\r\ninput or translated strings, escape Markdown-sensitive characters\r\n(`*`, `_`, backtick, `#`, `[`, `]`) with a leading backslash to\r\nprevent unintended formatting.\r\n:::",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "timeout",
-              "description": "The amount of time in milliseconds to show the snackbar.\r\nIf set to `-1`, the snackbar will be persistent.\r\nThis means:\r\n- either the end user will need to close it manually,\r\nwhich requires the `dismissible` property to be set to `true`.\r\n- or the snackbar needs to be closed programmatically.",
-              "type": "any",
-              "default": "5000",
-              "required": false
-            },
-            {
-              "name": "actionText",
-              "description": "The text to display for the action button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "dismissible",
-              "description": "When `true` displays a dismiss button on the snackbar,\r\nallowing users to close it.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "multiline",
-              "description": "Whether to show the snackbar with space for multiple lines of text",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelSpinner",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelSpinner"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "size",
-              "description": "Determines the size of the spinner.",
-              "type": "any",
-              "default": "'mini'",
-              "required": false
-            },
-            {
-              "name": "limeBranded",
-              "description": "Gives the spinner the shape of Lime Technologies' logo",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelSplitButton",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelSplitButton"
-          },
-          "description": "A split button is a button with two components:\r\na button and a side-menu attached to it.\r\n\r\nClicking on the button runs a default action,\r\nand clicking on the arrow opens up a list of other possible actions.\r\n\r\n:::warning\r\n- Never use a split button for navigation purposes, such as going to next page.\r\nThe button should only be used for performing commands!\r\n- Never use this component instead of a Select or Menu component!\r\n:::",
-          "props": [
-            {
-              "name": "label",
-              "description": "The text to show on the default action part of the button.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "primary",
-              "description": "Set to `true` to make the button primary.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "icon",
-              "description": "Set icon for the button",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the button.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to put the button in the `loading` state.\r\nThis also disables the button.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "loadingFailed",
-              "description": "Set to `true` to indicate failure instead of success when the button is\r\nno longer in the `loading` state.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelSwitch",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelSwitch"
-          },
-          "description": "The Switch component is a fundamental element in UI design that serves as a toggle switch\r\nto control the state of a specific setting or option in an application or website.\r\nThe two distinct positions of the Switch are visually indicative of the two states:\r\nON and OFF; making it easy for users to understand the current state of the controlled feature.\r\n\r\nThe Switch component is widely used in user interfaces to enable users to\r\nquickly and intuitively change binary settings.\r\n\r\n:::important\r\nCheckboxes are sometimes used interchangeably with switches in user interfaces.\r\nBut there is an important difference between the two! Please read our guidelines about\r\n[Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).",
-          "props": [
-            {
-              "name": "label",
-              "description": "Label to display next to the switch",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the switch when `true`,\r\nand visually shows that the switch is editable but disabled.\r\nThis tells the users that if certain requirements are met,\r\nthe switch may become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Disables the switch when `true`. This visualizes the switch slightly differently.\r\nBut shows no visual sign indicating that the switch is disabled\r\nor can ever become interactable.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value is invalid.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "The value of the switch",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the switch",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelTabBar",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTabBar"
-          },
-          "description": "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.\r\n:::warning\r\nTab bars should be strictly used for navigation at the top levels.\r\nThey should never be used to perform actions, or navigate away from the view which contains them.\r\n:::\r\nAn 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.\r\nA 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.\r\n:::tip Other things to consider\r\nNever divide the content of a tab using a nested tab bar.\r\nNever place two tab bars within the same screen.\r\nNever use background color for icons in tabs.\r\nAvoid having long labels for tabs.\r\nA tab will never be removed or get disabled, even if there is no content under it.\r\n:::",
-          "props": []
-        },
-        {
-          "name": "LimelTabPanel",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTabPanel"
-          },
-          "description": "The `limel-tab-panel` component uses the `limel-tab-bar` component together\r\nwith custom slotted components and will display the content for the currently\r\nactive tab. Each slotted component must have an id equal to the id of the\r\ncorresponding tab it belongs to. These components should implement the\r\n[TabPanelComponent](#/type/TabPanelComponent/) interface.\r\n\r\nThe `limel-tab-panel` component will automatically set each tab configuration\r\non the corresponding slotted component as a property named `tab` so that the\r\ncomponent can take action upon that. Sometimes it might be desirable to not\r\nload data or render anything until the tab is active.\r\n\r\nThe slotted components can also emit the `changeTab` event to update anything\r\ninside the actual tab, e.g. to change the icon, color or badge.",
-          "props": [],
-          "slots": [
-            {
-              "name": "default",
-              "description": "Content to put inside the `limel tab panel`. Each slotted element\r\nmust have the `id` attribute equal to the id of the tab it belongs to."
-            }
-          ]
-        },
-        {
-          "name": "LimelTable",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTable"
-          },
-          "description": "",
-          "props": [
-            {
-              "name": "mode",
-              "description": "Set to either `local` or `remote` to change how the table handles the\r\nloaded data. When in `local` mode, all sorting and pagination will be\r\ndone locally with the data given. When in `remote` mode, the consumer\r\nis responsible to give the table new data when a `load` event occurs",
-              "type": "any",
-              "default": "'local'",
-              "required": false
-            },
-            {
-              "name": "layout",
-              "description": "Defines the layout of the table, based on how width of the columns are calculated.\r\n\r\n- `default`: makes columns as wide as their contents.\r\n- `stretchLastColumn`: makes columns as wide as their contents, stretch the last column to fill up the remaining table width.\r\n- `stretchColumns`: stretches all columns to fill the available width when possible.\r\n- `lowDensity`: makes columns as wide as their contents, and creates a low density and airy layout.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "pageSize",
-              "description": "Number of rows per page",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "totalRows",
-              "description": "The number of total rows available for the data",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "movableColumns",
-              "description": "Set to `true` to enable reordering of the columns by dragging them",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "movableRows",
-              "description": "Set to `true` to enable reordering of the rows by dragging them.\r\nA drag handle will be rendered at the start of each row.\r\nListen for the `reorder` event and update the `data` prop accordingly —\r\nthe table will not persist the new order on its own.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "sortableColumns",
-              "description": "Set to `false` to disable column sorting through header interactions.\r\nProgrammatic sorting through the `sorting` prop and `sort` event remains available.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "loading",
-              "description": "Set to `true` to trigger loading animation",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "page",
-              "description": "The page to show",
-              "type": "any",
-              "default": "1",
-              "required": false
-            },
-            {
-              "name": "emptyMessage",
-              "description": "A message to display when the table has no data",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "selectable",
-              "description": "Enables row selection",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "paginationLocation",
-              "description": "Location of the pagination controls.\r\n- `top`: Display pagination controls at the top of the table\r\n- `bottom`: Display pagination controls at the bottom of the table (default)",
-              "type": "any",
-              "default": "'bottom'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelTextEditor",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTextEditor"
-          },
-          "description": "A rich text editor that offers a rich text editing experience with markdown support,\r\nin the sense that you can easily type markdown syntax and see the rendered\r\nresult as rich text in real-time. For instance, you can type `# Hello, world!`\r\nand see it directly turning to a heading 1 (an `<h1>` HTML element).\r\n\r\nNaturally, you can use standard keyboard hotkeys such as <kbd>Ctrl</kbd> + <kbd>B</kbd>\r\nto toggle bold text, <kbd>Ctrl</kbd> + <kbd>I</kbd> to toggle italic text, and so on.",
-          "props": [
-            {
-              "name": "contentType",
-              "description": "The type of content that the editor should handle and emit, defaults to `markdown`\r\n\r\nAssumed to be set only once, so not reactive to changes",
-              "type": "any",
-              "default": "'markdown'",
-              "required": false
-            },
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "disabled",
-              "description": "Set to `true` to disable the field.\r\nUse `disabled` to indicate that the field can normally be interacted\r\nwith, but is currently disabled. This tells the user that if certain\r\nrequirements are met, the field may become enabled again.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "readonly",
-              "description": "Set to `true` to make the component read-only.\r\nUse `readonly` when the field is only there to present the data it holds,\r\nand will not become possible for the current user to edit.\r\n:::note\r\nConsider that it might be better to use `limel-markdown`\r\ninstead of `limel-text-editor` when the goal is visualizing data.\r\n:::",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "helperText",
-              "description": "Optional helper text to display below the input field when it has focus",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "placeholder",
-              "description": "The placeholder text shown inside the input field,\r\nwhen the field is empty.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "label",
-              "description": "The label of the editor",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "invalid",
-              "description": "Set to `true` to indicate that the current value of the editor is\r\ninvalid.",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "value",
-              "description": "Description of the text inside the editor as markdown",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "required",
-              "description": "Set to `true` to indicate that the field is required.\r\n\r\n:::important\r\nAn empty but required field is not automatically considered invalid.\r\nYou must make sure to check the validity of the field on your own,\r\nand properly handle the `invalid` state.\r\n:::",
-              "type": "any",
-              "default": "false",
-              "required": false
-            },
-            {
-              "name": "allowResize",
-              "description": "Set to `true` to allow the user to vertically resize the editor.\r\nSet to `false` to disable the resize functionality.",
-              "type": "any",
-              "default": "true",
-              "required": false
-            },
-            {
-              "name": "ui",
-              "description": "Specifies the visual appearance of the editor.\r\n\r\n- `standard`: The default editor appearance with a full toolbar and\r\n   standard layout.\r\n- `minimal`: A compact editor appearance, ideal for limited space\r\n   scenarios such as mobile devices. In this mode, the toolbar is hidden\r\n   until the editor is focused.\r\n- `no-toolbar`: A basic textarea appearance without any text styling toolbar.\r\n   This mode is suitable for scenarios where you want to provide a simple\r\n   text input without any visible formatting options; but still provide\r\n   support for markdown syntax and rich text, using hotkeys or when pasting.",
-              "type": "any",
-              "default": "'standard'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelTextEditorLinkMenu",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTextEditorLinkMenu"
-          },
-          "description": "This component is a menu for editing a link in the text editor.\r\nIt allows the user to input the text and url for the link.",
-          "props": [
-            {
-              "name": "language",
-              "description": "Defines the language for translations.",
-              "type": "any",
-              "default": "'en'",
-              "required": false
-            },
-            {
-              "name": "isOpen",
-              "description": "Open state of the link-menu dialog",
-              "type": "any",
-              "default": "false",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelTooltip",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTooltip"
-          },
-          "description": "A tooltip can be used to display a descriptive text for any element.\r\nThe displayed content must be a brief and supplemental string of text,\r\nidentifying the element or describing its function for the user,\r\nhelping them better understand unfamiliar objects that aren't described\r\ndirectly in the UI.\r\n\r\n## Interaction\r\nThe tooltip appears after a slight delay, when the element is hovered;\r\nand disappears as soon as the cursor leaves the element.\r\nTherefore, users cannot interact with the tip, but if the trigger element\r\nitself is interactive, it will remain interactible even with a tooltip bound\r\nto it.\r\n\r\n## Usage\r\n- Keep in mind that tooltips can be distracting, and can be perceived as an interruption.\r\nUse them only when they add significant value.\r\n- A good tip is concise, helpful, and informative.\r\nDon't explain the obvious or simply repeat what is already on the screen.\r\nWhen used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).\r\n- If the tip is essential to the primary tasks that the user is performing,\r\nsuch as warnings or important notes, include the information directly in the\r\ninterface instead.\r\n- When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),\r\nuse that, not a tooltip.\r\n- Make sure to use the tooltip on an element that users naturally and\r\neffortlessly recognize can be hovered.",
-          "props": [
-            {
-              "name": "elementId",
-              "description": "ID of the owner element that the tooltip should describe.\r\nMust be a child within the same document fragment as the tooltip element\r\nitself.",
-              "type": "any",
-              "default": "",
-              "required": true
-            },
-            {
-              "name": "label",
-              "description": "Short descriptive text of the owner element.",
-              "type": "any",
-              "default": "",
-              "required": true
-            },
-            {
-              "name": "helperLabel",
-              "description": "Additional helper text for the element.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "hotkey",
-              "description": "Keyboard shortcut to visualize inside the tooltip, e.g. `\"ctrl+f\"`.\r\nDisplay-only: the tooltip does not listen for the keystroke.\r\nCatching the hotkey is the consumer's responsibility.",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "maxlength",
-              "description": "The maximum amount of characters before rendering 'label' and\r\n'helperLabel' in two rows.",
-              "type": "any",
-              "default": "50",
-              "required": false
-            },
-            {
-              "name": "openDirection",
-              "description": "Decides the tooltip's location in relation to its trigger.",
-              "type": "any",
-              "default": "'top'",
-              "required": false
-            }
-          ]
-        },
-        {
-          "name": "LimelTooltipContent",
-          "source": {
-            "module": "lime-elements-vue",
-            "symbol": "LimelTooltipContent"
-          },
-          "description": "This component is used internally by `limel-tooltip`.",
-          "props": [
-            {
-              "name": "label",
-              "description": "Read more in tooltip.tsx",
-              "type": "any",
-              "default": "",
-              "required": true
-            },
-            {
-              "name": "helperLabel",
-              "description": "Read more in tooltip.tsx",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "maxlength",
-              "description": "Read more in tooltip.tsx",
-              "type": "any",
-              "default": "",
-              "required": false
-            },
-            {
-              "name": "hotkey",
-              "description": "Read more in tooltip.tsx",
-              "type": "any",
-              "default": "",
-              "required": false
-            }
-          ]
-        }
-      ]
-    }
-  }
-}