@limetech/lime-elements 38.31.1 → 38.32.0

package/dist/types/components/form/templates/array-field-collapsible-item.d.ts

@@ -27,7 +27,7 @@ interface CollapsibleItemProps {
    */
   allowItemRemoval: boolean;
   /**
-   * Control whether items can be reordered.
+   * Whether this particular item can be reordered.
    */
   allowItemReorder: boolean;
 }
@@ -46,6 +46,8 @@ export declare class CollapsibleItemTemplate extends React.Component<Collapsible
     class: string;
     ref: (section: HTMLLimelCollapsibleSectionElement) => void;
     'is-open': boolean;
+    'data-reorder-id': string;
+    'data-reorderable': string;
   }, string | React.JSXElementConstructor<any>>;
   private setActions;
   private handleAction;

package/dist/types/components/form/templates/array-field-simple-item.d.ts

@@ -5,26 +5,22 @@ interface SimpleItemProps {
   index: number;
   allowItemRemoval: boolean;
   allowItemReorder: boolean;
+  dataIndex: number;
 }
 export declare class SimpleItemTemplate extends React.Component<SimpleItemProps> {
   props: SimpleItemProps;
   constructor(props: SimpleItemProps);
   private removeButton?;
-  private moveUpButton?;
-  private moveDownButton?;
   componentWillUnmount(): void;
   render(): React.DetailedReactHTMLElement<{
     className: string;
+    'data-reorder-id': string;
+    'data-reorderable': string;
   }, HTMLElement>;
+  private renderDragHandle;
   private renderRemoveButton;
-  private renderMoveUpButton;
-  private renderMoveDownButton;
   private handleRemove;
-  private handleMoveUp;
-  private handleMoveDown;
-  private setRemoveButton;
-  private setMoveUpButton;
-  private setMoveDownButton;
+  private readonly setRemoveButton;
 }
 export {};
 //# sourceMappingURL=array-field-simple-item.d.ts.map

package/dist/types/components/form/templates/array-field.d.ts

@@ -1,12 +1,43 @@
 import React from 'react';
 import { ArrayFieldTemplateProps } from './types';
-export declare class ArrayFieldTemplate extends React.Component {
-  props: ArrayFieldTemplateProps;
+interface ArrayFieldTemplateState {
+  order: number[];
+}
+export declare class ArrayFieldTemplate extends React.Component<ArrayFieldTemplateProps, ArrayFieldTemplateState> {
+  private container?;
+  private sortable?;
+  private dragSnapshot?;
+  private draggedItemIndex?;
+  private dropElevationTimeout?;
+  private dropElevationTarget?;
+  private itemByIndex;
   constructor(props: ArrayFieldTemplateProps);
+  componentWillUnmount(): void;
+  componentDidMount(): void;
+  componentDidUpdate(previousProps: ArrayFieldTemplateProps): void;
   render(): React.DetailedReactHTMLElement<{}, HTMLElement>;
   private renderAddButton;
-  private renderItem;
   private getItemControls;
-  private handleAddClick;
+  private readonly handleAddClick;
+  private renderItem;
+  private readonly setContainer;
+  private getOrderedItems;
+  private readonly handleSortStart;
+  private readonly handleSortEnd;
+  private setupDragController;
+  private teardownDragController;
+  private canReorderItems;
+  private canRemoveItems;
+  private isItemReorderable;
+  private isIndexReorderable;
+  private getReorderableOrder;
+  private readOrderFromDom;
+  private getReorderId;
+  private applyDropElevation;
+  private scheduleDropElevationRemoval;
+  private clearDropElevationTimer;
+  private arraysEqual;
+  private extractIndices;
 }
+export {};
 //# sourceMappingURL=array-field.d.ts.map

package/dist/types/components/form/templates/common.d.ts

@@ -11,9 +11,9 @@ export declare function renderTitle(title: string): React.DetailedReactHTMLEleme
  *
  * @param description
  */
-export declare function renderDescription(description: string): React.DetailedReactHTMLElement<{
-  className: string;
-}, HTMLElement>;
+export declare function renderDescription(description: string): React.ReactElement<{
+  value: string;
+}, string | React.JSXElementConstructor<any>>;
 /**
  * Find a suitable title for a nested structure.
  *

package/dist/types/components/snackbar/snackbar.d.ts

@@ -16,9 +16,9 @@ import { Languages } from '../date-picker/date.types';
  * :::note
  * If the information you want to display has a higher importance or priority,
  * and you need to make sure that the user takes an action to dismiss it,
- * consider using the [Banner](/#/component/limel-banner/) component instead.
+ * consider using the [Banner](#/component/limel-banner/) component instead.
  * For more complex interactions and for delivering more detailed information,
- * [Dialog](/#/component/limel-dialog/) is a better choice.
+ * [Dialog](#/component/limel-dialog/) is a better choice.
  * :::
  *
  * @exampleComponent limel-example-snackbar

package/dist/types/components/switch/switch.d.ts

@@ -11,7 +11,7 @@ import { Label } from '../dynamic-label/label.types';
  * :::important
  * Checkboxes are sometimes used interchangeably with switches in user interfaces.
  * But there is an important difference between the two! Please read our guidelines about
- * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+ * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
  *
  * @exampleComponent limel-example-switch
  * @exampleComponent limel-example-switch-helper-text

package/dist/types/components/tooltip/tooltip.d.ts

@@ -31,11 +31,11 @@ import { OpenDirection } from '../menu/menu.types';
  * Use them only when they add significant value.
  * - A good tip is concise, helpful, and informative.
  * Don't explain the obvious or simply repeat what is already on the screen.
- * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+ * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
  * - If the tip is essential to the primary tasks that the user is performing,
  * such as warnings or important notes, include the information directly in the
  * interface instead.
- * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+ * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
  * use that, not a tooltip.
  * - Make sure to use the tooltip on an element that users naturally and
  * effortlessly recognize can be hovered.

package/dist/types/components.d.ts

@@ -537,7 +537,7 @@ export namespace Components {
      * :::important
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
-     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+     * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
@@ -949,7 +949,7 @@ export namespace Components {
      * and use it where desired.
      * The color picker can also show you a preview of any valid color name or color value.
      * :::note
-     * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+     * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
      * :::
      * @exampleComponent limel-example-color-picker-basic
      * @exampleComponent limel-example-color-picker-custom-palette
@@ -1221,6 +1221,39 @@ export namespace Components {
          */
         "useMobileLayout"?: boolean;
     }
