@limetech/lime-elements 40.12.3 → 40.13.1

package/dist/collection/components/list-item/menu-item-meta/menu-item-meta.js

@@ -22,7 +22,7 @@ export class MenuItemMeta {
         this.showChevron = false;
     }
     render() {
-        return (h(Host, { key: '468078fa475182bea0474fa0806bd54bb00db4c6' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: 'd8b7f496ec83b138cfe9b7ea5deaf7a862a92a7f' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
     }
     renderCommandText() {
         if (this.hotkey) {

package/dist/collection/components/markdown/markdown.js

@@ -170,7 +170,7 @@ export class Markdown {
         this.cleanupImageIntersectionObserver();
     }
     render() {
-        return (h(Host, { key: 'a1883ae4c80a775bc1dbdd9f2b993ab4af8c4cba' }, h("div", { key: 'd8a1cd8f5a102a209fa89f8baf0b08912ead1059', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'eb1749c0d9dda5b26400cb8a11e884d435e759f4' }, h("div", { key: '2574a46c51bd1d18808f1bac945a7d356550e02c', id: "markdown", ref: (el) => (this.rootElement = el) })));
     }
     setupImageIntersectionObserver() {
         if (this.lazyLoadImages) {

package/dist/collection/components/masonry-layout/masonry-layout.js

@@ -59,7 +59,7 @@ export class MasonryLayout {
         const style = {
             height: `${this.containerHeight}rem`,
         };
-        return (h(Host, { key: '4739b8085adca277a42f36478b1692970e2a8675', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '14290465ddb5ea67ff9d2883904f3298900151ee' })));
+        return (h(Host, { key: 'b25a2eb6e10535aa5fedb8de8baeb96f51e10739', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'fa2c4773d1fb41e2ea0725a28911840e45e5c809' })));
     }
     setupObservers() {
         this.resizeObserver = new ResizeObserver(() => {

package/dist/collection/components/menu/menu.js

@@ -593,7 +593,7 @@ export class Menu {
         const cssProperties = this.getCssProperties();
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const menuSurfaceWidth = this.getMenuSurfaceWidth(cssProperties['--menu-surface-width']);
-        return (h("div", { key: '4297bd7cef14f8cc64e76b855bb816cd957ae777', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '5b9d29a6a872c56d0473dc1b758275c1061d29e9', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: '4df2b9dee190c430c66697fc28834f4b2e648d93', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'a09c1a6ebcaf9faadbf05de1c3d901e391249de3', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
+        return (h("div", { key: '6d847423b24fe40843b5650e1bf4374683a039da', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: 'ac6b1f1ed8801096f7d00fa0a9198a76c1ce3019', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cb084d50d4abacfb9dc670d59477ac881bf6d480', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '7ac31e90caa874032731f8ceb3521ffb014eb05f', open: this.open, onDismiss: this.onClose, style: Object.assign(Object.assign({}, cssProperties), { '--menu-surface-width': menuSurfaceWidth, '--limel-menu-surface-display': 'flex', '--limel-menu-surface-flex-direction': 'column' }), class: {
                 'has-grid-layout': this.gridLayout,
             } }, this.renderSearchField(), this.renderBreadcrumb(), this.renderLoader(), this.renderEmptyMessage(), this.renderMenuList()))));
     }

package/dist/collection/components/menu-list/menu-list.js

@@ -88,7 +88,7 @@ export class MenuList {
             iconSize: this.iconSize,
         };
         const html = this.MenuListRenderer.render(this.items, this.config);
-        return h("div", { key: '23e18e570d984333dfafc3b45e1e8f06cf02420d', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '3415e15ffee93dd14fd52e5d465cd4afc31ac9fe', class: "mdc-menu mdc-menu-surface" }, html);
     }
     itemsChanged() {
         setTimeout(() => {

package/dist/collection/components/menu-surface/menu-surface.js

@@ -103,7 +103,7 @@ export class MenuSurface {
             'mdc-elevation-transition': true,
             'mdc-elevation--z4': true,
         };
-        return (h("div", { key: 'ad7c084b7ac99d8837f0641eb2d1da16cf54866a', class: classList, tabindex: "-1" }, h("slot", { key: 'ddba9bf6dca376d72801e0feb5548bbd0e767d61' })));
+        return (h("div", { key: '6a3fd2315216b168a3e898e4ef43a928a19efe76', class: classList, tabindex: "-1" }, h("slot", { key: '4bf591cdb0e628622d8eada0e628eb33f1aaa74b' })));
     }
     static get is() { return "limel-menu-surface"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/notched-outline/notched-outline.js

@@ -59,7 +59,7 @@ export class NotchedOutline {
         this.hasFloatingLabel = false;
     }
     render() {
-        return (h("div", { key: 'c93fb22346511118f2a512f2910653efc246138e', class: "limel-notched-outline" }, h("slot", { key: '25cedc7d6cc4cc5a1392a8b66c7b81f264dbec25', name: "content" }), h("span", { key: '8d57b4c8920dd6b6a381e6f9f6a39e9117a7b5f6', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '1f6ae50a5e9e4e46b4993024f8dbfa0286e51200', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '722664ca8623cd3f4359a871561c2cf9cc2ca82d', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: '3a89f4df1e456e91ae6963275d8e554f785d5806', class: "limel-notched-outline" }, h("slot", { key: 'd372b467d8aed4d97fe89073f3a9bf8d6af451ae', name: "content" }), h("span", { key: 'f56e6d2d3b75e5d05738e28696d892cfdddc991b', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '76c5ac529a46fa4a32969deb9a00bc872ab903e9', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'a37b86f6ebb5db2eb9c1f2c8994fce60e70260b6', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
     }
     renderLabel() {
         if (!this.label) {

package/dist/collection/components/pagination/pagination.js

@@ -304,7 +304,7 @@ export class Pagination {
     }
     render() {
         const { slots } = this.view;
-        return (h(Host, { key: 'dce4e827fbbaba2f2423b7623caa1371b51a7750' }, h("nav", { key: '18e75c58c919f78a5c19986d3a42612c0b125a55', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: '1aea124497cbec584bdb1977c7371b391f5576a2', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        return (h(Host, { key: 'b8e02650528bd6547965afb437129cad0ea6cd33' }, h("nav", { key: '3b4b66479357da55ff6ff41d78cc37f77b2d32f6', "aria-label": this.translate('pagination.label'), "aria-busy": this.loading ? 'true' : null }, this.renderArrow('previous'), slots.map((slot, index) => this.renderSlot(slot, index)), this.renderArrow('next')), h("span", { key: 'b248701311dd6da9d4fb158299d07e618297038e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
     }
     /**
      * Without a count we know where the user is but not how far the set goes,

package/dist/collection/components/picker/picker.js

@@ -199,7 +199,7 @@ export class Picker {
             props.maxItems = 1;
         }
         return [
-            h("limel-chip-set", Object.assign({ key: '3bd160f27baba3f2b6cfdb75bac451b87a25f75a', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
+            h("limel-chip-set", Object.assign({ key: '52839878b5dfc5477a0fdc848ad3f7ea7a48019b', type: "input", inputType: "search", label: this.label, helperText: this.helperText, leadingIcon: this.leadingIcon, value: this.chips, disabled: this.disabled, invalid: this.invalid, delimiter: this.renderDelimiter(), readonly: this.readonly, required: this.required, searchLabel: this.searchLabel, language: this.language, onInput: this.handleTextInput, onKeyDown: this.handleInputKeyDown, onChange: this.handleChange, onInteract: this.handleInteract, onStartEdit: this.handleInputFieldFocus, onStopEdit: this.handleStopEditAndBlur, emptyInputOnBlur: false, emptyInputOnChange: false, clearAllButton: this.multiple && !this.chipSetEditMode }, props)),
             this.renderDropdown(),
         ];
     }

package/dist/collection/components/popover/popover.js

@@ -137,7 +137,7 @@ export class Popover {
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: 'a819793a1a82680cb7ce15239366c57c5e8300cc', class: "trigger-anchor" }, h("slot", { key: 'ddd5f786c93939afae68e0a35446be8470bfe638', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '369a832fab6a9e3438202ed1c3dbb6fe9b5a5f39', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '1b583fc37aa48fb67ff2b40f8c2e88cb7f6db88f', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: 'a02ffc9fddedc154172b0d4882bfe59b2577ffac', class: "trigger-anchor" }, h("slot", { key: '3665da92007e5943986f57c449055b892502f67e', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '461758e543e835682034c689fcb093fb53ea352e', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '85c7c3d6b11c616eab35bc8419fa2769e5e602ed', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;

package/dist/collection/components/popover-surface/popover-surface.js

@@ -8,7 +8,7 @@ export class PopoverSurface {
         this.appendElement();
     }
     render() {
-        return h("div", { key: '0efb74a821ff0c1919a048ee08209befdf5582c0', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '565d94e781d72493de84f12970471ecf220dd601', class: "limel-popover-surface", tabindex: "0" });
     }
     appendElement() {
         const portalContainer = this.host.shadowRoot.querySelector('.limel-popover-surface');

package/dist/collection/components/portal/portal.js

@@ -115,7 +115,7 @@ export class Portal {
         this.showContainer();
     }
     render() {
-        return h("slot", { key: 'f4db0b146b4cd851a9837bf10dc7d331cd5a9dce' });
+        return h("slot", { key: 'd342bcf892ea6bba5eafc93d07119a3c86df2623' });
     }
     onVisible() {
         if (!this.container && this.visible) {

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -37,7 +37,7 @@ export class RadioButtonGroup {
         };
     }
     render() {
-        return (h("limel-list", { key: '9c12503b398b5c5d35d47d554b64219baf75d21b', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '1ee999435baebb1badb909227d94d083fcc0fb03', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
     }
     createItems() {
         return this.items.map((option) => {

package/dist/collection/components/radio-button-group/radio-button.js

@@ -31,12 +31,12 @@ import { Host, h } from "@stencil/core";
  */
 export class RadioButtonComponent {
     render() {
-        return (h(Host, { key: '7cdb4d6a667a0afe8ed668cc32b4a38c39817d75', class: {
+        return (h(Host, { key: 'f648a356af28a59101187075c6f42ac7afe28b49', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: 'f51cfa414dd1e2f50ea211a690a55dc7525d5501', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'a6ec3d879e3410c9973a1b8c66469a852e4e4995', class: "box" }), h("label", { key: '978984158d1c8344da8bcc6a4e3d7aa8003f75b2', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, h("input", { key: 'ddbbe3e3cd47a3434121a37053e0f556b3f823df', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '5af2a675fcf855d4c14a0297e1389a7098ee13f6', class: "box" }), h("label", { key: 'a12ad0a7ba7319c0f01fb3523f6a6cb94577e0c1', class: "boolean-input-label", htmlFor: this.id }, this.label)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {

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"; }