@limetech/lime-elements 40.12.3 → 40.13.1

package/dist/lime-elements/p-f1ac7608.entry.js

@@ -0,0 +1 @@
+import{r as t,c as a,h as s,H as i,a as e}from"./p-BU9IJqli.js";import{d as o}from"./p-z_E3sq3p.js";const h=class{constructor(s){t(this,s),this.changeTab=a(this,"changeTab",7),this.reorderTab=a(this,"reorderTab",7),this.tabs=[],this.orientation="horizontal",this.allowTabReorder=!1,this.slotElements=[],this.handleChangeTabs=this.handleChangeTabs.bind(this),this.setSlotElements=this.setSlotElements.bind(this),this.setTabStatus=this.setTabStatus.bind(this)}connectedCallback(){this.initialize()}componentDidLoad(){this.initialize()}initialize(){const t=this.getSlot();if(t){t.addEventListener("slotchange",this.setSlotElements),this.setSlotElements();for(const t of this.tabs)this.setTabStatus(t)}}disconnectedCallback(){this.getSlot().removeEventListener("slotchange",this.setSlotElements)}tabsChanged(){this.hidePanels();for(const t of this.tabs)this.setTabStatus(t)}render(){return s(i,{key:"530a6e0b8ae7387edaf8e0c1b6360a5a8099f155",onChangeTab:this.handleChangeTabs},s("div",{key:"5d2ba03a54a5315b9c400d28b8dc0967a41a34fe",class:"tab-panel"},s("limel-tab-bar",{key:"69183dd7c31a1d5c6d7027a81bf152586bf6fd0a",tabs:this.tabs,orientation:this.orientation,allowTabReorder:this.allowTabReorder}),s("div",{key:"f7ac219b8f1941a1b2b5656f36646077165b2ec9",class:"tab-content"},s("slot",{key:"177a1e39cdc731a2e77b6d06a691851a193b2a40"}))))}setSlotElements(){const t=this.getSlot();this.hidePanels(),this.slotElements=Array.prototype.slice.call(t.assignedElements());for(const t of this.tabs)this.setTabStatus(t)}setTabStatus(t){const a=this.slotElements.find((a=>a.id===t.id));a&&(a.style.display=t.active?"":"none",a.tab=t)}handleChangeTabs(t){this.tabs=this.tabs.map((a=>a.id===t.detail.id?t.detail:a)),this.setTabStatus(t.detail),setTimeout(o,0)}getSlot(){return this.host.shadowRoot.querySelector("slot")}hidePanels(){for(const t of this.slotElements)t.style.display="none"}get host(){return e(this)}static get watchers(){return{tabs:[{tabsChanged:0}]}}};h.style=":host(limel-tab-panel){--tab-panel-background-color:rgb(var(--contrast-100));display:block;height:100%}.tab-panel{height:100%;position:relative;display:flex;flex-direction:column}.tab-content{height:100%;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box;background-color:var(--tab-panel-background-color)}:host(limel-tab-panel[orientation=vertical]) div.tab-panel{flex-direction:row}:host(limel-tab-panel[orientation=vertical]) div.tab-content{min-width:0}";export{h as limel_tab_panel}

package/dist/lime-elements/{p-c12fbc91.entry.js → p-f455150b.entry.js}