+    /**
+     * This component resembles a drag handle button, but is implemented
+     * as a `private` component to allow for easier styling and future extensions.
+     * :::important
+     * This component has its `shadow` set to `false` in order to
+     * integrate well with the drag-and-drop functionality, as well as
+     * providing a better accessibility.
+     * Keep in mind that its styles might be affected by the consumer
+     * component, due to its light dom.
+     * :::
+     * :::tip
+     * It's recommended to place the drag handle on the right side of
+     * the item it is meant to reorder, to ensure consistent layout
+     * design conventions.
+     * :::
+     * @exampleComponent limel-example-drag-handle-basic
+     * @exampleComponent limel-example-drag-handle-horizontal
+     * @private 
+     */
+    interface LimelDragHandle {
+        /**
+          * The direction in which the drag handle can be used to reorder items.
+         */
+        "dragDirection": 'vertical' | 'horizontal';
+        /**
+          * Language to use for translations.
+         */
+        "language": Languages;
+        /**
+          * The preferred direction for the tooltip to open. Defaults to 'left', as our recommended placement for a drag handle in the UI is on the far right side of draggable elements.
+         */
+        "tooltipOpenDirection": OpenDirection;
+    }
     /**
      * This components displays a different label depending on the current given
      * value. A label can consist of a text and an optional icon. If no matching
@@ -2855,9 +2888,9 @@ export namespace Components {
      * :::note
      * If the information you want to display has a higher importance or priority,
      * and you need to make sure that the user takes an action to dismiss it,
-     * consider using the [Banner](/#/component/limel-banner/) component instead.
+     * consider using the [Banner](#/component/limel-banner/) component instead.
      * For more complex interactions and for delivering more detailed information,
-     * [Dialog](/#/component/limel-dialog/) is a better choice.
+     * [Dialog](#/component/limel-dialog/) is a better choice.
      * :::
      * @exampleComponent limel-example-snackbar
      * @exampleComponent limel-example-snackbar-with-action
@@ -2971,7 +3004,7 @@ export namespace Components {
      * :::important
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
-     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+     * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-switch
      * @exampleComponent limel-example-switch-helper-text
      * @exampleComponent limel-example-switch-readonly
@@ -3269,11 +3302,11 @@ export namespace Components {
      * Use them only when they add significant value.
      * - A good tip is concise, helpful, and informative.
      * Don't explain the obvious or simply repeat what is already on the screen.
-     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
      * - If the tip is essential to the primary tasks that the user is performing,
      * such as warnings or important notes, include the information directly in the
      * interface instead.
-     * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+     * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
      * use that, not a tooltip.
      * - Make sure to use the tooltip on an element that users naturally and
      * effortlessly recognize can be hovered.
@@ -3790,7 +3823,7 @@ declare global {
      * :::important
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
-     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+     * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
@@ -3958,7 +3991,7 @@ declare global {
      * and use it where desired.
      * The color picker can also show you a preview of any valid color name or color value.
      * :::note
-     * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+     * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
      * :::
      * @exampleComponent limel-example-color-picker-basic
      * @exampleComponent limel-example-color-picker-custom-palette
@@ -4070,6 +4103,31 @@ declare global {
         prototype: HTMLLimelDockButtonElement;
         new (): HTMLLimelDockButtonElement;
     };
+    /**
+     * This component resembles a drag handle button, but is implemented
+     * as a `private` component to allow for easier styling and future extensions.
+     * :::important
+     * This component has its `shadow` set to `false` in order to
+     * integrate well with the drag-and-drop functionality, as well as
+     * providing a better accessibility.
+     * Keep in mind that its styles might be affected by the consumer
+     * component, due to its light dom.
+     * :::
+     * :::tip
+     * It's recommended to place the drag handle on the right side of
+     * the item it is meant to reorder, to ensure consistent layout
+     * design conventions.
+     * :::
+     * @exampleComponent limel-example-drag-handle-basic
+     * @exampleComponent limel-example-drag-handle-horizontal
+     * @private 
+     */
+    interface HTMLLimelDragHandleElement extends Components.LimelDragHandle, HTMLStencilElement {
+    }
+    var HTMLLimelDragHandleElement: {
+        prototype: HTMLLimelDragHandleElement;
+        new (): HTMLLimelDragHandleElement;
+    };
     /**
      * This components displays a different label depending on the current given
      * value. A label can consist of a text and an optional icon. If no matching
@@ -4882,9 +4940,9 @@ declare global {
      * :::note
      * If the information you want to display has a higher importance or priority,
      * and you need to make sure that the user takes an action to dismiss it,
-     * consider using the [Banner](/#/component/limel-banner/) component instead.
+     * consider using the [Banner](#/component/limel-banner/) component instead.
      * For more complex interactions and for delivering more detailed information,
-     * [Dialog](/#/component/limel-dialog/) is a better choice.
+     * [Dialog](#/component/limel-dialog/) is a better choice.
      * :::
      * @exampleComponent limel-example-snackbar
      * @exampleComponent limel-example-snackbar-with-action
@@ -4940,7 +4998,7 @@ declare global {
      * :::important
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
-     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+     * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-switch
      * @exampleComponent limel-example-switch-helper-text
      * @exampleComponent limel-example-switch-readonly
@@ -5086,11 +5144,11 @@ declare global {
      * Use them only when they add significant value.
      * - A good tip is concise, helpful, and informative.
      * Don't explain the obvious or simply repeat what is already on the screen.
-     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
      * - If the tip is essential to the primary tasks that the user is performing,
      * such as warnings or important notes, include the information directly in the
      * interface instead.
-     * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+     * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
      * use that, not a tooltip.
      * - Make sure to use the tooltip on an element that users naturally and
      * effortlessly recognize can be hovered.
@@ -5141,6 +5199,7 @@ declare global {
         "limel-dialog": HTMLLimelDialogElement;
         "limel-dock": HTMLLimelDockElement;
         "limel-dock-button": HTMLLimelDockButtonElement;
+        "limel-drag-handle": HTMLLimelDragHandleElement;
         "limel-dynamic-label": HTMLLimelDynamicLabelElement;
         "limel-file": HTMLLimelFileElement;
         "limel-file-dropzone": HTMLLimelFileDropzoneElement;
@@ -5660,7 +5719,7 @@ declare namespace LocalJSX {
      * :::important
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
-     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+     * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-checkbox
      * @exampleComponent limel-example-checkbox-helper-text
      * @exampleComponent limel-example-checkbox-readonly
@@ -6104,7 +6163,7 @@ declare namespace LocalJSX {
      * and use it where desired.
      * The color picker can also show you a preview of any valid color name or color value.
      * :::note
-     * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+     * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
      * :::
      * @exampleComponent limel-example-color-picker-basic
      * @exampleComponent limel-example-color-picker-custom-palette
@@ -6424,6 +6483,39 @@ declare namespace LocalJSX {
          */
         "useMobileLayout"?: boolean;
     }
