@limetech/lime-elements 40.12.3 → 40.13.1

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

@@ -1,4 +1,5 @@
 import { h, Host, } from "@stencil/core";
+import translate from "../../global/translations";
 import { getDeepActiveElement } from "../../util/get-deep-active-element";
 import { ESCAPE } from "../../util/keycodes";
 import { createRandomString } from "../../util/random-string";
@@ -44,12 +45,17 @@ function stopEvent(event) {
  * @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
  */
 export class SidePanel {
     constructor() {
+        /**
+         * Defines the language for translations.
+         */
+        this.language = 'en';
         /**
          * Label of the close button. Shown as a tooltip and used as the accessible
          * name.
@@ -65,10 +71,6 @@ export class SidePanel {
          * Buttons in the toolbar, to the right of the close button.
          */
         this.actions = [];
-        /**
-         * Label of the resize handle. Used as the accessible name.
-         */
-        this.resizeLabel = 'Resize';
         /**
          * Whether pressing Escape emits `close`. Set to `false` to let only the
          * close button emit `close`. The panel then does not prevent the Escape
@@ -231,7 +233,7 @@ export class SidePanel {
             .querySelector('button.close')) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: 'ca07c3557df3be7e026a95da296689e1e3c0cf41' }, h("section", { key: '610a8b47c7b34a6d4cb4d253d40cff889ea4c73d', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: 'c9ddb80456ac82cb39801943b55fcd4de3928852', class: "content" }, h("div", { key: 'f1430da0610a4fe71363ead5c7730d627a8a935c', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), this.renderStack(), h("span", { key: 'c7d204c8b323f88962508a4c54493717fe347c8e', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '2a7fa787fd0d4c777f90b2ef7dff1d9316108416', "data-limit": "max", ref: this.setMaxLimit })));
+        return (h(Host, { key: 'f4ddb3df52344cfb6106ab2982c7d0c077e075fb' }, h("section", { key: '2dcf62861e49014f9fc080a945a9c1e0c5bd3920', ref: this.setPanel, role: "dialog", "aria-label": this.label, tabindex: "-1" }, this.renderHandle(), h("div", { key: '169006b7eed55cf37b7db4ce393d29b5d1184d42', class: "content" }, h("div", { key: '9fa270803bf650e258358e7c9031d10f58c35189', class: "toolbar" }, this.renderCloseButton(), this.renderActions()), this.renderHeader(), this.renderBody())), this.renderStack(), h("span", { key: 'c8e01b49683bdaa2d549830930e4247f3a49895b', "data-limit": "min", ref: this.setMinLimit }), h("span", { key: '9baec9cc89a6e1f375f97d4f9069f8951f90bf6a', "data-limit": "max", ref: this.setMaxLimit })));
     }
     // A native button and not `limel-icon-button`, because the hover animation
     // styles the icon, which is inside the shadow root of `limel-icon-button`.
@@ -271,7 +273,15 @@ export class SidePanel {
         if (this.fullScreen) {
             return;
         }
-        return (h("limel-resize-handle", { class: "handle", label: this.resizeLabel, value: (_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now, min: (_b = this.widthRange) === null || _b === void 0 ? void 0 : _b.min, max: (_c = this.widthRange) === null || _c === void 0 ? void 0 : _c.max, onChangeSize: this.handleChangeSize, onEndResize: this.handleEndResize }));
+        return (h("limel-resize-handle", { class: "handle", resizableRegionLabel: this.getRegionLabel(), language: this.language, value: (_a = this.widthRange) === null || _a === void 0 ? void 0 : _a.now, min: (_b = this.widthRange) === null || _b === void 0 ? void 0 : _b.min, max: (_c = this.widthRange) === null || _c === void 0 ? void 0 : _c.max, onChangeSize: this.handleChangeSize, onEndResize: this.handleEndResize }));
+    }
+    getRegionLabel() {
+        if (!this.label) {
+            return translate.get('side-panel.resize-region', this.language);
+        }
+        return translate.get('side-panel.resize-region.named', this.language, {
+            label: this.label,
+        });
     }
     renderBody() {
         return (h("div", { class: "body", ref: this.stopContentEvents }, h("slot", null)));
@@ -409,13 +419,40 @@ export class SidePanel {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Accessible name of the panel. Screen readers announce it. Set it to\nsomething that tells the user what the panel is for."
+                    "text": "Accessible name of the panel. Screen readers announce it. Set it to\nsomething that tells the user what the panel is for.\n\nThe resize handle is named after it, for example \"Resize Customer\ndetails panel\". When no label is set, the handle is named \"Resize side\npanel\"."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "label"
             },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Languages",
+                    "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+                    "references": {
+                        "Languages": {
+                            "location": "import",
+                            "path": "../date-picker/date.types",
+                            "id": "src/components/date-picker/date.types.ts::Languages",
+                            "referenceLocation": "Languages"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the language for translations."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "language",
+                "defaultValue": "'en'"
+            },
             "closeLabel": {
                 "type": "string",
                 "mutable": false,
@@ -486,26 +523,6 @@ export class SidePanel {
                 "setter": false,
                 "defaultValue": "[]"
             },
-            "resizeLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label of the resize handle. Used as the accessible name."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "resize-label",
-                "defaultValue": "'Resize'"
-            },
             "closeOnEscape": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/slider/slider.js

@@ -270,15 +270,15 @@ export class Slider {
         if (this.disabled || this.readonly) {
             inputProps.disabled = true;
         }
-        return (h(Host, { key: '6d910879894ffc7ff36df228e4252e4758622ab9', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '56e3b4dbc963b6923c63a33acb21895f4e86c947', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: 'f74ef31e0b7d67dcc8a231a05f9b00b84de50b33', slot: "content" }, h("div", { key: '4a4018ac095977f89cba99a0222603469d11ce30', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: '3c9dc1fb20dd26ae0ea6cbab0914d5012a9c0184', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
+        return (h(Host, { key: '3a782f6aa420997f4a088e922438245c7c34143b', class: this.getContainerClassList() }, h("limel-notched-outline", { key: '997046fb961c325d2a4a1e5cc51b08d84bcc2274', labelId: this.inputId, label: this.label, required: this.required, invalid: this.invalid, disabled: this.disabled, readonly: this.readonly, hasValue: !this.isUnset, hasFloatingLabel: true }, h("div", { key: '985fceba0aa4385936c06b1e8cd083ead77823b2', slot: "content" }, h("div", { key: '47238548b281254d3fe7e9fe7350890ffb5f573e', class: "slider", style: { '--slider-fraction': `${fraction}` } }, h("input", Object.assign({ key: 'f3fc215a6b2c331342487f206c549e04d109a061', id: this.inputId, type: "range", min: min, max: max, value: this.displayValue, "aria-describedby": this.helperText
                 ? this.helperTextId
                 : undefined, "aria-invalid": this.invalid ? 'true' : undefined, "aria-valuetext": this.isUnset
                 ? translate.get('value-not-set', this.language)
                 : undefined, ref: (el) => {
                 this.inputElement = el;
-            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '4873567abad9bd78cd44cf244bb5c41e87c10e12', class: "track" }, h("div", { key: '165858a4a1ee9ff35ed17b3f31c358b77143af47', class: "active" }), this.renderStepDots(min, max)), h("div", { key: 'ad6a62247047caad0332385713acf0660473589c', class: "thumb" }, h("div", { key: '10a5b6171a86d156de78987caf36c6256b1d3db7', class: "knob" }), h("div", { key: 'dac6f4e48e2345091c58433124afeb29cca52e02', class: "indicator", "aria-hidden": "true" }, this.isUnset
+            }, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }, inputProps)), h("div", { key: '407448db5cd86d489adb909e4c5ecc0e0d050c53', class: "track" }, h("div", { key: '7f8c47aa449ee1a5ffe9c8fbc35e7b8ec9c818ad', class: "active" }), this.renderStepDots(min, max)), h("div", { key: '866541538223dddbd750c57836426941ef4e6139', class: "thumb" }, h("div", { key: 'b663cbb67b3656bec79b81a3d0b47fb08f234bfb', class: "knob" }), h("div", { key: '58bc88bc2c9ff6e1a2c4635708d2dd1c5744e7ac', class: "indicator", "aria-hidden": "true" }, this.isUnset
             ? '\u{2194}\u{FE0E}'
-            : this.displayValue))), h("div", { key: 'b62ca0a0dc80b5d6c370d477a7cb340c5c1fb79d', class: "range-labels" }, h("span", { key: '4455915693d0c95db8f5a05ac344e8de3c7efe4d', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'ef141dec4f89ad937e521cb82b94ad3348904e49', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
+            : this.displayValue))), h("div", { key: '4bc12eebc0006e5e54ff2d6c44d04303e0370de0', class: "range-labels" }, h("span", { key: 'faa2e129c54b50f7503277fdfb8430270a154524', class: "min" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { key: 'ade8069607794cddfddec0d6b5d574b54fb7da0e', class: "max" }, this.multiplyByFactor(this.valuemax), this.unit)))), this.renderClearButton(), this.renderHelperLine()));
     }
     watchValue() {
         this.syncStateFromValue();

package/dist/collection/components/snackbar/snackbar.js

@@ -122,14 +122,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: 'afddc11b55b4f3bdf05bc9ff50ed8c05851d53ac', popover: "manual", style: {
+        return (h("aside", { key: '8783a6f2dfbc27d97e2923e4b1733a605c96426a', popover: "manual", style: {
                 '--snackbar-timeout': `${Math.max(this.timeout || 0, 0)}ms`,
                 '--snackbar-distance-to-top-edge': `${this.offset}px`,
             }, class: {
                 open: this.open,
                 'is-closing': this.closing,
                 'limel-portal--parent': true,
-            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: 'ea4aff6aba7f089e34e48aeb91a2a2d7382f3ca4', class: "surface" }, h("limel-markdown", { key: '3b2cc771e74d951a2dc2118e179c5a7670e2eab2', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
+            }, id: this.snackbarId, role: this.setAriaRoles(), "aria-atomic": this.open ? 'true' : undefined, "aria-relevant": this.open ? 'additions' : undefined }, h("div", { key: '96335eef9b7ea7c5c32a7fe3dc197a5a51f91606', class: "surface" }, h("limel-markdown", { key: 'a28c251f5c22723a816e0c662a479ecd98c59ad0', class: "label", value: this.message }), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

package/dist/collection/components/spinner/spinner.js

@@ -16,7 +16,7 @@ export class Spinner {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: 'ce772c5c7083690c8350e05720a5a1ba3a9119dd' }, h("svg", { key: 'd89a035b940a7cdb9e4f994a94301e91d242605e', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: '9883b127040b5ff110bdd1d8b6d38007fb02df6f' }, h("svg", { key: '019b40d28fc363dd0a6e6b740408df2de717bf65', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

package/dist/collection/components/split-button/split-button.js

@@ -55,9 +55,9 @@ export class SplitButton {
         };
     }
     render() {
-        return (h(Host, { key: 'cb82f37e28c686da8dbdd1d5e0dafc00f5f47f4d', class: {
+        return (h(Host, { key: '7d99f6e787578f89d011b03d7f74555514e26644', class: {
                 'has-menu': this.items.length > 0,
-            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: '227c768350a7e822f766043c31f4d3ccb5d5181c', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
+            }, onClick: this.filterClickWhenDisabled }, h("limel-button", { key: 'b846b51c307b36831bebe2bb6c3c4efc1c9019a9', label: this.label, primary: this.primary, icon: this.icon, disabled: this.disabled, loading: this.loading, loadingFailed: this.loadingFailed }), this.renderMenu()));
     }
     static get is() { return "limel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/switch/switch.js

@@ -78,7 +78,7 @@ export class Switch {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '5193987be5def9c42517ecbc1affc9cbb08d6ff6' }, this.readonly
+        return (h(Host, { key: 'b6c37d2c9a9dc66e7e02271fe7877d24f190aaa9' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

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: 'dc7667c302c9f0e6646fde68910a7db307df4981', role: "tablist", "aria-orientation": this.getOrientation(), onKeyDown: this.handleKeyDown }, h("limel-scroller", { key: 'bedbb5b569822a394582a7f1c3e108206d230912', 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 };
+}