@@ -1 +1 @@
-import{r as t,h as s,H as i,a as e}from"./p-BU9IJqli.js";const o=class{constructor(s){t(this,s),this.ordered=!1,this.containerHeight=0,this.hasRendered=!1,this.pendingLayoutFrame=null}onOrderedChange(){this.scheduleLayout()}componentDidLoad(){this.setupObservers(),this.layoutItems(),this.hasRendered=!0}connectedCallback(){this.hasRendered&&(this.setupObservers(),this.scheduleLayout())}disconnectedCallback(){var t,s,i;null===(t=this.resizeObserver)||void 0===t||t.disconnect(),null===(s=this.mutationObserver)||void 0===s||s.disconnect(),null===(i=this.itemResizeObserver)||void 0===i||i.disconnect(),null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame)}render(){return s(i,{key:"4739b8085adca277a42f36478b1692970e2a8675",style:{height:`${this.containerHeight}rem`},class:{"is-laid-out":this.hasRendered}},s("slot",{key:"14290465ddb5ea67ff9d2883904f3298900151ee"}))}setupObservers(){this.resizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.resizeObserver.observe(this.host),this.itemResizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.mutationObserver=new MutationObserver((()=>{this.observeItemSizes(),this.scheduleLayout()})),this.mutationObserver.observe(this.host,{childList:!0}),this.observeItemSizes()}observeItemSizes(){var t;null===(t=this.itemResizeObserver)||void 0===t||t.disconnect();const s=this.getItems();for(const t of s)this.itemResizeObserver.observe(t)}getItems(){return[...this.host.children].filter((t=>t instanceof HTMLElement))}getRootFontSize(){return Number.parseFloat(getComputedStyle(document.documentElement).fontSize)}pxToRem(t,s){return t/s}getCssPropertyInPx(t,s,i){const e=getComputedStyle(this.host).getPropertyValue(t).trim()||s,o=Number.parseFloat(e);return e.endsWith("px")?o:o*i}scheduleLayout(){null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame),this.pendingLayoutFrame=requestAnimationFrame((()=>{this.pendingLayoutFrame=null,this.layoutItems()}))}layoutItems(){const t=this.getItems();if(0===t.length)return void(this.containerHeight=0);const s=this.host.offsetWidth;if(!s)return;const i=this.getRootFontSize(),e=this.getCssPropertyInPx("--masonry-layout-gap","1rem",i),{columnCount:o,columnWidth:n}=this.calculateColumns(s,e,i),r=this.positionItems(t,o,n,e,i),h=this.pxToRem(Math.max(...r)-e,i);Math.abs(h-this.containerHeight)>.1&&(this.containerHeight=h)}calculateColumns(t,s,i){const e=this.getCssPropertyInPx("--masonry-layout-min-column-width","12rem",i),o=Math.max(1,Math.floor((t+s)/(e+s)));return{columnCount:o,columnWidth:(t-(o-1)*s)/o}}positionItems(t,s,i,e,o){const n=Array.from({length:s},(()=>0));let r=0;for(const h of t){const t=this.ordered?r%s:n.indexOf(Math.min(...n)),a=t*(i+e),l=n[t];h.style.position="absolute",h.style.left=`${this.pxToRem(a,o)}rem`,h.style.top=`${this.pxToRem(l,o)}rem`,h.style.width=`${this.pxToRem(i,o)}rem`,this.hasRendered||this.staggerFadeIn(h,r),n[t]+=h.offsetHeight+e,r++}return n}staggerFadeIn(t,s){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;t.style.transition="opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1)",t.style.transitionDelay=20*s+"ms";const i=s=>{s.target===t&&"opacity"===s.propertyName&&(t.style.transition="",t.style.transitionDelay="",t.removeEventListener("transitionend",i))};t.addEventListener("transitionend",i)}get host(){return e(this)}static get watchers(){return{ordered:[{onOrderedChange:0}]}}};o.style=":host(limel-masonry-layout){display:block;position:relative;box-sizing:border-box;visibility:hidden}:host(limel-masonry-layout) ::slotted(*){opacity:0;box-sizing:border-box}:host(limel-masonry-layout.is-laid-out){visibility:visible}:host(limel-masonry-layout.is-laid-out) ::slotted(*){opacity:1}";export{o as limel_masonry_layout}
+import{r as t,h as s,H as i,a as e}from"./p-BU9IJqli.js";const o=class{constructor(s){t(this,s),this.ordered=!1,this.containerHeight=0,this.hasRendered=!1,this.pendingLayoutFrame=null}onOrderedChange(){this.scheduleLayout()}componentDidLoad(){this.setupObservers(),this.layoutItems(),this.hasRendered=!0}connectedCallback(){this.hasRendered&&(this.setupObservers(),this.scheduleLayout())}disconnectedCallback(){var t,s,i;null===(t=this.resizeObserver)||void 0===t||t.disconnect(),null===(s=this.mutationObserver)||void 0===s||s.disconnect(),null===(i=this.itemResizeObserver)||void 0===i||i.disconnect(),null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame)}render(){return s(i,{key:"b25a2eb6e10535aa5fedb8de8baeb96f51e10739",style:{height:`${this.containerHeight}rem`},class:{"is-laid-out":this.hasRendered}},s("slot",{key:"fa2c4773d1fb41e2ea0725a28911840e45e5c809"}))}setupObservers(){this.resizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.resizeObserver.observe(this.host),this.itemResizeObserver=new ResizeObserver((()=>{this.scheduleLayout()})),this.mutationObserver=new MutationObserver((()=>{this.observeItemSizes(),this.scheduleLayout()})),this.mutationObserver.observe(this.host,{childList:!0}),this.observeItemSizes()}observeItemSizes(){var t;null===(t=this.itemResizeObserver)||void 0===t||t.disconnect();const s=this.getItems();for(const t of s)this.itemResizeObserver.observe(t)}getItems(){return[...this.host.children].filter((t=>t instanceof HTMLElement))}getRootFontSize(){return Number.parseFloat(getComputedStyle(document.documentElement).fontSize)}pxToRem(t,s){return t/s}getCssPropertyInPx(t,s,i){const e=getComputedStyle(this.host).getPropertyValue(t).trim()||s,o=Number.parseFloat(e);return e.endsWith("px")?o:o*i}scheduleLayout(){null!==this.pendingLayoutFrame&&cancelAnimationFrame(this.pendingLayoutFrame),this.pendingLayoutFrame=requestAnimationFrame((()=>{this.pendingLayoutFrame=null,this.layoutItems()}))}layoutItems(){const t=this.getItems();if(0===t.length)return void(this.containerHeight=0);const s=this.host.offsetWidth;if(!s)return;const i=this.getRootFontSize(),e=this.getCssPropertyInPx("--masonry-layout-gap","1rem",i),{columnCount:o,columnWidth:n}=this.calculateColumns(s,e,i),r=this.positionItems(t,o,n,e,i),h=this.pxToRem(Math.max(...r)-e,i);Math.abs(h-this.containerHeight)>.1&&(this.containerHeight=h)}calculateColumns(t,s,i){const e=this.getCssPropertyInPx("--masonry-layout-min-column-width","12rem",i),o=Math.max(1,Math.floor((t+s)/(e+s)));return{columnCount:o,columnWidth:(t-(o-1)*s)/o}}positionItems(t,s,i,e,o){const n=Array.from({length:s},(()=>0));let r=0;for(const h of t){const t=this.ordered?r%s:n.indexOf(Math.min(...n)),a=t*(i+e),l=n[t];h.style.position="absolute",h.style.left=`${this.pxToRem(a,o)}rem`,h.style.top=`${this.pxToRem(l,o)}rem`,h.style.width=`${this.pxToRem(i,o)}rem`,this.hasRendered||this.staggerFadeIn(h,r),n[t]+=h.offsetHeight+e,r++}return n}staggerFadeIn(t,s){if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;t.style.transition="opacity 0.2s cubic-bezier(0.2, 0, 0.2, 1)",t.style.transitionDelay=20*s+"ms";const i=s=>{s.target===t&&"opacity"===s.propertyName&&(t.style.transition="",t.style.transitionDelay="",t.removeEventListener("transitionend",i))};t.addEventListener("transitionend",i)}get host(){return e(this)}static get watchers(){return{ordered:[{onOrderedChange:0}]}}};o.style=":host(limel-masonry-layout){display:block;position:relative;box-sizing:border-box;visibility:hidden}:host(limel-masonry-layout) ::slotted(*){opacity:0;box-sizing:border-box}:host(limel-masonry-layout.is-laid-out){visibility:visible}:host(limel-masonry-layout.is-laid-out) ::slotted(*){opacity:1}";export{o as limel_masonry_layout}

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

