@limetech/lime-elements 40.13.0 → 40.14.0

package/dist/collection/components/resize-handle/resize-handle.css

@@ -105,14 +105,20 @@
   position: absolute;
   z-index: 1;
   touch-action: none;
+}
+
+div[role=separator] {
+  position: absolute;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100vh;
+  outline: none;
 }
 
-:host::before,
-:host::after {
+div[role=separator]::before,
+div[role=separator]::after {
   pointer-events: none;
   content: "";
   display: block;
@@ -122,13 +128,13 @@
   margin: auto;
 }
 
-:host::before {
+div[role=separator]::before {
   transition: scale 0.3s ease, opacity 0.3s ease;
   transition-delay: 0.2s;
   opacity: 0;
 }
 
-:host::after {
+div[role=separator]::after {
   transition: background-color 0.4s ease;
   transition-delay: 0.2s;
   background-color: rgb(var(--contrast-600));
@@ -141,14 +147,14 @@
   right: 0;
   left: 0;
 }
-:host([location=top])::before,
-:host([location=bottom])::before {
+:host([location=top]) div[role=separator]::before,
+:host([location=bottom]) div[role=separator]::before {
   scale: 1 0.9;
   height: 0.5rem;
   width: var(--limel-resize-handle-visual-length, auto);
 }
-:host([location=top])::after,
-:host([location=bottom])::after {
+:host([location=top]) div[role=separator]::after,
+:host([location=bottom]) div[role=separator]::after {
   height: 0.125rem;
   width: var(--limel-resize-handle-visual-length, auto);
 }
@@ -156,11 +162,11 @@
 :host([location=top]) {
   top: 0;
 }
-:host([location=top])::before {
+:host([location=top]) div[role=separator]::before {
   top: 0;
   bottom: auto;
 }
-:host([location=top])::after {
+:host([location=top]) div[role=separator]::after {
   top: calc((0.5rem - 0.125rem) / 2);
   bottom: auto;
 }
@@ -168,11 +174,11 @@
 :host([location=bottom]) {
   bottom: 0;
 }
-:host([location=bottom])::before {
+:host([location=bottom]) div[role=separator]::before {
   top: auto;
   bottom: 0;
 }
-:host([location=bottom])::after {
+:host([location=bottom]) div[role=separator]::after {
   top: auto;
   bottom: calc((0.5rem - 0.125rem) / 2);
 }
@@ -184,12 +190,12 @@
   top: 0;
   bottom: 0;
 }
-:host([location=left])::before,
-:host([location=right])::before {
+:host([location=left]) div[role=separator]::before,
+:host([location=right]) div[role=separator]::before {
   scale: 0.9 1;
 }
-:host([location=left])::after,
-:host([location=right])::after {
+:host([location=left]) div[role=separator]::after,
+:host([location=right]) div[role=separator]::after {
   width: 0.125rem;
 }
 
@@ -201,12 +207,8 @@
   right: 0;
 }
 
-:host(:focus-visible) {
-  outline: none;
-}
-
-:host(:hover)::before,
-:host(:focus-visible)::before {
+:host(:hover) div[role=separator]::before,
+:host div[role=separator]:focus-visible::before {
   transition-duration: 0.46s;
   transition-timing-function: ease-in;
   opacity: 1;
@@ -214,14 +216,14 @@
   background-color: rgb(var(--color-sky-light), 0.4);
 }
 
-:host(:hover)::after,
-:host(:focus-visible)::after {
+:host(:hover) div[role=separator]::after,
+:host div[role=separator]:focus-visible::after {
   transition-duration: 0.2s;
   transition-timing-function: ease-in;
   background-color: rgb(var(--color-sky-default));
 }
 
-div {
+div[role=presentation] {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   pointer-events: none;
   position: relative;
@@ -237,38 +239,38 @@ div {
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-pressed);
 }
-div span {
+div[role=presentation] span {
   transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   border-radius: 0.125rem;
   width: 0.25rem;
   height: 0.125rem;
   background-color: rgb(var(--contrast-700));
 }
-:host([location=top]) div {
+:host([location=top]) div[role=presentation] {
   margin-top: 0;
   margin-bottom: auto;
 }
-:host([location=bottom]) div {
+:host([location=bottom]) div[role=presentation] {
   margin-top: auto;
   margin-bottom: 0;
 }
-:host([aria-orientation=vertical]) div {
+div[role=separator][aria-orientation=vertical] > div[role=presentation] {
   rotate: 90deg;
 }
 
 :host(:hover),
-:host(:focus-visible) {
+:host div[role=separator]:focus-visible {
   --limel-clickable-transition-speed: 0.2s;
   --limel-clickable-transform-speed: 0.16s;
 }
-:host(:hover) div,
-:host(:focus-visible) div {
+:host(:hover) div[role=presentation],
+:host div[role=separator]:focus-visible div[role=presentation] {
   will-change: background-color, box-shadow, transform;
   transform: translate3d(0, -0.04rem, 0);
   box-shadow: var(--button-shadow-normal);
 }
 :host(:hover) span,
-:host(:focus-visible) span {
+:host div[role=separator]:focus-visible span {
   will-change: background-color;
   background-color: var(--mdc-theme-primary);
 }

package/dist/collection/components/resize-handle/resize-handle.js

@@ -1,6 +1,8 @@
 import { h, Host, } from "@stencil/core";
+import translate from "../../global/translations";
 import { dragToResize } from "../../util/drag-to-resize";
 import { getKeyboardSizeChange, getOrientation, measureSize, } from "../../util/resize-location";
+const SEPARATOR_ID = 'separator';
 /**
  * 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.
@@ -15,9 +17,18 @@ import { getKeyboardSizeChange, getOrientation, measureSize, } from "../../util/
  * `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 class ResizeHandle {
@@ -26,12 +37,31 @@ export class ResizeHandle {
          * The location of the handle relative to the resizable element.
          */
         this.location = 'left';
+        /**
+         * Defines the language for translations.
+         */
+        this.language = 'en';
+        this.isPointerOver = false;
+        this.hasKeyboardFocus = false;
+        this.handlePointerEnter = () => {
+            this.isPointerOver = true;
+        };
+        this.handlePointerLeave = () => {
+            this.isPointerOver = false;
+        };
+        this.handleFocus = (event) => {
+            this.hasKeyboardFocus = event.currentTarget.matches(':focus-visible');
+        };
+        this.handleBlur = () => {
+            this.hasKeyboardFocus = false;
+        };
         this.handleKeyDown = (event) => {
             const change = getKeyboardSizeChange(this.location, event.key);
             if (change === undefined) {
                 return;
             }
             event.preventDefault();
+            this.hasKeyboardFocus = true;
             this.changeSize.emit(this.elementSize() + change);
             this.endResize.emit();
         };
@@ -53,7 +83,25 @@ export class ResizeHandle {
         this.stopResizing = undefined;
     }
     render() {
-        return (h(Host, { key: 'b4f84fff38ded8d6493be55685fbe1c8d27affdb', role: "separator", "aria-orientation": getOrientation(this.location), "aria-label": this.label, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, tabindex: "0", onKeyDown: this.handleKeyDown }, h("div", { key: '02b4abbc61b0dd571ceda1d69de057605523e29a', role: "presentation" }, h("span", { key: 'ea5083fca722c11df72f4b0f647f087732a28033' }), h("span", { key: '81a176e0594f20572dbc94aea0e5dc7709a21d96' }), h("span", { key: '4c39fcd49f2ad087f16a032dfa085d3a8630c41e' }))));
+        const name = this.getName();
+        return (h(Host, { key: 'a764146953b0d52a3a3b81450e8e1e65c90c5210', onKeyDown: this.handleKeyDown, onPointerEnter: this.handlePointerEnter, onPointerLeave: this.handlePointerLeave }, h("div", { key: '0d65a5646d9ede0f310045cb2858c554210c001a', role: "separator", id: SEPARATOR_ID, tabindex: "0", "aria-orientation": getOrientation(this.location), "aria-label": name, "aria-valuenow": this.value, "aria-valuemin": this.min, "aria-valuemax": this.max, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("div", { key: '6c5d001384b9b7289c7a40c641c858c7c72de3ca', role: "presentation" }, h("span", { key: 'c43208aff2850d3e3ce439774e069d3bba23bdec' }), h("span", { key: 'f30a64d1bde31ba4a6578d2cdb71ad742bc55ae6' }), h("span", { key: '6d6bac3ba8a6ad7cbdebc730084eed8a8df2f9a2' }))), h("limel-tooltip", { key: '9e2c59edf8223ff52a634e227855ca8b1b4d7664', elementId: SEPARATOR_ID, label: name, helperLabel: this.getHint(), openDirection: this.location })));
+    }
+    getName() {
+        if (!this.resizableRegionLabel) {
+            return translate.get('resize-handle.resize-this-region', this.language);
+        }
+        return translate.get('resize-handle.resize', this.language, {
+            region: this.resizableRegionLabel,
+        });
+    }
+    getHint() {
+        if (this.isPointerOver && !this.hasKeyboardFocus) {
+            return translate.get('resize-handle.drag', this.language);
+        }
+        const key = getOrientation(this.location) === 'vertical'
+            ? 'resize-handle.keys-left-right'
+            : 'resize-handle.keys-up-down';
+        return translate.get(key, this.language);
     }
     resizableElement() {
         if (this.host.parentElement) {
@@ -63,6 +111,7 @@ export class ResizeHandle {
     }
     static get is() { return "limel-resize-handle"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["resize-handle.scss"]
@@ -95,7 +144,7 @@ export class ResizeHandle {
                 "attribute": "location",
                 "defaultValue": "'left'"
             },
-            "label": {
+            "resizableRegionLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -104,15 +153,42 @@ export class ResizeHandle {
                     "references": {}
                 },
                 "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the region that the handle resizes, for example\n`side panel`. The accessible name of the handle is \"Resize\" followed by\nthis name, for example \"Resize side panel\". When no name is set, the\nhandle is named \"Resize this region\".\n\nWrite the name in the language that is set in `language`, in the form\nthat reads right after \"Resize\", for example `side panel` in English\nand `sidopanelen` in Swedish."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "resizable-region-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": "The accessible name of the handle."
+                    "text": "Defines the language for translations."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "label"
+                "attribute": "language",
+                "defaultValue": "'en'"
             },
             "value": {
                 "type": "number",
@@ -173,6 +249,12 @@ export class ResizeHandle {
             }
         };
     }
+    static get states() {
+        return {
+            "isPointerOver": {},
+            "hasKeyboardFocus": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "changeSize",

package/dist/collection/components/scroller/scroller.js

@@ -87,12 +87,12 @@ export class Scroller {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'c208de7a73b1d3d040a0a76b2bdc7bad3d5ab739' }, h("div", { key: '5e69255f710a5f5f439553fa1f9b183e9dc5a9bd', class: {
+        return (h(Host, { key: '6e546a2b31136af45497d3de8369754b33992da9' }, h("div", { key: '22fbd0723a170201a422d073f41ce8e2a0d726d3', class: {
                 scroller: true,
                 [this.orientation]: true,
                 'can-scroll-to-start': this.canScrollToStart,
                 'can-scroll-to-end': this.canScrollToEnd,
-            } }, h("div", { key: 'fc1b91baa65f317ae7bad667cba13813400ac546', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '43c02c4acba2ba647aaf6a7516a0326ffc0f16b1', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: '3d2e82f50748410b5370741c8e8b1f44117adc35', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
+            } }, h("div", { key: '379da89bc7f3b7b2a4700d1740df7c63906e065f', class: "scroll-area", ref: (element) => (this.scrollArea = element), onScroll: this.updateScrollability, onFocusin: this.revealFocusedItem }, h("div", { key: '448ee73f8e9c68db5cadbd0910c9d1135d8d40ee', class: "scroll-content", ref: (element) => (this.scrollContent = element) }, h("slot", { key: 'fc12618e40799918647a37be83fe8d8d5f7b8077', ref: (element) => (this.slotElement = element) }))), this.renderEdge('start'), this.renderEdge('end'))));
     }
     renderEdge(edge) {
         return [

package/dist/collection/components/select/select.js

@@ -175,7 +175,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: 'dd610ca15d4efd4ebc6bc52dae88625dcbca241f', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: 'f7cecafda170b279f117175603e646bf483f5f87', id: this.portalId, disabled: this.disabled || this.readonly, readonly: this.readonly, required: this.required, invalid: this.invalid, label: this.label, helperText: this.helperText, value: this.value, options: this.options, onMenuChange: this.handleMenuChange, onNativeChange: this.handleNativeChange, onTriggerKeyDown: this.handleMenuTriggerKeyDown, listRef: this.setListElement, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.shouldRenderNative(), dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {

package/dist/collection/components/shortcut/shortcut.js

@@ -61,7 +61,7 @@ export class Shortcut {
     render() {
         var _a, _b, _c, _d, _e;
         const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
-        return (h(Host, { key: 'a5b5f21fa6c27511357c3fdf498384ad7b8c3f6e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '74496e167864c94b9169fe2d5ed1aea82c4e2d20', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '7ba30c4e1f4aae41ad2626228f238979bcce1405', name: this.icon }), h("limel-3d-hover-effect-glow", { key: 'f6dd1cedf07c7bce7eba7d8b8eb44f948ab4ce25' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: 'e3ecd861d0acb20d1e5a3d832a6b5e641d5a4804', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'cca63c61bd258b665d65368cbbac0cc56072ed62', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: 'c9e2de4ab8bdb3d8de874e3f92584a4bdce6af07', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '816c61763d036dc0343805d816c5dc6983af2a41' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

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.js

@@ -101,7 +101,7 @@ export class TabBar {
     }
     render() {
         const tabStop = findTabStop(this.tabs, this.tabs.findIndex((tab) => tab.active), this.getNavigationOptions());
-        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)))));
+        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);

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

@@ -75,7 +75,7 @@ export class TabPanel {
         }
     }
     render() {
-        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' })))));
+        return (h(Host, { key: '530a6e0b8ae7387edaf8e0c1b6360a5a8099f155', onChangeTab: this.handleChangeTabs }, h("div", { key: '5d2ba03a54a5315b9c400d28b8dc0967a41a34fe', class: "tab-panel" }, h("limel-tab-bar", { key: '69183dd7c31a1d5c6d7027a81bf152586bf6fd0a', tabs: this.tabs, orientation: this.orientation, allowTabReorder: this.allowTabReorder }), h("div", { key: 'f7ac219b8f1941a1b2b5656f36646077165b2ec9', class: "tab-content" }, h("slot", { key: '177a1e39cdc731a2e77b6d06a691851a193b2a40' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

package/dist/collection/components/table/table.js

@@ -757,13 +757,13 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: '8e8d0bcd487ff3a97c2a94b69c4501f941908ee1', class: {
+        return (h(Host, { key: 'b83772fd4b3fda9ec2e422d7ae96108ac8c3e30a', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-pagination': totalRows > this.pageSize,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: '9e28778ef0d76065191837fb3f86293c3ba4c482', id: "tabulator-container" }, h("div", { key: '4f5ffbe1d9c61a7557fe2f91ce71f599f7443445', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'd758f28e7e2fa0db7e5550e4786b1855f94e2bca', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: 'f936473386dd1ad3163a7726cb8203f93c7d3528', id: "tabulator-table" }))));
+            } }, h("div", { key: 'cae198d9b1cad3fc776bc09517013a93243c2228', id: "tabulator-container" }, h("div", { key: 'fe968494d9b7977eac1643aadeee1bf0d2347f0e', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: 'd73ed9fbcca8b75039fa7119e7c9bf0b00b58f0c', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '67ffdb6b7627a0660008f17e3e5ae3ac62554a64', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;