+    /**
+     * This component resembles a drag handle button, but is implemented
+     * as a `private` component to allow for easier styling and future extensions.
+     * :::important
+     * This component has its `shadow` set to `false` in order to
+     * integrate well with the drag-and-drop functionality, as well as
+     * providing a better accessibility.
+     * Keep in mind that its styles might be affected by the consumer
+     * component, due to its light dom.
+     * :::
+     * :::tip
+     * It's recommended to place the drag handle on the right side of
+     * the item it is meant to reorder, to ensure consistent layout
+     * design conventions.
+     * :::
+     * @exampleComponent limel-example-drag-handle-basic
+     * @exampleComponent limel-example-drag-handle-horizontal
+     * @private 
+     */
+    interface LimelDragHandle {
+        /**
+          * The direction in which the drag handle can be used to reorder items.
+         */
+        "dragDirection"?: 'vertical' | 'horizontal';
+        /**
+          * Language to use for translations.
+         */
+        "language"?: Languages;
+        /**
+          * The preferred direction for the tooltip to open. Defaults to 'left', as our recommended placement for a drag handle in the UI is on the far right side of draggable elements.
+         */
+        "tooltipOpenDirection"?: OpenDirection;
+    }
     /**
      * This components displays a different label depending on the current given
      * value. A label can consist of a text and an optional icon. If no matching
@@ -8197,9 +8289,9 @@ declare namespace LocalJSX {
      * :::note
      * If the information you want to display has a higher importance or priority,
      * and you need to make sure that the user takes an action to dismiss it,
-     * consider using the [Banner](/#/component/limel-banner/) component instead.
+     * consider using the [Banner](#/component/limel-banner/) component instead.
      * For more complex interactions and for delivering more detailed information,
-     * [Dialog](/#/component/limel-dialog/) is a better choice.
+     * [Dialog](#/component/limel-dialog/) is a better choice.
      * :::
      * @exampleComponent limel-example-snackbar
      * @exampleComponent limel-example-snackbar-with-action
@@ -8320,7 +8412,7 @@ declare namespace LocalJSX {
      * :::important
      * Checkboxes are sometimes used interchangeably with switches in user interfaces.
      * But there is an important difference between the two! Please read our guidelines about
-     * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+     * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
      * @exampleComponent limel-example-switch
      * @exampleComponent limel-example-switch-helper-text
      * @exampleComponent limel-example-switch-readonly
@@ -8711,11 +8803,11 @@ declare namespace LocalJSX {
      * Use them only when they add significant value.
      * - A good tip is concise, helpful, and informative.
      * Don't explain the obvious or simply repeat what is already on the screen.
-     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+     * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
      * - If the tip is essential to the primary tasks that the user is performing,
      * such as warnings or important notes, include the information directly in the
      * interface instead.
-     * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+     * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
      * use that, not a tooltip.
      * - Make sure to use the tooltip on an element that users naturally and
      * effortlessly recognize can be hovered.
@@ -8790,6 +8882,7 @@ declare namespace LocalJSX {
         "limel-dialog": LimelDialog;
         "limel-dock": LimelDock;
         "limel-dock-button": LimelDockButton;
+        "limel-drag-handle": LimelDragHandle;
         "limel-dynamic-label": LimelDynamicLabel;
         "limel-file": LimelFile;
         "limel-file-dropzone": LimelFileDropzone;
@@ -9064,7 +9157,7 @@ declare module "@stencil/core" {
              * :::important
              * Checkboxes are sometimes used interchangeably with switches in user interfaces.
              * But there is an important difference between the two! Please read our guidelines about
-             * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+             * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
              * @exampleComponent limel-example-checkbox
              * @exampleComponent limel-example-checkbox-helper-text
              * @exampleComponent limel-example-checkbox-readonly
@@ -9202,7 +9295,7 @@ declare module "@stencil/core" {
              * and use it where desired.
              * The color picker can also show you a preview of any valid color name or color value.
              * :::note
-             * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
+             * Make sure to read our [guidelines about usage of colors](#/DesignGuidelines/color-system.md/) from our palette.
              * :::
              * @exampleComponent limel-example-color-picker-basic
              * @exampleComponent limel-example-color-picker-custom-palette
@@ -9279,6 +9372,26 @@ declare module "@stencil/core" {
              * @private 
              */
             "limel-dock-button": LocalJSX.LimelDockButton & JSXBase.HTMLAttributes<HTMLLimelDockButtonElement>;
