@limetech/lime-elements 39.9.4 → 39.9.5

package/dist/types/components.d.ts

@@ -226,7 +226,7 @@ export namespace Components {
     /**
      * The Badge component can be used to display a notification badge,
      * optionally with a number or a text label.
-     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-basic
      * @exampleComponent limel-example-badge-number
      * @exampleComponent limel-example-badge-string
      */
@@ -237,7 +237,7 @@ export namespace Components {
         "label"?: number | string;
     }
     /**
-     * @exampleComponent limel-example-banner
+     * @exampleComponent limel-example-banner-basic
      */
     interface LimelBanner {
         /**
@@ -362,7 +362,7 @@ export namespace Components {
      * Within the group, icon buttons will all have the same width, while each text button
      * inherits its width from its content.
      * @exampleComponent limel-example-button-group-icons
-     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-basic
      * @exampleComponent limel-example-button-group-mix
      * @exampleComponent limel-example-button-group-badges
      * @exampleComponent limel-example-button-group-composite
@@ -598,7 +598,7 @@ export namespace Components {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
      * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-     * @exampleComponent limel-example-checkbox
+     * @exampleComponent limel-example-checkbox-basic
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
      */
@@ -794,7 +794,7 @@ export namespace Components {
      * }
      * ```
      * :::
-     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-basic
      * @exampleComponent limel-example-chip-set-choice
      * @exampleComponent limel-example-chip-set-filter
      * @exampleComponent limel-example-chip-set-filter-badge
@@ -918,7 +918,7 @@ export namespace Components {
      * Of course such numbers, if bigger than `maxValue` will be visualized as a
      * full progress.
      * :::
-     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-basic
      * @exampleComponent limel-example-circular-progress-sizes
      * @exampleComponent limel-example-circular-progress-props
      * @exampleComponent limel-example-circular-progress-css-variables
@@ -1019,7 +1019,7 @@ export namespace Components {
         "translationLanguage": Languages;
     }
     /**
-     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-basic
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
      * @exampleComponent limel-example-code-editor-copy
@@ -1356,7 +1356,7 @@ export namespace Components {
      * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
      * from Lime Web Components to open dialogs in Lime CRM.
      * :::
-     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-basic
      * @exampleComponent limel-example-dialog-nested-close-events
      * @exampleComponent limel-example-dialog-heading
      * @exampleComponent limel-example-dialog-heading-actions
@@ -1491,7 +1491,7 @@ export namespace Components {
      * of the Checkbox or Toggle switch in the `readonly` state may not always
      * provide the best way of _visualizing information_, potentially leading to
      * confusion and negatively affecting the end-users' experience.
-     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-basic
      * @exampleComponent limel-example-dynamic-label-readonly-boolean
      */
     interface LimelDynamicLabel {
@@ -1563,7 +1563,7 @@ export namespace Components {
      * - Choose a file
      * and similar phrases...
      * :::
-     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-basic
      * @exampleComponent limel-example-file-custom-icon
      * @exampleComponent limel-example-file-menu-items
      * @exampleComponent limel-example-file-accepted-types
@@ -1618,7 +1618,7 @@ export namespace Components {
      * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-dropzone
+     * @exampleComponent limel-example-file-dropzone-basic
      * @exampleComponent limel-example-file-dropzone-type-filtering
      * @private 
      */
@@ -1653,7 +1653,7 @@ export namespace Components {
      * After receiving the files, the component emits a `filesSelected` event.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-input
+     * @exampleComponent limel-example-file-input-basic
      * @exampleComponent limel-example-file-input-type-filtering
      * @private 
      */
@@ -1893,7 +1893,7 @@ export namespace Components {
      * Background colors behind icons make them look like "call to action" buttons
      * and take a lot of attention from users.
      * :::
-     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-basic
      * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
@@ -1935,7 +1935,7 @@ export namespace Components {
      * Using this component designers empower users to grasp the functionality
      * of an app more effortlessly, minimizes the learning curve,
      * transforming complex features into accessible opportunities for exploration.
-     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-help-basic
      * @exampleComponent limel-example-read-more
      * @exampleComponent limel-example-open-direction
      * @exampleComponent limel-example-placement
@@ -1980,7 +1980,7 @@ export namespace Components {
      * and to avoid importing styles separately.
      * Also this enables us to open the helper line in limel-portal,
      * more easily without having to send the styles to the portal.
-     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
      * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -2076,7 +2076,7 @@ export namespace Components {
      * If clicking on the component should navigate the user to
      * a new screen or web page, you need to provide a URL,
      * using the `link` property.
-     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-basic
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
@@ -2266,7 +2266,7 @@ export namespace Components {
     /**
      * The linear progress component can be used to visualize the current state of a progress in a scale;
      * for example percentage of completion of a task.
-     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-basic
      * @exampleComponent limel-example-linear-progress-indeterminate
      * @exampleComponent limel-example-linear-progress-accessible-label
      * @exampleComponent limel-example-linear-progress-color
@@ -2293,7 +2293,7 @@ export namespace Components {
         "value": number;
     }
     /**
-     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-basic
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -3154,7 +3154,7 @@ export namespace Components {
         "selectedItem"?: ListItem<string | number>;
     }
     /**
-     * @exampleComponent limel-example-select
+     * @exampleComponent limel-example-select-basic
      * @exampleComponent limel-example-select-with-icons
      * @exampleComponent limel-example-select-with-separators
      * @exampleComponent limel-example-select-with-secondary-text
@@ -3215,7 +3215,7 @@ export namespace Components {
      * By default, this navigation will happen within the same browser tab.
      * However, it is possible to override that behavior, by specifying a `target`
      * for the `link` property
-     * @exampleComponent limel-example-shortcut
+     * @exampleComponent limel-example-shortcut-basic
      * @exampleComponent limel-example-shortcut-notification
      * @exampleComponent limel-example-shortcut-styling
      * @exampleComponent limel-example-shortcut-with-click-handler
@@ -3331,7 +3331,7 @@ export namespace Components {
      * For more complex interactions and for delivering more detailed information,
      * [Dialog](#/component/limel-dialog/) is a better choice.
      * :::
-     * @exampleComponent limel-example-snackbar
+     * @exampleComponent limel-example-snackbar-basic
      * @exampleComponent limel-example-snackbar-with-action
      * @exampleComponent limel-example-snackbar-with-changing-messages
      * @exampleComponent limel-example-snackbar-dismissible
@@ -3379,7 +3379,7 @@ export namespace Components {
         "timeout"?: number;
     }
     /**
-     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-basic
      * @exampleComponent limel-example-spinner-color
      * @exampleComponent limel-example-spinner-size
      */
@@ -3455,7 +3455,7 @@ export namespace Components {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
      * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-     * @exampleComponent limel-example-switch
+     * @exampleComponent limel-example-switch-basic
      * @exampleComponent limel-example-switch-helper-text
      * @exampleComponent limel-example-switch-readonly
      */
@@ -3508,7 +3508,7 @@ export namespace Components {
      * Avoid having long labels for tabs.
      * A tab will never be removed or get disabled, even if there is no content under it.
      * :::
-     * @exampleComponent limel-example-tab-bar
+     * @exampleComponent limel-example-tab-bar-basic
      * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      */
@@ -3531,7 +3531,7 @@ export namespace Components {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
-     * @exampleComponent limel-example-tab-panel
+     * @exampleComponent limel-example-tab-panel-basic
      */
     interface LimelTabPanel {
         /**
@@ -3541,7 +3541,7 @@ export namespace Components {
         "tabs": Tab[];
     }
     /**
-     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-basic
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
@@ -4149,7 +4149,7 @@ declare global {
     /**
      * The Badge component can be used to display a notification badge,
      * optionally with a number or a text label.
-     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-basic
      * @exampleComponent limel-example-badge-number
      * @exampleComponent limel-example-badge-string
      */
@@ -4160,7 +4160,7 @@ declare global {
         new (): HTMLLimelBadgeElement;
     };
     /**
-     * @exampleComponent limel-example-banner
+     * @exampleComponent limel-example-banner-basic
      */
     interface HTMLLimelBannerElement extends Components.LimelBanner, HTMLStencilElement {
     }
@@ -4253,7 +4253,7 @@ declare global {
      * Within the group, icon buttons will all have the same width, while each text button
      * inherits its width from its content.
      * @exampleComponent limel-example-button-group-icons
-     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-basic
      * @exampleComponent limel-example-button-group-mix
      * @exampleComponent limel-example-button-group-badges
      * @exampleComponent limel-example-button-group-composite
@@ -4398,7 +4398,7 @@ declare global {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
      * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-     * @exampleComponent limel-example-checkbox
+     * @exampleComponent limel-example-checkbox-basic
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
      */
@@ -4508,7 +4508,7 @@ declare global {
      * }
      * ```
      * :::
-     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-basic
      * @exampleComponent limel-example-chip-set-choice
      * @exampleComponent limel-example-chip-set-filter
      * @exampleComponent limel-example-chip-set-filter-badge
@@ -4548,7 +4548,7 @@ declare global {
      * Of course such numbers, if bigger than `maxValue` will be visualized as a
      * full progress.
      * :::
-     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-basic
      * @exampleComponent limel-example-circular-progress-sizes
      * @exampleComponent limel-example-circular-progress-props
      * @exampleComponent limel-example-circular-progress-css-variables
@@ -4584,7 +4584,7 @@ declare global {
         "change": string;
     }
     /**
-     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-basic
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
      * @exampleComponent limel-example-code-editor-copy
@@ -4756,7 +4756,7 @@ declare global {
      * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
      * from Lime Web Components to open dialogs in Lime CRM.
      * :::
-     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-basic
      * @exampleComponent limel-example-dialog-nested-close-events
      * @exampleComponent limel-example-dialog-heading
      * @exampleComponent limel-example-dialog-heading-actions
@@ -4865,7 +4865,7 @@ declare global {
      * of the Checkbox or Toggle switch in the `readonly` state may not always
      * provide the best way of _visualizing information_, potentially leading to
      * confusion and negatively affecting the end-users' experience.
-     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-basic
      * @exampleComponent limel-example-dynamic-label-readonly-boolean
      */
     interface HTMLLimelDynamicLabelElement extends Components.LimelDynamicLabel, HTMLStencilElement {
@@ -4929,7 +4929,7 @@ declare global {
      * - Choose a file
      * and similar phrases...
      * :::
-     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-basic
      * @exampleComponent limel-example-file-custom-icon
      * @exampleComponent limel-example-file-menu-items
      * @exampleComponent limel-example-file-accepted-types
@@ -4962,7 +4962,7 @@ declare global {
      * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-dropzone
+     * @exampleComponent limel-example-file-dropzone-basic
      * @exampleComponent limel-example-file-dropzone-type-filtering
      * @private 
      */
@@ -4992,7 +4992,7 @@ declare global {
      * After receiving the files, the component emits a `filesSelected` event.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-input
+     * @exampleComponent limel-example-file-input-basic
      * @exampleComponent limel-example-file-input-type-filtering
      * @private 
      */
@@ -5168,7 +5168,7 @@ declare global {
      * Background colors behind icons make them look like "call to action" buttons
      * and take a lot of attention from users.
      * :::
-     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-basic
      * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
@@ -5193,7 +5193,7 @@ declare global {
      * Using this component designers empower users to grasp the functionality
      * of an app more effortlessly, minimizes the learning curve,
      * transforming complex features into accessible opportunities for exploration.
-     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-help-basic
      * @exampleComponent limel-example-read-more
      * @exampleComponent limel-example-open-direction
      * @exampleComponent limel-example-placement
@@ -5226,7 +5226,7 @@ declare global {
      * and to avoid importing styles separately.
      * Also this enables us to open the helper line in limel-portal,
      * more easily without having to send the styles to the portal.
-     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
      * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -5279,7 +5279,7 @@ declare global {
      * If clicking on the component should navigate the user to
      * a new screen or web page, you need to provide a URL,
      * using the `link` property.
-     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-basic
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
@@ -5332,7 +5332,7 @@ declare global {
     /**
      * The linear progress component can be used to visualize the current state of a progress in a scale;
      * for example percentage of completion of a task.
-     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-basic
      * @exampleComponent limel-example-linear-progress-indeterminate
      * @exampleComponent limel-example-linear-progress-accessible-label
      * @exampleComponent limel-example-linear-progress-color
@@ -5349,7 +5349,7 @@ declare global {
         "interact": ListItem;
     }
     /**
-     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-basic
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -5867,7 +5867,7 @@ declare global {
         "change": Option | Option[];
     }
     /**
-     * @exampleComponent limel-example-select
+     * @exampleComponent limel-example-select-basic
      * @exampleComponent limel-example-select-with-icons
      * @exampleComponent limel-example-select-with-separators
      * @exampleComponent limel-example-select-with-secondary-text
@@ -5899,7 +5899,7 @@ declare global {
      * By default, this navigation will happen within the same browser tab.
      * However, it is possible to override that behavior, by specifying a `target`
      * for the `link` property
-     * @exampleComponent limel-example-shortcut
+     * @exampleComponent limel-example-shortcut-basic
      * @exampleComponent limel-example-shortcut-notification
      * @exampleComponent limel-example-shortcut-styling
      * @exampleComponent limel-example-shortcut-with-click-handler
@@ -5955,7 +5955,7 @@ declare global {
      * For more complex interactions and for delivering more detailed information,
      * [Dialog](#/component/limel-dialog/) is a better choice.
      * :::
-     * @exampleComponent limel-example-snackbar
+     * @exampleComponent limel-example-snackbar-basic
      * @exampleComponent limel-example-snackbar-with-action
      * @exampleComponent limel-example-snackbar-with-changing-messages
      * @exampleComponent limel-example-snackbar-dismissible
@@ -5977,7 +5977,7 @@ declare global {
         new (): HTMLLimelSnackbarElement;
     };
     /**
-     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-basic
      * @exampleComponent limel-example-spinner-color
      * @exampleComponent limel-example-spinner-size
      */
@@ -6032,7 +6032,7 @@ declare global {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
      * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-     * @exampleComponent limel-example-switch
+     * @exampleComponent limel-example-switch-basic
      * @exampleComponent limel-example-switch-helper-text
      * @exampleComponent limel-example-switch-readonly
      */
@@ -6068,7 +6068,7 @@ declare global {
      * Avoid having long labels for tabs.
      * A tab will never be removed or get disabled, even if there is no content under it.
      * :::
-     * @exampleComponent limel-example-tab-bar
+     * @exampleComponent limel-example-tab-bar-basic
      * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      */
@@ -6101,7 +6101,7 @@ declare global {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
-     * @exampleComponent limel-example-tab-panel
+     * @exampleComponent limel-example-tab-panel-basic
      */
     interface HTMLLimelTabPanelElement extends Components.LimelTabPanel, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelTabPanelElementEventMap>(type: K, listener: (this: HTMLLimelTabPanelElement, ev: LimelTabPanelCustomEvent<HTMLLimelTabPanelElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6127,7 +6127,7 @@ declare global {
         "selectAll": boolean;
     }
     /**
-     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-basic
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
@@ -6515,7 +6515,7 @@ declare namespace LocalJSX {
     /**
      * The Badge component can be used to display a notification badge,
      * optionally with a number or a text label.
-     * @exampleComponent limel-example-badge
+     * @exampleComponent limel-example-badge-basic
      * @exampleComponent limel-example-badge-number
      * @exampleComponent limel-example-badge-string
      */
@@ -6526,7 +6526,7 @@ declare namespace LocalJSX {
         "label"?: number | string;
     }
     /**
-     * @exampleComponent limel-example-banner
+     * @exampleComponent limel-example-banner-basic
      */
     interface LimelBanner {
         /**
@@ -6647,7 +6647,7 @@ declare namespace LocalJSX {
      * Within the group, icon buttons will all have the same width, while each text button
      * inherits its width from its content.
      * @exampleComponent limel-example-button-group-icons
-     * @exampleComponent limel-example-button-group
+     * @exampleComponent limel-example-button-group-basic
      * @exampleComponent limel-example-button-group-mix
      * @exampleComponent limel-example-button-group-badges
      * @exampleComponent limel-example-button-group-composite
@@ -6895,7 +6895,7 @@ declare namespace LocalJSX {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
      * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-     * @exampleComponent limel-example-checkbox
+     * @exampleComponent limel-example-checkbox-basic
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
      */
@@ -7103,7 +7103,7 @@ declare namespace LocalJSX {
      * }
      * ```
      * :::
-     * @exampleComponent limel-example-chip-set
+     * @exampleComponent limel-example-chip-set-basic
      * @exampleComponent limel-example-chip-set-choice
      * @exampleComponent limel-example-chip-set-filter
      * @exampleComponent limel-example-chip-set-filter-badge
@@ -7231,7 +7231,7 @@ declare namespace LocalJSX {
      * Of course such numbers, if bigger than `maxValue` will be visualized as a
      * full progress.
      * :::
-     * @exampleComponent limel-example-circular-progress
+     * @exampleComponent limel-example-circular-progress-basic
      * @exampleComponent limel-example-circular-progress-sizes
      * @exampleComponent limel-example-circular-progress-props
      * @exampleComponent limel-example-circular-progress-css-variables
@@ -7332,7 +7332,7 @@ declare namespace LocalJSX {
         "translationLanguage"?: Languages;
     }
     /**
-     * @exampleComponent limel-example-code-editor
+     * @exampleComponent limel-example-code-editor-basic
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
      * @exampleComponent limel-example-code-editor-fold-lint-wrap
      * @exampleComponent limel-example-code-editor-copy
@@ -7697,7 +7697,7 @@ declare namespace LocalJSX {
      * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
      * from Lime Web Components to open dialogs in Lime CRM.
      * :::
-     * @exampleComponent limel-example-dialog
+     * @exampleComponent limel-example-dialog-basic
      * @exampleComponent limel-example-dialog-nested-close-events
      * @exampleComponent limel-example-dialog-heading
      * @exampleComponent limel-example-dialog-heading-actions
@@ -7868,7 +7868,7 @@ declare namespace LocalJSX {
      * of the Checkbox or Toggle switch in the `readonly` state may not always
      * provide the best way of _visualizing information_, potentially leading to
      * confusion and negatively affecting the end-users' experience.
-     * @exampleComponent limel-example-dynamic-label
+     * @exampleComponent limel-example-dynamic-label-basic
      * @exampleComponent limel-example-dynamic-label-readonly-boolean
      */
     interface LimelDynamicLabel {
@@ -7940,7 +7940,7 @@ declare namespace LocalJSX {
      * - Choose a file
      * and similar phrases...
      * :::
-     * @exampleComponent limel-example-file
+     * @exampleComponent limel-example-file-basic
      * @exampleComponent limel-example-file-custom-icon
      * @exampleComponent limel-example-file-menu-items
      * @exampleComponent limel-example-file-accepted-types
@@ -8003,7 +8003,7 @@ declare namespace LocalJSX {
      * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-dropzone
+     * @exampleComponent limel-example-file-dropzone-basic
      * @exampleComponent limel-example-file-dropzone-type-filtering
      * @private 
      */
@@ -8047,7 +8047,7 @@ declare namespace LocalJSX {
      * After receiving the files, the component emits a `filesSelected` event.
      * The event detail would be an array of `FileInfo` objects,
      * each representing a file dropped into the dropzone.
-     * @exampleComponent limel-example-file-input
+     * @exampleComponent limel-example-file-input-basic
      * @exampleComponent limel-example-file-input-type-filtering
      * @private 
      */
@@ -8307,7 +8307,7 @@ declare namespace LocalJSX {
      * Background colors behind icons make them look like "call to action" buttons
      * and take a lot of attention from users.
      * :::
-     * @exampleComponent limel-example-header
+     * @exampleComponent limel-example-header-basic
      * @exampleComponent limel-example-header-slot-actions
      * @exampleComponent limel-example-header-colors
      * @exampleComponent limel-example-header-responsive
@@ -8349,7 +8349,7 @@ declare namespace LocalJSX {
      * Using this component designers empower users to grasp the functionality
      * of an app more effortlessly, minimizes the learning curve,
      * transforming complex features into accessible opportunities for exploration.
-     * @exampleComponent limel-example-help
+     * @exampleComponent limel-example-help-basic
      * @exampleComponent limel-example-read-more
      * @exampleComponent limel-example-open-direction
      * @exampleComponent limel-example-placement
@@ -8394,7 +8394,7 @@ declare namespace LocalJSX {
      * and to avoid importing styles separately.
      * Also this enables us to open the helper line in limel-portal,
      * more easily without having to send the styles to the portal.
-     * @exampleComponent limel-example-helper-line
+     * @exampleComponent limel-example-helper-line-basic
      * @exampleComponent limel-example-helper-line-invalid
      * @exampleComponent limel-example-helper-line-long-text
      * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -8490,7 +8490,7 @@ declare namespace LocalJSX {
      * If clicking on the component should navigate the user to
      * a new screen or web page, you need to provide a URL,
      * using the `link` property.
-     * @exampleComponent limel-example-info-tile
+     * @exampleComponent limel-example-info-tile-basic
      * @exampleComponent limel-example-info-tile-badge
      * @exampleComponent limel-example-info-tile-progress
      * @exampleComponent limel-example-info-tile-loading
@@ -8676,7 +8676,7 @@ declare namespace LocalJSX {
     /**
      * The linear progress component can be used to visualize the current state of a progress in a scale;
      * for example percentage of completion of a task.
-     * @exampleComponent limel-example-linear-progress
+     * @exampleComponent limel-example-linear-progress-basic
      * @exampleComponent limel-example-linear-progress-indeterminate
      * @exampleComponent limel-example-linear-progress-accessible-label
      * @exampleComponent limel-example-linear-progress-color
@@ -8703,7 +8703,7 @@ declare namespace LocalJSX {
         "value"?: number;
     }
     /**
-     * @exampleComponent limel-example-list
+     * @exampleComponent limel-example-list-basic
      * @exampleComponent limel-example-list-secondary
      * @exampleComponent limel-example-list-separator
      * @exampleComponent limel-example-list-icons
@@ -9649,7 +9649,7 @@ declare namespace LocalJSX {
         "selectedItem"?: ListItem<string | number>;
     }
     /**
-     * @exampleComponent limel-example-select
+     * @exampleComponent limel-example-select-basic
      * @exampleComponent limel-example-select-with-icons
      * @exampleComponent limel-example-select-with-separators
      * @exampleComponent limel-example-select-with-secondary-text
@@ -9714,7 +9714,7 @@ declare namespace LocalJSX {
      * By default, this navigation will happen within the same browser tab.
      * However, it is possible to override that behavior, by specifying a `target`
      * for the `link` property
-     * @exampleComponent limel-example-shortcut
+     * @exampleComponent limel-example-shortcut-basic
      * @exampleComponent limel-example-shortcut-notification
      * @exampleComponent limel-example-shortcut-styling
      * @exampleComponent limel-example-shortcut-with-click-handler
@@ -9834,7 +9834,7 @@ declare namespace LocalJSX {
      * For more complex interactions and for delivering more detailed information,
      * [Dialog](#/component/limel-dialog/) is a better choice.
      * :::
-     * @exampleComponent limel-example-snackbar
+     * @exampleComponent limel-example-snackbar-basic
      * @exampleComponent limel-example-snackbar-with-action
      * @exampleComponent limel-example-snackbar-with-changing-messages
      * @exampleComponent limel-example-snackbar-dismissible
@@ -9885,7 +9885,7 @@ declare namespace LocalJSX {
         "timeout"?: number;
     }
     /**
-     * @exampleComponent limel-example-spinner
+     * @exampleComponent limel-example-spinner-basic
      * @exampleComponent limel-example-spinner-color
      * @exampleComponent limel-example-spinner-size
      */
@@ -9965,7 +9965,7 @@ declare namespace LocalJSX {
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
      * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-     * @exampleComponent limel-example-switch
+     * @exampleComponent limel-example-switch-basic
      * @exampleComponent limel-example-switch-helper-text
      * @exampleComponent limel-example-switch-readonly
      */
@@ -10022,7 +10022,7 @@ declare namespace LocalJSX {
      * Avoid having long labels for tabs.
      * A tab will never be removed or get disabled, even if there is no content under it.
      * :::
-     * @exampleComponent limel-example-tab-bar
+     * @exampleComponent limel-example-tab-bar-basic
      * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      */
@@ -10049,7 +10049,7 @@ declare namespace LocalJSX {
      * load data or render anything until the tab is active.
      * The slotted components can also emit the `changeTab` event to update anything
      * inside the actual tab, e.g. to change the icon, color or badge.
-     * @exampleComponent limel-example-tab-panel
+     * @exampleComponent limel-example-tab-panel-basic
      */
     interface LimelTabPanel {
         /**
@@ -10063,7 +10063,7 @@ declare namespace LocalJSX {
         "tabs"?: Tab[];
     }
     /**
-     * @exampleComponent limel-example-table
+     * @exampleComponent limel-example-table-basic
      * @exampleComponent limel-example-table-custom-components
      * @exampleComponent limel-example-table-header-menu
      * @exampleComponent limel-example-table-movable-columns
@@ -11167,13 +11167,13 @@ declare module "@stencil/core" {
             /**
              * The Badge component can be used to display a notification badge,
              * optionally with a number or a text label.
-             * @exampleComponent limel-example-badge
+             * @exampleComponent limel-example-badge-basic
              * @exampleComponent limel-example-badge-number
              * @exampleComponent limel-example-badge-string
              */
             "limel-badge": LocalJSX.IntrinsicElements["limel-badge"] & JSXBase.HTMLAttributes<HTMLLimelBadgeElement>;
             /**
-             * @exampleComponent limel-example-banner
+             * @exampleComponent limel-example-banner-basic
              */
             "limel-banner": LocalJSX.IntrinsicElements["limel-banner"] & JSXBase.HTMLAttributes<HTMLLimelBannerElement>;
             /**
@@ -11237,7 +11237,7 @@ declare module "@stencil/core" {
              * Within the group, icon buttons will all have the same width, while each text button
              * inherits its width from its content.
              * @exampleComponent limel-example-button-group-icons
-             * @exampleComponent limel-example-button-group
+             * @exampleComponent limel-example-button-group-basic
              * @exampleComponent limel-example-button-group-mix
              * @exampleComponent limel-example-button-group-badges
              * @exampleComponent limel-example-button-group-composite
@@ -11329,7 +11329,7 @@ declare module "@stencil/core" {
              * Checkboxes are sometimes used interchangeably with switches in user interfaces.
              * But there is an important difference between the two! Please read our guidelines about
              * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-             * @exampleComponent limel-example-checkbox
+             * @exampleComponent limel-example-checkbox-basic
              * @exampleComponent limel-example-checkbox-helper-text
              * @exampleComponent limel-example-checkbox-readonly
              */
@@ -11402,7 +11402,7 @@ declare module "@stencil/core" {
              * }
              * ```
              * :::
-             * @exampleComponent limel-example-chip-set
+             * @exampleComponent limel-example-chip-set-basic
              * @exampleComponent limel-example-chip-set-choice
              * @exampleComponent limel-example-chip-set-filter
              * @exampleComponent limel-example-chip-set-filter-badge
@@ -11429,7 +11429,7 @@ declare module "@stencil/core" {
              * Of course such numbers, if bigger than `maxValue` will be visualized as a
              * full progress.
              * :::
-             * @exampleComponent limel-example-circular-progress
+             * @exampleComponent limel-example-circular-progress-basic
              * @exampleComponent limel-example-circular-progress-sizes
              * @exampleComponent limel-example-circular-progress-props
              * @exampleComponent limel-example-circular-progress-css-variables
@@ -11452,7 +11452,7 @@ declare module "@stencil/core" {
              */
             "limel-code-diff": LocalJSX.IntrinsicElements["limel-code-diff"] & JSXBase.HTMLAttributes<HTMLLimelCodeDiffElement>;
             /**
-             * @exampleComponent limel-example-code-editor
+             * @exampleComponent limel-example-code-editor-basic
              * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
              * @exampleComponent limel-example-code-editor-fold-lint-wrap
              * @exampleComponent limel-example-code-editor-copy
@@ -11536,7 +11536,7 @@ declare module "@stencil/core" {
              * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)
              * from Lime Web Components to open dialogs in Lime CRM.
              * :::
-             * @exampleComponent limel-example-dialog
+             * @exampleComponent limel-example-dialog-basic
              * @exampleComponent limel-example-dialog-nested-close-events
              * @exampleComponent limel-example-dialog-heading
              * @exampleComponent limel-example-dialog-heading-actions
@@ -11590,7 +11590,7 @@ declare module "@stencil/core" {
              * of the Checkbox or Toggle switch in the `readonly` state may not always
              * provide the best way of _visualizing information_, potentially leading to
              * confusion and negatively affecting the end-users' experience.
-             * @exampleComponent limel-example-dynamic-label
+             * @exampleComponent limel-example-dynamic-label-basic
              * @exampleComponent limel-example-dynamic-label-readonly-boolean
              */
             "limel-dynamic-label": LocalJSX.IntrinsicElements["limel-dynamic-label"] & JSXBase.HTMLAttributes<HTMLLimelDynamicLabelElement>;
@@ -11629,7 +11629,7 @@ declare module "@stencil/core" {
              * - Choose a file
              * and similar phrases...
              * :::
-             * @exampleComponent limel-example-file
+             * @exampleComponent limel-example-file-basic
              * @exampleComponent limel-example-file-custom-icon
              * @exampleComponent limel-example-file-menu-items
              * @exampleComponent limel-example-file-accepted-types
@@ -11645,7 +11645,7 @@ declare module "@stencil/core" {
              * files (specified with the `accept` prop) a `filesRejected` event will be emitted.
              * The event detail would be an array of `FileInfo` objects,
              * each representing a file dropped into the dropzone.
-             * @exampleComponent limel-example-file-dropzone
+             * @exampleComponent limel-example-file-dropzone-basic
              * @exampleComponent limel-example-file-dropzone-type-filtering
              * @private 
              */
@@ -11659,7 +11659,7 @@ declare module "@stencil/core" {
              * After receiving the files, the component emits a `filesSelected` event.
              * The event detail would be an array of `FileInfo` objects,
              * each representing a file dropped into the dropzone.
-             * @exampleComponent limel-example-file-input
+             * @exampleComponent limel-example-file-input-basic
              * @exampleComponent limel-example-file-input-type-filtering
              * @private 
              */
@@ -11763,7 +11763,7 @@ declare module "@stencil/core" {
              * Background colors behind icons make them look like "call to action" buttons
              * and take a lot of attention from users.
              * :::
-             * @exampleComponent limel-example-header
+             * @exampleComponent limel-example-header-basic
              * @exampleComponent limel-example-header-slot-actions
              * @exampleComponent limel-example-header-colors
              * @exampleComponent limel-example-header-responsive
@@ -11783,7 +11783,7 @@ declare module "@stencil/core" {
              * Using this component designers empower users to grasp the functionality
              * of an app more effortlessly, minimizes the learning curve,
              * transforming complex features into accessible opportunities for exploration.
-             * @exampleComponent limel-example-help
+             * @exampleComponent limel-example-help-basic
              * @exampleComponent limel-example-read-more
              * @exampleComponent limel-example-open-direction
              * @exampleComponent limel-example-placement
@@ -11806,7 +11806,7 @@ declare module "@stencil/core" {
              * and to avoid importing styles separately.
              * Also this enables us to open the helper line in limel-portal,
              * more easily without having to send the styles to the portal.
-             * @exampleComponent limel-example-helper-line
+             * @exampleComponent limel-example-helper-line-basic
              * @exampleComponent limel-example-helper-line-invalid
              * @exampleComponent limel-example-helper-line-long-text
              * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -11844,7 +11844,7 @@ declare module "@stencil/core" {
              * If clicking on the component should navigate the user to
              * a new screen or web page, you need to provide a URL,
              * using the `link` property.
-             * @exampleComponent limel-example-info-tile
+             * @exampleComponent limel-example-info-tile-basic
              * @exampleComponent limel-example-info-tile-badge
              * @exampleComponent limel-example-info-tile-progress
              * @exampleComponent limel-example-info-tile-loading
@@ -11875,14 +11875,14 @@ declare module "@stencil/core" {
             /**
              * The linear progress component can be used to visualize the current state of a progress in a scale;
              * for example percentage of completion of a task.
-             * @exampleComponent limel-example-linear-progress
+             * @exampleComponent limel-example-linear-progress-basic
              * @exampleComponent limel-example-linear-progress-indeterminate
              * @exampleComponent limel-example-linear-progress-accessible-label
              * @exampleComponent limel-example-linear-progress-color
              */
             "limel-linear-progress": LocalJSX.IntrinsicElements["limel-linear-progress"] & JSXBase.HTMLAttributes<HTMLLimelLinearProgressElement>;
             /**
-             * @exampleComponent limel-example-list
+             * @exampleComponent limel-example-list-basic
              * @exampleComponent limel-example-list-secondary
              * @exampleComponent limel-example-list-separator
              * @exampleComponent limel-example-list-icons
@@ -12180,7 +12180,7 @@ declare module "@stencil/core" {
              */
             "limel-radio-button-group": LocalJSX.IntrinsicElements["limel-radio-button-group"] & JSXBase.HTMLAttributes<HTMLLimelRadioButtonGroupElement>;
             /**
-             * @exampleComponent limel-example-select
+             * @exampleComponent limel-example-select-basic
              * @exampleComponent limel-example-select-with-icons
              * @exampleComponent limel-example-select-with-separators
              * @exampleComponent limel-example-select-with-secondary-text
@@ -12199,7 +12199,7 @@ declare module "@stencil/core" {
              * By default, this navigation will happen within the same browser tab.
              * However, it is possible to override that behavior, by specifying a `target`
              * for the `link` property
-             * @exampleComponent limel-example-shortcut
+             * @exampleComponent limel-example-shortcut-basic
              * @exampleComponent limel-example-shortcut-notification
              * @exampleComponent limel-example-shortcut-styling
              * @exampleComponent limel-example-shortcut-with-click-handler
@@ -12230,7 +12230,7 @@ declare module "@stencil/core" {
              * For more complex interactions and for delivering more detailed information,
              * [Dialog](#/component/limel-dialog/) is a better choice.
              * :::
-             * @exampleComponent limel-example-snackbar
+             * @exampleComponent limel-example-snackbar-basic
              * @exampleComponent limel-example-snackbar-with-action
              * @exampleComponent limel-example-snackbar-with-changing-messages
              * @exampleComponent limel-example-snackbar-dismissible
@@ -12239,7 +12239,7 @@ declare module "@stencil/core" {
              */
             "limel-snackbar": LocalJSX.IntrinsicElements["limel-snackbar"] & JSXBase.HTMLAttributes<HTMLLimelSnackbarElement>;
             /**
-             * @exampleComponent limel-example-spinner
+             * @exampleComponent limel-example-spinner-basic
              * @exampleComponent limel-example-spinner-color
              * @exampleComponent limel-example-spinner-size
              */
@@ -12270,7 +12270,7 @@ declare module "@stencil/core" {
              * Checkboxes are sometimes used interchangeably with switches in user interfaces.
              * But there is an important difference between the two! Please read our guidelines about
              * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
-             * @exampleComponent limel-example-switch
+             * @exampleComponent limel-example-switch-basic
              * @exampleComponent limel-example-switch-helper-text
              * @exampleComponent limel-example-switch-readonly
              */
@@ -12290,7 +12290,7 @@ declare module "@stencil/core" {
              * Avoid having long labels for tabs.
              * A tab will never be removed or get disabled, even if there is no content under it.
              * :::
-             * @exampleComponent limel-example-tab-bar
+             * @exampleComponent limel-example-tab-bar-basic
              * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
              * @exampleComponent limel-example-tab-bar-with-equal-tab-width
              */
@@ -12307,11 +12307,11 @@ declare module "@stencil/core" {
              * load data or render anything until the tab is active.
              * The slotted components can also emit the `changeTab` event to update anything
              * inside the actual tab, e.g. to change the icon, color or badge.
-             * @exampleComponent limel-example-tab-panel
+             * @exampleComponent limel-example-tab-panel-basic
              */
             "limel-tab-panel": LocalJSX.IntrinsicElements["limel-tab-panel"] & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
             /**
-             * @exampleComponent limel-example-table
+             * @exampleComponent limel-example-table-basic
              * @exampleComponent limel-example-table-custom-components
              * @exampleComponent limel-example-table-header-menu
              * @exampleComponent limel-example-table-movable-columns