@@ -17,6 +17,7 @@ import { FormError, FormSchema, ValidationError, ValidationStatus } from './form
  * @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
  */
 export declare class Form {
     /**
@@ -57,6 +58,18 @@ export declare class Form {
      * which keeps untouched required-empty fields silent.
      */
     revealErrors: boolean;
+    /**
+     * 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
      */
@@ -73,11 +86,13 @@ export declare class Form {
     constructor();
     connectedCallback(): void;
     componentDidLoad(): void;
+    protected handleHighlightedFieldChange(newPath?: Array<string | number>, oldPath?: Array<string | number>): void;
     private initialize;
     componentDidUpdate(): void;
     disconnectedCallback(): void;
     render(): any;
     private reactRender;
+    private showHighlightedField;
     private handleChange;
     private validateFormData;
     /**

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/resize-handle/resize-handle.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Languages } from '../date-picker/date.types';
 /**
  * A handle on an edge of an element. The user drags the handle, or presses an
  * arrow key while the handle has focus, to resize the element.
@@ -13,9 +14,18 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * `static`. If other content covers the handle, also give the element
  * `isolation: isolate`.
  *
+ * ## Accessibility
+ * The user reaches the handle with the <kbd>Tab</kbd> key. The handle is named
+ * "Resize" followed by `resizableRegionLabel`, for example "Resize side
+ * panel". A tooltip shows the name and how to resize. While the pointer is
+ * over the handle, it says to drag the handle. While the handle has keyboard
+ * focus, it says which arrow keys to press, which fit `location`. Screen
+ * readers read the arrow keys as the description of the handle.
+ *
  * @exampleComponent limel-example-resize-handle-basic
  * @exampleComponent limel-example-resize-handle-locations
  * @exampleComponent limel-example-resize-handle-grab-area
+ * @exampleComponent limel-example-resize-handle-accessibility
  * @private
  */
 export declare class ResizeHandle {
@@ -24,9 +34,20 @@ export declare class ResizeHandle {
      */
     location: 'left' | 'right' | 'top' | 'bottom';
     /**
-     * The accessible name of the handle.
+     * The name of the region that the handle resizes, for example
+     * `side panel`. The accessible name of the handle is "Resize" followed by
+     * this name, for example "Resize side panel". When no name is set, the
+     * handle is named "Resize this region".
+     *
+     * Write the name in the language that is set in `language`, in the form
+     * that reads right after "Resize", for example `side panel` in English
+     * and `sidopanelen` in Swedish.
+     */
+    resizableRegionLabel?: string;
+    /**
+     * Defines the language for translations.
      */
-    label: string;
+    language: Languages;
     /**
      * The size of the element, in pixels: the width when `location` is `left`
      * or `right`, and the height when it is `top` or `bottom`.
@@ -52,11 +73,19 @@ export declare class ResizeHandle {
      * press. Pressing and releasing the handle without moving it emits nothing.
      */
     endResize: EventEmitter<void>;
+    private isPointerOver;
+    private hasKeyboardFocus;
     private host;
     private stopResizing?;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;
+    private getName;
+    private getHint;
+    private handlePointerEnter;
+    private handlePointerLeave;
+    private handleFocus;
+    private handleBlur;
     private handleKeyDown;
     private elementSize;
     private resizableElement;

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { Languages } from '../date-picker/date.types';
 import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from './side-panel.types';
 /**
  * A resizable panel that is displayed on top of the right side of the page.
@@ -24,6 +25,7 @@ import { SidePanelAction, SidePanelActionSelect, SidePanelEntry } from './side-p
  * @exampleComponent limel-example-side-panel-header-actions
  * @exampleComponent limel-example-side-panel-stacking
  * @exampleComponent limel-example-side-panel-full-screen
+ * @exampleComponent limel-example-side-panel-accessibility
  * @slot - Content of the panel
  * @slot header-actions - Small controls at the right end of the header. Content that is larger than half the header width or the height of the headings is cut off.
  * @private
@@ -32,8 +34,16 @@ export declare class SidePanel {
     /**
      * Accessible name of the panel. Screen readers announce it. Set it to
      * something that tells the user what the panel is for.
+     *
+     * The resize handle is named after it, for example "Resize Customer
+     * details panel". When no label is set, the handle is named "Resize side
+     * panel".
      */
     label?: string;
+    /**
+     * Defines the language for translations.
+     */
+    language: Languages;
     /**
      * Label of the close button. Shown as a tooltip and used as the accessible
      * name.
@@ -49,10 +59,6 @@ export declare class SidePanel {
      * Buttons in the toolbar, to the right of the close button.
      */
     actions: SidePanelAction[];
-    /**
-     * Label of the resize handle. Used as the accessible name.
-     */
-    resizeLabel: string;
     /**
      * Whether pressing Escape emits `close`. Set to `false` to let only the
      * close button emit `close`. The panel then does not prevent the Escape
@@ -120,6 +126,7 @@ export declare class SidePanel {
     private renderBack;
     private renderHeader;
     private renderHandle;
+    private getRegionLabel;
     private renderBody;
     /**
      * Components in the content can emit events with the same names as the

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();