+            /**
+             * This component resembles a drag handle button, but is implemented
+             * as a `private` component to allow for easier styling and future extensions.
+             * :::important
+             * This component has its `shadow` set to `false` in order to
+             * integrate well with the drag-and-drop functionality, as well as
+             * providing a better accessibility.
+             * Keep in mind that its styles might be affected by the consumer
+             * component, due to its light dom.
+             * :::
+             * :::tip
+             * It's recommended to place the drag handle on the right side of
+             * the item it is meant to reorder, to ensure consistent layout
+             * design conventions.
+             * :::
+             * @exampleComponent limel-example-drag-handle-basic
+             * @exampleComponent limel-example-drag-handle-horizontal
+             * @private 
+             */
+            "limel-drag-handle": LocalJSX.LimelDragHandle & JSXBase.HTMLAttributes<HTMLLimelDragHandleElement>;
             /**
              * This components displays a different label depending on the current given
              * value. A label can consist of a text and an optional icon. If no matching
@@ -9896,9 +10009,9 @@ declare module "@stencil/core" {
              * :::note
              * If the information you want to display has a higher importance or priority,
              * and you need to make sure that the user takes an action to dismiss it,
-             * consider using the [Banner](/#/component/limel-banner/) component instead.
+             * consider using the [Banner](#/component/limel-banner/) component instead.
              * For more complex interactions and for delivering more detailed information,
-             * [Dialog](/#/component/limel-dialog/) is a better choice.
+             * [Dialog](#/component/limel-dialog/) is a better choice.
              * :::
              * @exampleComponent limel-example-snackbar
              * @exampleComponent limel-example-snackbar-with-action
@@ -9939,7 +10052,7 @@ declare module "@stencil/core" {
              * :::important
              * Checkboxes are sometimes used interchangeably with switches in user interfaces.
              * But there is an important difference between the two! Please read our guidelines about
-             * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).
+             * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
              * @exampleComponent limel-example-switch
              * @exampleComponent limel-example-switch-helper-text
              * @exampleComponent limel-example-switch-readonly
@@ -10055,11 +10168,11 @@ declare module "@stencil/core" {
              * Use them only when they add significant value.
              * - A good tip is concise, helpful, and informative.
              * Don't explain the obvious or simply repeat what is already on the screen.
-             * When used correctly, supplemental info of a tooltip helps to [declutter the UI](/#/DesignGuidelines/decluttering.md/).
+             * When used correctly, supplemental info of a tooltip helps to [declutter the UI](#/DesignGuidelines/decluttering.md/).
              * - If the tip is essential to the primary tasks that the user is performing,
              * such as warnings or important notes, include the information directly in the
              * interface instead.
-             * - When a component offers a helper text (e.g. [Input field](/#/component/limel-input-field/)),
+             * - When a component offers a helper text (e.g. [Input field](#/component/limel-input-field/)),
              * use that, not a tooltip.
              * - Make sure to use the tooltip on an element that users naturally and
              * effortlessly recognize can be hovered.

package/dist/types/translations/da.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/dist/types/translations/de.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/dist/types/translations/en.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/dist/types/translations/fi.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/dist/types/translations/fr.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/dist/types/translations/nl.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/dist/types/translations/no.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'file.drag-and-drop-tips': string;
   'file-viewer.message.unsupported-filetype': string;

package/dist/types/translations/sv.d.ts

@@ -18,6 +18,8 @@ declare const _default: {
   'date-picker.month.heading': string;
   'date-picker.quarter.heading': string;
   'date-picker.year.heading': string;
+  'drag-handle.drag-handle': string;
+  'drag-handle.drag-to-reorder': string;
   'chip-set.clear-all': string;
   'snackbar.dismiss': string;
   'file.drag-and-drop-tips': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.31.1",
+  "version": "38.32.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -119,5 +119,8 @@
   "engines": {
     "node": ">=22"
   },
-  "packageManager": "npm@>=10.9"
+  "packageManager": "npm@>=10.9",
+  "dependencies": {
+    "sortablejs": "^1.15.6"
+  }
 }