@limetech/lime-elements 40.12.3 → 40.13.0

package/dist/types/components/form/show-field.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Open what is closed above a field, scroll it into view, focus it and
+ * highlight it.
+ *
+ * @param root - the element the form is rendered in
+ * @param path - the path of the field in the value of the form
+ */
+export declare function showField(root: HTMLElement, path: Array<string | number>): Promise<void>;
+//# sourceMappingURL=show-field.d.ts.map

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

@@ -3,6 +3,10 @@ import { FormSchema } from '../form.types';
 export interface ArrayFieldOptions {
     arraySchema: FormSchema;
     formData: any[];
+    /**
+     * The path of the array in the value, such as `['heroes']`
+     */
+    schemaPath: string[];
 }
 export declare const ArrayFieldContext: import("react").Context<ArrayFieldOptions>;
 /**

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

@@ -39,6 +39,10 @@ export interface CollapsibleItemProps {
      * errors when this is `true`, keeping a freshly loaded form silent.
      */
     revealErrors?: boolean;
+    /**
+     * The schema path of the item, such as `/heroes/0`
+     */
+    schemaPath?: string;
 }
 export declare class CollapsibleItemTemplate extends React.Component<PropsWithChildren<CollapsibleItemProps>> {
     props: PropsWithChildren<CollapsibleItemProps>;
@@ -55,6 +59,7 @@ export declare class CollapsibleItemTemplate extends React.Component<PropsWithCh
         class: string;
         ref: (section: HTMLLimelCollapsibleSectionElement) => void;
         'is-open': boolean;
+        'data-schema-path': string;
         'data-reorder-id': string;
         'data-reorderable': string;
         invalid: boolean;

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

@@ -7,14 +7,11 @@ interface ArrayFieldTemplateState {
 }
 export declare class ArrayFieldTemplate extends React.Component<ArrayFieldTemplateProps, ArrayFieldTemplateState> {
     private container?;
-    private sortable?;
-    private dragSnapshot?;
-    private draggedItemIndex?;
-    private dropElevationTimeout?;
-    private dropElevationTarget?;
+    private readonly dragToReorder;
     private cachedContextValue;
     private cachedSchema?;
     private cachedFormData?;
+    private cachedPath?;
     constructor(props: ArrayFieldTemplateProps);
     componentWillUnmount(): void;
     componentDidMount(): void;
@@ -24,16 +21,9 @@ export declare class ArrayFieldTemplate extends React.Component<ArrayFieldTempla
     private readonly handleAddClick;
     private readonly setContainer;
     private getOrderedItems;
-    private readonly handleSortStart;
-    private readonly handleSortEnd;
+    private readonly handleReorder;
     private setupDragController;
-    private teardownDragController;
     private canReorderItems;
-    private readOrderFromDom;
-    private getReorderId;
-    private applyDropElevation;
-    private scheduleDropElevationRemoval;
-    private clearDropElevationTimer;
     private arraysEqual;
     private extractIndices;
     private getContextValue;

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

@@ -2,5 +2,6 @@ import React from 'react';
 export declare const FieldTemplate: (props: any) => React.DetailedReactHTMLElement<{
     className: any;
     style: React.CSSProperties;
+    'data-schema-path': string;
 }, HTMLElement>;
 //# sourceMappingURL=field.d.ts.map

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { LimeObjectFieldTemplateProps } from './types';
-export declare const ObjectFieldTemplate: (props: LimeObjectFieldTemplateProps) => React.FunctionComponentElement<React.ProviderProps<import("./array-context").ArrayFieldOptions>> | React.FunctionComponentElement<React.FragmentProps> | React.ReactElement<{
+export declare const ObjectFieldTemplate: (props: LimeObjectFieldTemplateProps) => React.FunctionComponentElement<React.FragmentProps> | React.ReactElement<{
     header: string;
     id: string;
     'is-open': boolean;
     invalid: boolean;
-}, string | React.JSXElementConstructor<any>>;
+}, string | React.JSXElementConstructor<any>> | React.FunctionComponentElement<React.ProviderProps<import("./array-context").ArrayFieldOptions>>;
 /**
  * Render a schema path as a leading-slash string. Root → `/`,
  * `['rules']` → `/rules`, `['rules', 'details']` → `/rules/details`.

package/dist/types/components/tab-bar/tab-bar.d.ts

@@ -9,6 +9,7 @@ import { Tab } from './tab.types';
  * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
  * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
  * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+ * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
  * :::tip Other things to consider
  * Never divide the content of a tab using a nested tab bar.
  * Never place two tab bars within the same screen.
@@ -22,6 +23,8 @@ import { Tab } from './tab.types';
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width
  * @exampleComponent limel-example-tab-bar-vertical
  * @exampleComponent limel-example-tab-bar-tab-width
+ * @exampleComponent limel-example-tab-bar-reorder
+ * @exampleComponent limel-example-tab-bar-reorder-vertical
  */
 export declare class TabBar {
     /**
@@ -33,24 +36,45 @@ export declare class TabBar {
      * to, or in a column, next to it.
      */
     orientation: 'horizontal' | 'vertical';
+    /**
+     * Set to `true` to let the user reorder the tabs by dragging them. Listen
+     * for `reorderTab` and give the tab bar the tabs in their new order.
+     */
+    allowTabReorder: boolean;
     /**
      * Emitted when a tab has been changed
      */
     private changeTab;
+    /**
+     * Emitted when the user has dragged a tab to a new place. The tab bar does
+     * not change `tabs` itself. The tab stays where it was until `tabs` is set
+     * to the tabs in their new order.
+     */
+    private reorderTab;
     private host;
     private revealedTabId?;
     private hasLoaded;
     private isLaidOutAgain;
+    private tabIdsAfterReorder?;
+    private dragToReorder?;
+    private renderedTabs;
+    private tabWithFocus?;
     constructor();
     connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
+    componentWillRender(): void;
     componentDidRender(): Promise<void>;
     render(): any;
     protected tabsChanged(newTabs?: Tab[], oldTabs?: Tab[]): void;
     protected orientationChanged(): void;
     private getOrientation;
     private getNavigationOptions;
+    private restoreFocus;
     private getTabElements;
+    private canReorderTabs;
+    private setUpReordering;
+    private readonly handleReorder;
     /**
      * A tab that is activated by the user receives focus, and the scroller
      * reveals what receives focus. This is for a tab that becomes active
@@ -65,6 +89,7 @@ export declare class TabBar {
     private activateTab;
     private sortByInactive;
     private renderIcon;
+    private renderTabOrMovableTab;
     private renderTab;
     private triggerIconColorWarning;
 }

package/dist/types/components/tab-bar/tab.types.d.ts

@@ -40,4 +40,22 @@ export interface Tab {
      */
     badge?: number | string;
 }
+/**
+ * Describes a tab that the user has moved to a new place.
+ * @public
+ */
+export interface TabReorderEvent {
+    /**
+     * The tab that was moved
+     */
+    tab: Tab;
+    /**
+     * The position that the tab had in `tabs` before it was moved
+     */
+    fromIndex: number;
+    /**
+     * The position that the tab gets in `tabs` after it has been moved
+     */
+    toIndex: number;
+}
 //# sourceMappingURL=tab.types.d.ts.map

package/dist/types/components/tab-bar/tabs.d.ts

@@ -1,4 +1,5 @@
-import { Tab } from './tab.types';
+import type { ReorderEvent } from '../../util/drag-to-reorder';
+import { Tab, TabReorderEvent } from './tab.types';
 /**
  * Set a tabs `active` state to true in a list of tabs. The previous tab with
  * `active` set to true will have it set to `false` instead.
@@ -8,4 +9,14 @@ import { Tab } from './tab.types';
  * @returns a copy of the list of tabs with the changed tabs replaced
  */
 export declare function setActiveTab(tabs: Tab[], index: number): Tab[];
+/**
+ * Describe a move that the user has made, in the tabs that the user made it in.
+ *
+ * @param tabs - the tabs of the tab bar now
+ * @param reorder - the move, as the list of tabs that the user dragged reported
+ * it
+ * @returns the move, or `undefined` when `tabs` are not the tabs that the user
+ * began to drag, since the move would point to another tab then
+ */
+export declare function getTabReorder(tabs: Tab[], reorder: ReorderEvent): TabReorderEvent | undefined;
 //# sourceMappingURL=tabs.d.ts.map

package/dist/types/components/tab-panel/tab-panel.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Tab } from '../tab-bar/tab.types';
+import { Tab, TabReorderEvent } from '../tab-bar/tab.types';
 /**
  * The `limel-tab-panel` component uses the `limel-tab-bar` component together
  * with custom slotted components and will display the content for the currently
@@ -15,10 +15,16 @@ import { Tab } from '../tab-bar/tab.types';
  * 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.
  *
+ * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+ * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+ * panel the tabs in their new order. The tabs can be reordered with a mouse
+ * and a touch screen, but not yet with the keyboard.
+ *
  * @slot - Content to put inside the `limel-tab-panel`. Each slotted element
  * must have the `id` attribute equal to the id of the tab it belongs to.
  * @exampleComponent limel-example-tab-panel-basic
  * @exampleComponent limel-example-tab-panel-vertical
+ * @exampleComponent limel-example-tab-panel-reorder
  */
 export declare class TabPanel {
     /**
@@ -30,10 +36,21 @@ export declare class TabPanel {
      * column, to the left of it.
      */
     orientation: 'horizontal' | 'vertical';
+    /**
+     * Set to `true` to let the user reorder the tabs by dragging them. Listen
+     * for `reorderTab` and give the panel the tabs in their new order.
+     */
+    allowTabReorder: boolean;
     /**
      * Emitted when a tab has been changed
      */
     protected changeTab: EventEmitter<Tab>;
+    /**
+     * Emitted when the user has dragged a tab to a new place. The panel does
+     * not change `tabs` itself. The tab stays where it was until `tabs` is set
+     * to the tabs in their new order.
+     */
+    protected reorderTab: EventEmitter<TabReorderEvent>;
     private host;
     private slotElements;
     constructor();

package/dist/types/components.d.ts

@@ -51,7 +51,7 @@ import { EditorUiType } from "./components/text-editor/types";
 import { Option } from "./components/select/option.types";
 import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 import { SpinnerSize } from "./components/spinner/spinner.types";
-import { Tab } from "./components/tab-bar/tab.types";
+import { Tab, TabReorderEvent } from "./components/tab-bar/tab.types";
 import { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
 import { Layout } from "./components/table/layout";
 import { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
@@ -101,7 +101,7 @@ export { EditorUiType } from "./components/text-editor/types";
 export { Option } from "./components/select/option.types";
 export { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from "./components/side-panel/side-panel.types";
 export { SpinnerSize } from "./components/spinner/spinner.types";
-export { Tab } from "./components/tab-bar/tab.types";
+export { Tab, TabReorderEvent } from "./components/tab-bar/tab.types";
 export { Column, ColumnAggregate, ColumnSorter, RowData, RowReorderEvent, TableParams } from "./components/table/table.types";
 export { Layout } from "./components/table/layout";
 export { EditorTextLink } from "./components/text-editor/prosemirror-adapter/menu/types";
@@ -1900,6 +1900,7 @@ export namespace Components {
      * @exampleComponent limel-example-form-row-layout
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
+     * @exampleComponent limel-example-form-highlighted-field
      */
     interface LimelForm {
         /**
@@ -1911,6 +1912,11 @@ export namespace Components {
           * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
          */
         "errors": ValidationError;
+        /**
+          * The path in the value of a field to take the user to, such as `['heroes', 2, 'name']`. When it changes, the form opens the sections and list items the field is in, scrolls it into view, focuses it and briefly highlights it.  If the path goes further than the form can show, such as into a custom component, the closest field above the end of the path is shown. To show the same field again, set it to `undefined` first.
+          * @beta
+         */
+        "highlightedField"?: Array<string | number>;
         /**
           * Factory for creating properties for custom form components  When using custom components in the form some properties might have to be set dynamically. If this factory is set, it will be called with the current schema for the field for each custom component in the form. The factory must return an object where each key is the name of the property that should be set, along with its value.
          */
@@ -3965,6 +3971,7 @@ export namespace Components {
      * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
      * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
      * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+     * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
      * :::tip Other things to consider
      * Never divide the content of a tab using a nested tab bar.
      * Never place two tab bars within the same screen.
@@ -3977,8 +3984,15 @@ export namespace Components {
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      * @exampleComponent limel-example-tab-bar-vertical
      * @exampleComponent limel-example-tab-bar-tab-width
+     * @exampleComponent limel-example-tab-bar-reorder
+     * @exampleComponent limel-example-tab-bar-reorder-vertical
      */
     interface LimelTabBar {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the tab bar the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder": boolean;
         /**
           * Whether the tabs are laid out in a row, above the content they belong to, or in a column, next to it.
           * @default 'horizontal'
@@ -4002,10 +4016,20 @@ 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.
+     * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+     * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+     * panel the tabs in their new order. The tabs can be reordered with a mouse
+     * and a touch screen, but not yet with the keyboard.
      * @exampleComponent limel-example-tab-panel-basic
      * @exampleComponent limel-example-tab-panel-vertical
+     * @exampleComponent limel-example-tab-panel-reorder
      */
     interface LimelTabPanel {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the panel the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder": boolean;
         /**
           * Whether the tabs are laid out in a row, above the content, or in a column, to the left of it.
           * @default 'horizontal'
@@ -5651,6 +5675,7 @@ declare global {
      * @exampleComponent limel-example-form-row-layout
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
+     * @exampleComponent limel-example-form-highlighted-field
      */
     interface HTMLLimelFormElement extends Components.LimelForm, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelFormElementEventMap>(type: K, listener: (this: HTMLLimelFormElement, ev: LimelFormCustomEvent<HTMLLimelFormElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6837,6 +6862,7 @@ declare global {
     };
     interface HTMLLimelTabBarElementEventMap {
         "changeTab": Tab;
+        "reorderTab": TabReorderEvent;
     }
     /**
      * 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.
@@ -6848,6 +6874,7 @@ declare global {
      * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
      * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
      * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+     * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
      * :::tip Other things to consider
      * Never divide the content of a tab using a nested tab bar.
      * Never place two tab bars within the same screen.
@@ -6860,6 +6887,8 @@ declare global {
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      * @exampleComponent limel-example-tab-bar-vertical
      * @exampleComponent limel-example-tab-bar-tab-width
+     * @exampleComponent limel-example-tab-bar-reorder
+     * @exampleComponent limel-example-tab-bar-reorder-vertical
      */
     interface HTMLLimelTabBarElement extends Components.LimelTabBar, HTMLStencilElement {
         addEventListener<K extends keyof HTMLLimelTabBarElementEventMap>(type: K, listener: (this: HTMLLimelTabBarElement, ev: LimelTabBarCustomEvent<HTMLLimelTabBarElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -6877,6 +6906,7 @@ declare global {
     };
     interface HTMLLimelTabPanelElementEventMap {
         "changeTab": Tab;
+        "reorderTab": TabReorderEvent;
     }
     /**
      * The `limel-tab-panel` component uses the `limel-tab-bar` component together
@@ -6890,8 +6920,13 @@ 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.
+     * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+     * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+     * panel the tabs in their new order. The tabs can be reordered with a mouse
+     * and a touch screen, but not yet with the keyboard.
      * @exampleComponent limel-example-tab-panel-basic
      * @exampleComponent limel-example-tab-panel-vertical
+     * @exampleComponent limel-example-tab-panel-reorder
      */
     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;
@@ -9087,6 +9122,7 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-form-row-layout
      * @exampleComponent limel-example-builtin-field-types-form
      * @exampleComponent limel-example-code-editor-form
+     * @exampleComponent limel-example-form-highlighted-field
      */
     interface LimelForm {
         /**
@@ -9098,6 +9134,11 @@ declare namespace LocalJSX {
           * Extra errors to display in the form. Typical use case is asynchronous errors generated server side.
          */
         "errors"?: ValidationError;
+        /**
+          * The path in the value of a field to take the user to, such as `['heroes', 2, 'name']`. When it changes, the form opens the sections and list items the field is in, scrolls it into view, focuses it and briefly highlights it.  If the path goes further than the form can show, such as into a custom component, the closest field above the end of the path is shown. To show the same field again, set it to `undefined` first.
+          * @beta
+         */
+        "highlightedField"?: Array<string | number>;
         /**
           * Emitted when a change is made within the form
          */
@@ -11272,6 +11313,7 @@ declare namespace LocalJSX {
      * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
      * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
      * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+     * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
      * :::tip Other things to consider
      * Never divide the content of a tab using a nested tab bar.
      * Never place two tab bars within the same screen.
@@ -11284,12 +11326,23 @@ declare namespace LocalJSX {
      * @exampleComponent limel-example-tab-bar-with-equal-tab-width
      * @exampleComponent limel-example-tab-bar-vertical
      * @exampleComponent limel-example-tab-bar-tab-width
+     * @exampleComponent limel-example-tab-bar-reorder
+     * @exampleComponent limel-example-tab-bar-reorder-vertical
      */
     interface LimelTabBar {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the tab bar the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder"?: boolean;
         /**
           * Emitted when a tab has been changed
          */
         "onChangeTab"?: (event: LimelTabBarCustomEvent<Tab>) => void;
+        /**
+          * Emitted when the user has dragged a tab to a new place. The tab bar does not change `tabs` itself. The tab stays where it was until `tabs` is set to the tabs in their new order.
+         */
+        "onReorderTab"?: (event: LimelTabBarCustomEvent<TabReorderEvent>) => void;
         /**
           * Whether the tabs are laid out in a row, above the content they belong to, or in a column, next to it.
           * @default 'horizontal'
@@ -11313,14 +11366,28 @@ 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.
+     * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+     * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+     * panel the tabs in their new order. The tabs can be reordered with a mouse
+     * and a touch screen, but not yet with the keyboard.
      * @exampleComponent limel-example-tab-panel-basic
      * @exampleComponent limel-example-tab-panel-vertical
+     * @exampleComponent limel-example-tab-panel-reorder
      */
     interface LimelTabPanel {
+        /**
+          * Set to `true` to let the user reorder the tabs by dragging them. Listen for `reorderTab` and give the panel the tabs in their new order.
+          * @default false
+         */
+        "allowTabReorder"?: boolean;
         /**
           * Emitted when a tab has been changed
          */
         "onChangeTab"?: (event: LimelTabPanelCustomEvent<Tab>) => void;
+        /**
+          * Emitted when the user has dragged a tab to a new place. The panel does not change `tabs` itself. The tab stays where it was until `tabs` is set to the tabs in their new order.
+         */
+        "onReorderTab"?: (event: LimelTabPanelCustomEvent<TabReorderEvent>) => void;
         /**
           * Whether the tabs are laid out in a row, above the content, or in a column, to the left of it.
           * @default 'horizontal'
@@ -12325,9 +12392,11 @@ declare namespace LocalJSX {
     }
     interface LimelTabBarAttributes {
         "orientation": 'horizontal' | 'vertical';
+        "allowTabReorder": boolean;
     }
     interface LimelTabPanelAttributes {
         "orientation": 'horizontal' | 'vertical';
+        "allowTabReorder": boolean;
     }
     interface LimelTableAttributes {
         "mode": 'local' | 'remote';
@@ -13116,6 +13185,7 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-form-row-layout
              * @exampleComponent limel-example-builtin-field-types-form
              * @exampleComponent limel-example-code-editor-form
+             * @exampleComponent limel-example-form-highlighted-field
              */
             "limel-form": LocalJSX.IntrinsicElements["limel-form"] & JSXBase.HTMLAttributes<HTMLLimelFormElement>;
             /**
@@ -13839,6 +13909,7 @@ declare module "@stencil/core" {
              * A tab bar can contain an unlimited number of tabs. However, depending on the device width and width of the tabs, the number of tabs that are visible at the same time will vary. When there is limited horizontal space, the component shows a left-arrow and/or right-arrow button, which scrolls and reveals the additional tabs. The tab bar can also be swiped left and right on a touch-device. A vertical tab bar does the same, upwards and downwards.
              * The arrows are only a shortcut for people who use a mouse or a touch screen. Screen readers do not announce them, and the Tab key skips them. People who use a keyboard or a screen reader move between the tabs, and the tab bar keeps the selected tab in view.
              * The left and right arrow keys move to the previous and the next tab, and select it. In a vertical tab bar, the up and down arrow keys do that instead. Home and End move to the first and the last tab. Moving past the last tab continues at the first one, and the other way around. The Tab key moves on to what comes after the tab bar, and moving back with Shift and Tab lands on the selected tab, or on the first tab when none is selected.
+             * Set `allowTabReorder` to let the user drag the tabs into the order they want. Every tab then gets a drag handle, and the tab bar emits `reorderTab` when the user drops a tab in a new place. The tab bar does not change `tabs` itself, so the component that uses it decides the new order, and can save it for the user. A tab that the component does not move, stays where it was. The tabs can be reordered with a mouse and a touch screen, but not yet with the keyboard.
              * :::tip Other things to consider
              * Never divide the content of a tab using a nested tab bar.
              * Never place two tab bars within the same screen.
@@ -13851,6 +13922,8 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-tab-bar-with-equal-tab-width
              * @exampleComponent limel-example-tab-bar-vertical
              * @exampleComponent limel-example-tab-bar-tab-width
+             * @exampleComponent limel-example-tab-bar-reorder
+             * @exampleComponent limel-example-tab-bar-reorder-vertical
              */
             "limel-tab-bar": LocalJSX.IntrinsicElements["limel-tab-bar"] & JSXBase.HTMLAttributes<HTMLLimelTabBarElement>;
             /**
@@ -13865,8 +13938,13 @@ 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.
+             * Set `allowTabReorder` to let the user reorder the tabs by dragging them. The
+             * panel does not change `tabs` itself. Listen for `reorderTab`, and give the
+             * panel the tabs in their new order. The tabs can be reordered with a mouse
+             * and a touch screen, but not yet with the keyboard.
              * @exampleComponent limel-example-tab-panel-basic
              * @exampleComponent limel-example-tab-panel-vertical
+             * @exampleComponent limel-example-tab-panel-reorder
              */
             "limel-tab-panel": LocalJSX.IntrinsicElements["limel-tab-panel"] & JSXBase.HTMLAttributes<HTMLLimelTabPanelElement>;
             /**

package/dist/types/util/drag-to-reorder.d.ts

@@ -0,0 +1,65 @@
+export type ReorderDirection = 'vertical' | 'horizontal';
+export interface DragToReorderOptions {
+    /**
+     * Selector for the children of the list that the user can drag.
+     */
+    draggable: string;
+    /**
+     * Put the dragged child back where it was when it is dropped, for a list
+     * whose owner renders the new order itself.
+     */
+    revertDrop?: boolean;
+    /**
+     * Called when a drop has changed the order of the list.
+     */
+    onReorder: (event: ReorderEvent) => void;
+}
+export interface ReorderEvent {
+    /**
+     * The `data-reorder-id` of every child of the list, in the new order.
+     */
+    order: string[];
+    /**
+     * Where the dragged child was before the drop.
+     */
+    fromIndex: number;
+    /**
+     * Where the dragged child is after the drop.
+     */
+    toIndex: number;
+}
+/**
+ * Lets the user reorder the children of a list with a drag handle.
+ *
+ * Every child of the list has a `data-reorder-id`, and the drag starts from
+ * an element with the `data-drag-handle` attribute inside a child.
+ */
+export declare class DragToReorder {
+    private readonly options;
+    private container?;
+    private direction?;
+    private sortable?;
+    private orderBeforeDrag;
+    private nextSiblingBeforeDrag?;
+    private elevatedItem?;
+    private elevationTimeout?;
+    constructor(options: DragToReorderOptions);
+    /**
+     * @param container - the list
+     * @param direction - the way the children are laid out. Leave it out to
+     * let SortableJS find out. Setting up the same list again without it keeps
+     * the direction that the list has.
+     */
+    setup(container: HTMLElement, direction?: ReorderDirection): void;
+    teardown(): void;
+    private readonly handleStart;
+    private readonly handleEnd;
+    private putBack;
+    private changeDirection;
+    private getDraggableItems;
+    private readOrder;
+    private elevate;
+    private keepElevatedBriefly;
+    private removeElevation;
+}
+//# sourceMappingURL=drag-to-reorder.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "40.12.3",
+  "version": "40.13.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",
@@ -54,7 +54,7 @@
   "devDependencies": {
     "@commitlint/cli": "^21.2.3",
     "@commitlint/config-conventional": "^21.2.3",
-    "@limetech/eslint-config": "^5.0.1",
+    "@limetech/eslint-config": "^5.0.3",
     "@microsoft/api-extractor": "^7.59.4",
     "@playwright/test": "1.64.1",
     "@popperjs/core": "^2.11.8",
@@ -76,7 +76,7 @@
     "cross-env": "^10.1.0",
     "dayjs": "^1.11.23",
     "diff": "^9.0.0",
-    "eslint": "^10.12.0",
+    "eslint": "^10.13.0",
     "flatpickr": "^4.6.13",
     "glob": "^13.0.6",
     "globals": "^17.13.0",
@@ -93,7 +93,7 @@
     "morphdom": "^2.7.8",
     "number-abbreviate": "^2.0.0",
     "parse-css-color": "^0.2.1",
-    "postal-mime": "^4.0.7",
+    "postal-mime": "^4.0.8",
     "prettier": "^3.9.10",
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.8",