@limetech/lime-elements 40.12.2 → 40.13.0

package/dist/collection/components/tab-bar/tab-bar.css

@@ -128,12 +128,57 @@ limel-scroller {
   background-color: rgb(var(--limel-tab-background-color));
 }
 
-:host(.has-tabs-with-equal-width:not([orientation=vertical])) button {
+:host(.has-tabs-with-equal-width:not([orientation=vertical])) button[role=tab],
+:host(.has-tabs-with-equal-width:not([orientation=vertical])) limel-scroller > div {
   flex: 1 0 auto;
   max-width: var(--tab-bar-horizontal-tab-max-width, none);
 }
 
-button {
+limel-scroller > div:has(limel-drag-handle:hover), limel-scroller > div:has(limel-drag-handle:focus-within), limel-scroller > div.is-elevated, limel-scroller > div.sortable-chosen {
+  will-change: transform, box-shadow, border-radius, background-color;
+}
+limel-scroller > div.sortable-ghost {
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
+}
+limel-scroller > div.sortable-chosen {
+  border-radius: 0.5rem;
+  background-color: var(--lime-elevated-surface-background-color);
+}
+limel-scroller > div.is-elevated[draggable=false] {
+  animation: sit-here 0.8s forwards;
+}
+@keyframes sit-here {
+  0% {
+    border-radius: 0.5rem;
+    background-color: var(--lime-elevated-surface-background-color);
+    box-shadow: var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
+  }
+  100% {
+    box-shadow: none;
+  }
+}
+limel-scroller > div {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+}
+limel-scroller > div button[role=tab] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+limel-scroller > div span.content {
+  padding-right: 2rem;
+}
+limel-scroller > div limel-drag-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  bottom: 0;
+  right: 0.25rem;
+}
+
+button[role=tab] {
   appearance: none;
   background: none;
   border: none;
@@ -156,34 +201,34 @@ button {
   white-space: nowrap;
   font-size: var(--limel-theme-default-font-size);
 }
-button limel-icon {
+button[role=tab] limel-icon {
   transition: color 0.2s ease;
   color: rgb(var(--contrast-800));
   margin-left: -0.25rem;
   flex-shrink: 0;
 }
-button span.text {
+button[role=tab] span.text {
   transition: color 0.2s ease;
   line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--limel-theme-on-surface-color);
 }
-button:hover span.text {
+button[role=tab]:hover span.text {
   color: var(--limel-theme-text-primary-on-background-color);
 }
-button limel-badge {
+button[role=tab] limel-badge {
   margin-right: -0.25rem;
   box-shadow: 0 0 0 1px rgb(var(--contrast-600));
   pointer-events: none;
   flex-shrink: 0;
 }
 
-button[aria-selected=true] {
+button[role=tab][aria-selected=true] {
   background-color: var(--limel-active-tab-background-color);
   z-index: 2;
 }
-button[aria-selected=true]:before, button[aria-selected=true]:after {
+button[role=tab][aria-selected=true]:before, button[role=tab][aria-selected=true]:after {
   content: "";
   display: block;
   width: var(--limel-tab-active-outer-edge-curve-size);
@@ -193,10 +238,10 @@ button[aria-selected=true]:before, button[aria-selected=true]:after {
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");
 }
-button[aria-selected=true] limel-icon {
+button[role=tab][aria-selected=true] limel-icon {
   color: var(--limel-active-tab-color);
 }
-button[aria-selected=true] span.text {
+button[role=tab][aria-selected=true] span.text {
   color: var(--limel-active-tab-color);
 }
 
@@ -211,15 +256,15 @@ span.content {
   padding: 0 0.75rem;
   border-radius: calc(var(--limel-tab-border-radius) - var(--limel-tab-content-inset));
 }
-button:focus-visible span.content {
+button[role=tab]:focus-visible span.content {
   transition-duration: 0.3s;
   box-shadow: var(--shadow-depth-8-focused);
 }
 
-:host(limel-tab-bar:not([orientation=vertical])) button {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab] {
   max-width: var(--tab-bar-horizontal-tab-max-width, 16rem);
 }
-:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):after {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab]:not([aria-selected=true]):after {
   content: "";
   display: block;
   background-color: var(--limel-tab-separator-background-color);
@@ -232,20 +277,21 @@ button:focus-visible span.content {
   border-radius: 1rem;
   right: calc(-1 * var(--limel-tab-separator-width));
 }
-:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):last-of-type:after {
+:host(limel-tab-bar:not([orientation=vertical])) limel-scroller > :last-child:not([aria-selected=true]):after,
+:host(limel-tab-bar:not([orientation=vertical])) limel-scroller > :last-child > button[role=tab]:not([aria-selected=true]):after {
   display: none;
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true] {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true] {
   border-radius: var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before, :host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before, :host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after {
   bottom: 0;
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before {
   left: calc(-1 * var(--limel-tab-active-outer-edge-curve-size));
   transform: rotateY(180deg);
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after {
   right: calc(-1 * var(--limel-tab-active-outer-edge-curve-size));
 }
 
@@ -262,17 +308,17 @@ button:focus-visible span.content {
       0 var(--limel-tab-active-outer-edge-curve-size) 0.25rem;
   height: 100%;
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true] {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true] {
   border-radius: var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius);
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before, :host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before, :host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after {
   right: 0;
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before {
   bottom: 100%;
   transform: rotateY(180deg);
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after {
   top: 100%;
   transform: rotate(180deg);
 }

package/dist/collection/components/tab-bar/tab-bar.js

@@ -1,8 +1,9 @@
 import { h, } from "@stencil/core";
 import { isEqual, difference } from "lodash-es";
-import { setActiveTab } from "./tabs";
+import { getTabReorder, setActiveTab } from "./tabs";
 import { getIconColor, getIconName } from "../icon/get-icon-props";
 import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGET, } from "../../util/keyboard-navigation";
+import { DragToReorder } from "../../util/drag-to-reorder";
 /**
  * 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.
  * :::warning
@@ -13,6 +14,7 @@ import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGE
  * 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.
@@ -26,6 +28,8 @@ import { findNavigationTarget, findTabStop, isNavigationKey, NO_NAVIGATION_TARGE
  * @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 class TabBar {
     constructor() {
@@ -38,8 +42,24 @@ export class TabBar {
          * to, or in a column, next to it.
          */
         this.orientation = 'horizontal';
+        /**
+         * 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.
+         */
+        this.allowTabReorder = false;
         this.hasLoaded = false;
         this.isLaidOutAgain = false;
+        this.renderedTabs = [];
+        this.handleReorder = (event) => {
+            const reorder = getTabReorder(this.tabs, event);
+            if (!reorder) {
+                return;
+            }
+            const ids = this.tabs.map(({ id }) => id);
+            ids.splice(reorder.toIndex, 0, ...ids.splice(reorder.fromIndex, 1));
+            this.tabIdsAfterReorder = ids;
+            this.reorderTab.emit(reorder);
+        };
         this.handleKeyDown = this.handleKeyDown.bind(this);
     }
     async connectedCallback() {
@@ -49,20 +69,39 @@ export class TabBar {
             return;
         }
         this.revealedTabId = undefined;
+        this.setUpReordering();
         await this.revealActiveTab('auto');
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.dragToReorder) === null || _a === void 0 ? void 0 : _a.teardown();
+    }
     componentDidLoad() {
         this.hasLoaded = true;
         this.triggerIconColorWarning();
     }
+    componentWillRender() {
+        var _a;
+        const index = this.getTabElements().indexOf(this.host.shadowRoot.activeElement);
+        this.tabWithFocus =
+            index === -1
+                ? undefined
+                : {
+                    id: (_a = this.renderedTabs[index]) === null || _a === void 0 ? void 0 : _a.id,
+                    button: this.getTabElements()[index],
+                };
+    }
     async componentDidRender() {
+        this.restoreFocus();
+        this.renderedTabs = this.tabs;
+        this.setUpReordering();
         const isLaidOutAgain = this.isLaidOutAgain;
         this.isLaidOutAgain = false;
         await this.revealActiveTab(!this.hasLoaded || isLaidOutAgain ? 'auto' : undefined, isLaidOutAgain);
     }
     render() {
         const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), this.getNavigationOptions());
-        return (h("div", { key: 'f4a760e69615d4d4d87ad3e176d109dbcdf2ea34', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'f3ff8810cf0a248c13aa2d9840c80c6f6270df68', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTab(tab, index, index === tabStop)))));
+        return (h("div", { key: 'a6fea42551095401324faac28bad996dd4137428', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: '956d8b890785071eacb66478e4f6af8bbc467a93', orientation: this.getOrientation() }, this.tabs.map((tab, index) => this.renderTabOrMovableTab(tab, index, index === tabStop)))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);
@@ -70,6 +109,11 @@ export class TabBar {
         if (isEqual(newIds, oldIds)) {
             return;
         }
+        const idsAfterReorder = this.tabIdsAfterReorder;
+        this.tabIdsAfterReorder = undefined;
+        if (isEqual(newIds, idsAfterReorder)) {
+            return;
+        }
         this.revealedTabId = undefined;
     }
     orientationChanged() {
@@ -82,11 +126,41 @@ export class TabBar {
     getNavigationOptions() {
         return { orientation: this.getOrientation(), wrap: true };
     }
+    restoreFocus() {
+        var _a;
+        const tabWithFocus = this.tabWithFocus;
+        this.tabWithFocus = undefined;
+        if (!tabWithFocus || tabWithFocus.button.isConnected) {
+            return;
+        }
+        const index = this.tabs.findIndex((tab) => tab.id === tabWithFocus.id);
+        (_a = this.getTabElements()[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     getTabElements() {
         return [
             ...this.host.shadowRoot.querySelectorAll('button[role="tab"]'),
         ];
     }
+    canReorderTabs() {
+        return this.allowTabReorder && this.tabs.length > 1;
+    }
+    setUpReordering() {
+        var _a, _b;
+        if (!this.canReorderTabs()) {
+            (_a = this.dragToReorder) === null || _a === void 0 ? void 0 : _a.teardown();
+            return;
+        }
+        const scroller = this.host.shadowRoot.querySelector('limel-scroller');
+        if (!scroller) {
+            return;
+        }
+        (_b = this.dragToReorder) !== null && _b !== void 0 ? _b : (this.dragToReorder = new DragToReorder({
+            draggable: '[data-reorder-id]',
+            revertDrop: true,
+            onReorder: this.handleReorder,
+        }));
+        this.dragToReorder.setup(scroller, this.getOrientation());
+    }
     /**
      * 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
@@ -122,8 +196,11 @@ export class TabBar {
         if (!isNavigationKey(event, options)) {
             return;
         }
-        event.preventDefault();
         const current = this.getTabElements().indexOf(event.target);
+        if (current === -1) {
+            return;
+        }
+        event.preventDefault();
         this.activateTab(findNavigationTarget(this.tabs, event.key, current, options));
     }
     activateTab(index) {
@@ -158,8 +235,16 @@ export class TabBar {
         }
         return (h("limel-icon", { name: name, style: style, size: "small", "aria-hidden": "true" }));
     }
+    renderTabOrMovableTab(tab, index, isTabStop) {
+        if (!this.canReorderTabs()) {
+            return this.renderTab(tab, index, isTabStop);
+        }
+        return (h("div", { key: tab.id, role: "presentation", "data-reorder-id": tab.id }, this.renderTab(tab, index, isTabStop), h("limel-drag-handle", { "aria-hidden": "true", dragDirection: this.getOrientation(), tooltipOpenDirection: this.getOrientation() === 'vertical'
+                ? 'right'
+                : 'bottom' })));
+    }
     renderTab(tab, index, isTabStop) {
-        return (h("button", { role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "content" }, this.renderIcon(tab), h("span", { class: "text" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : '')));
+        return (h("button", { key: tab.id, role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabindex: isTabStop ? 0 : -1, onClick: () => this.activateTab(index) }, h("span", { class: "content" }, this.renderIcon(tab), h("span", { class: "text" }, tab.text), tab.badge ? h("limel-badge", { label: tab.badge }) : '')));
     }
     triggerIconColorWarning() {
         if (this.tabs.some((tab) => tab.iconColor)) {
@@ -224,6 +309,26 @@ export class TabBar {
                 "reflect": true,
                 "attribute": "orientation",
                 "defaultValue": "'horizontal'"
+            },
+            "allowTabReorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to let the user reorder the tabs by dragging them. Listen\nfor `reorderTab` and give the tab bar the tabs in their new order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "allow-tab-reorder",
+                "defaultValue": "false"
             }
         };
     }
@@ -250,6 +355,28 @@ export class TabBar {
                         }
                     }
                 }
+            }, {
+                "method": "reorderTab",
+                "name": "reorderTab",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user has dragged a tab to a new place. The tab bar does\nnot change `tabs` itself. The tab stays where it was until `tabs` is set\nto the tabs in their new order."
+                },
+                "complexType": {
+                    "original": "TabReorderEvent",
+                    "resolved": "TabReorderEvent",
+                    "references": {
+                        "TabReorderEvent": {
+                            "location": "import",
+                            "path": "./tab.types",
+                            "id": "src/components/tab-bar/tab.types.ts::TabReorderEvent",
+                            "referenceLocation": "TabReorderEvent"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

package/dist/collection/components/tab-bar/tabs.js

@@ -1,3 +1,4 @@
+import { isEqual } from "lodash-es";
 /**
  * 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.
@@ -15,3 +16,25 @@ export function setActiveTab(tabs, index) {
     result[index] = Object.assign(Object.assign({}, tabs[index]), { active: true });
     return result;
 }
+/**
+ * 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 function getTabReorder(tabs, reorder) {
+    const { order, fromIndex, toIndex } = reorder;
+    const isATab = (index) => index >= 0 && index < tabs.length;
+    if (!isATab(fromIndex) || !isATab(toIndex)) {
+        return undefined;
+    }
+    const orderBeforeTheMove = [...order];
+    orderBeforeTheMove.splice(fromIndex, 0, ...orderBeforeTheMove.splice(toIndex, 1));
+    if (!isEqual(orderBeforeTheMove, tabs.map(({ id }) => String(id)))) {
+        return undefined;
+    }
+    return { tab: tabs[fromIndex], fromIndex, toIndex };
+}

package/dist/collection/components/tab-panel/tab-panel.js

@@ -15,10 +15,16 @@ import { dispatchResizeEvent } from "../../util/dispatch-resize-event";
  * 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 class TabPanel {
     constructor() {
@@ -31,6 +37,11 @@ export class TabPanel {
          * column, to the left of it.
          */
         this.orientation = 'horizontal';
+        /**
+         * 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.
+         */
+        this.allowTabReorder = false;
         this.slotElements = [];
         this.handleChangeTabs = this.handleChangeTabs.bind(this);
         this.setSlotElements = this.setSlotElements.bind(this);
@@ -64,7 +75,7 @@ export class TabPanel {
         }
     }
     render() {
-        return (h(Host, { key: '69b4a7ee8bbe366dd3a001e2d63a96c1680660c1', onChangeTab: this.handleChangeTabs }, h("div", { key: '5844651fd25248b2767127f6ca6ab5f02f03c347', class: "tab-panel" }, h("limel-tab-bar", { key: '0ef45e1bead572d950148b0e4f8b53c8d9f567ce', tabs: this.tabs, orientation: this.orientation }), h("div", { key: 'a8b336877c2bc9b1ebda32fd726d76be3957bbf3', class: "tab-content" }, h("slot", { key: '97e10533292738d2b4d0914eb9922cac0b396bb6' })))));
+        return (h(Host, { key: '3f70176f334708cbe3c0629ed5b00ea26676b187', onChangeTab: this.handleChangeTabs }, h("div", { key: '49d629465a2df872df90a8534aba05db1d1eab6d', class: "tab-panel" }, h("limel-tab-bar", { key: 'c6c7392edaaf36de925bee5851ff24c64cf639a3', tabs: this.tabs, orientation: this.orientation, allowTabReorder: this.allowTabReorder }), h("div", { key: '2f1e5eb59c3ae94fa0dc92a6fe3ba4dec50dd5be', class: "tab-content" }, h("slot", { key: '7441131f62ff758351e44c33c50b4a499e05351c' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();
@@ -165,6 +176,26 @@ export class TabPanel {
                 "reflect": true,
                 "attribute": "orientation",
                 "defaultValue": "'horizontal'"
+            },
+            "allowTabReorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `true` to let the user reorder the tabs by dragging them. Listen\nfor `reorderTab` and give the panel the tabs in their new order."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "allow-tab-reorder",
+                "defaultValue": "false"
             }
         };
     }
@@ -191,6 +222,28 @@ export class TabPanel {
                         }
                     }
                 }
+            }, {
+                "method": "reorderTab",
+                "name": "reorderTab",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user has dragged a tab to a new place. The panel does\nnot change `tabs` itself. The tab stays where it was until `tabs` is set\nto the tabs in their new order."
+                },
+                "complexType": {
+                    "original": "TabReorderEvent",
+                    "resolved": "TabReorderEvent",
+                    "references": {
+                        "TabReorderEvent": {
+                            "location": "import",
+                            "path": "../tab-bar/tab.types",
+                            "id": "src/components/tab-bar/tab.types.ts::TabReorderEvent",
+                            "referenceLocation": "TabReorderEvent"
+                        }
+                    }
+                }
             }];
     }
     static get elementRef() { return "host"; }

package/dist/collection/util/drag-to-reorder.js

@@ -0,0 +1,116 @@
+import Sortable from "sortablejs";
+const DRAG_HANDLE_SELECTOR = '[data-drag-handle]';
+const DRAGGING_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';
+const ELEVATED_ITEM_CLASS = 'is-elevated';
+const ELEVATION_DURATION_MS = 1000;
+const TOUCH_DRAG_DELAY_MS = 200;
+const ANIMATION_DURATION_MS = 150;
+/**
+ * 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 class DragToReorder {
+    constructor(options) {
+        this.options = options;
+        this.orderBeforeDrag = [];
+        this.handleStart = (event) => {
+            var _a, _b;
+            this.orderBeforeDrag = this.readOrder();
+            this.nextSiblingBeforeDrag = (_a = event.item.nextElementSibling) !== null && _a !== void 0 ? _a : undefined;
+            (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.add(DRAGGING_CONTAINER_CLASS);
+            this.elevate(event.item);
+        };
+        this.handleEnd = (event) => {
+            var _a;
+            (_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.remove(DRAGGING_CONTAINER_CLASS);
+            this.keepElevatedBriefly(event.item);
+            const order = this.readOrder();
+            const id = event.item.dataset.reorderId;
+            const fromIndex = this.orderBeforeDrag.indexOf(id);
+            const toIndex = order.indexOf(id);
+            const nextSibling = this.nextSiblingBeforeDrag;
+            this.orderBeforeDrag = [];
+            this.nextSiblingBeforeDrag = undefined;
+            if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
+                return;
+            }
+            if (this.options.revertDrop) {
+                this.putBack(event.item, nextSibling);
+            }
+            this.options.onReorder({ order, fromIndex, toIndex });
+        };
+    }
+    /**
+     * @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, direction) {
+        if (this.getDraggableItems(container).length < 2) {
+            this.teardown();
+            return;
+        }
+        if (this.sortable && this.container === container) {
+            this.changeDirection(direction);
+            return;
+        }
+        this.teardown();
+        this.container = container;
+        this.direction = direction;
+        this.sortable = Sortable.create(container, Object.assign(Object.assign({ animation: ANIMATION_DURATION_MS, handle: DRAG_HANDLE_SELECTOR, draggable: this.options.draggable, delay: TOUCH_DRAG_DELAY_MS, delayOnTouchOnly: true }, (direction && { direction: direction })), { onStart: this.handleStart, onEnd: this.handleEnd }));
+    }
+    teardown() {
+        var _a, _b;
+        (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.sortable = undefined;
+        this.removeElevation();
+        (_b = this.container) === null || _b === void 0 ? void 0 : _b.classList.remove(DRAGGING_CONTAINER_CLASS);
+        this.container = undefined;
+        this.direction = undefined;
+        this.orderBeforeDrag = [];
+        this.nextSiblingBeforeDrag = undefined;
+    }
+    putBack(item, nextSibling) {
+        const isStillInList = (nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.parentNode) === this.container;
+        this.container.insertBefore(item, isStillInList ? nextSibling : null);
+    }
+    changeDirection(direction) {
+        if (!direction || direction === this.direction) {
+            return;
+        }
+        this.direction = direction;
+        this.sortable.option('direction', direction);
+    }
+    getDraggableItems(container) {
+        return [...container.children].filter((child) => child.matches(this.options.draggable));
+    }
+    readOrder() {
+        var _a, _b;
+        const children = [...((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : [])];
+        return children
+            .filter((child) => {
+            return (child instanceof HTMLElement &&
+                child.dataset.reorderId !== undefined);
+        })
+            .map((child) => child.dataset.reorderId);
+    }
+    elevate(item) {
+        this.removeElevation();
+        item.classList.add(ELEVATED_ITEM_CLASS);
+        this.elevatedItem = item;
+    }
+    keepElevatedBriefly(item) {
+        this.elevate(item);
+        this.elevationTimeout = setTimeout(() => this.removeElevation(), ELEVATION_DURATION_MS);
+    }
+    removeElevation() {
+        var _a;
+        clearTimeout(this.elevationTimeout);
+        this.elevationTimeout = undefined;
+        (_a = this.elevatedItem) === null || _a === void 0 ? void 0 : _a.classList.remove(ELEVATED_ITEM_CLASS);
+        this.elevatedItem = undefined;
+    }
+}

package/dist/esm/{_baseForOwn-D5j7fHlv.js → _baseForOwn-vKFWmmaS.js}

@@ -1,4 +1,4 @@
-import { k as keys } from './_baseIsEqual-CyF4P8uM.js';
+import { k as keys } from './_baseIsEqual-B_JRErB0.js';
 
 /**
  * Creates a base function for methods like `_.forIn` and `_.forOwn`.

package/dist/esm/{_baseIsEqual-CyF4P8uM.js → _baseIsEqual-B_JRErB0.js}

@@ -1203,4 +1203,4 @@ function baseIsEqual(value, other, bitmask, customizer, stack) {
   return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
 }
 
-export { MapCache as M, SetCache as S, Uint8Array as U, Stack as a, baseIsEqual as b, cacheHas as c, arrayPush as d, arrayLikeKeys as e, stubArray as f, getAllKeys as g, getSymbols as h, baseGetAllKeys as i, keys as k, setToArray as s };
+export { MapCache as M, SetCache as S, Uint8Array as U, arrayPush as a, baseIsEqual as b, cacheHas as c, Stack as d, arrayLikeKeys as e, stubArray as f, getAllKeys as g, getSymbols as h, baseGetAllKeys as i, keys as k, setToArray as s };