@limetech/lime-elements 39.9.3 → 39.9.5

package/dist/collection/components/dialog/dialog.js

@@ -20,7 +20,7 @@ import { createRandomString } from "../../util/random-string";
  * from Lime Web Components to open dialogs in Lime CRM.
  * :::
  *
- * @exampleComponent limel-example-dialog
+ * @exampleComponent limel-example-dialog-basic
  * @exampleComponent limel-example-dialog-nested-close-events
  * @exampleComponent limel-example-dialog-heading
  * @exampleComponent limel-example-dialog-heading-actions
@@ -84,10 +84,10 @@ export class Dialog {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: '590a7ad1dc1deeab0481f36b9aaeea0aca24d34f', class: {
+        return (h("div", { key: '748566bd65db98ee75a743a7deedc7d0c9f80a90', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: 'f7a96d6e0f7086ac47791cb895bb78a296e23ec7', hidden: true, id: "initialFocusEl" }), h("div", { key: 'c0755b202346c3b6bcf257d94872c1fb81f49db5', class: "mdc-dialog__container" }, h("div", { key: '6ccc11dae44838539b2e1fa6a074c74a0b76364c', class: "mdc-dialog__surface" }, h("input", { key: 'ae6bdad52ac6e44f25fa0396797f0ec013d27ab9', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '45e3b2e05bed5dc4c8039502b81ca2384821fe6f', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '64979e861d307be41993ace61a7b0c5a616a6e2c' })), this.renderFooter())), h("div", { key: '0b7c0e8c2d8f0cac26e926a685ba5c985db976f8', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '15d2c40108a2348f54066eab22d507c6a9b3eda9', hidden: true, id: "initialFocusEl" }), h("div", { key: 'f46ee440d02b257bde93273936ce1dfe8dc324ea', class: "mdc-dialog__container" }, h("div", { key: '9ba9919b2b880039ede217c0608d9f780d6ca770', class: "mdc-dialog__surface" }, h("input", { key: '07bb68ae4c7b8d91cb7f0fd02105738160bd9e8f', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '1729cb0f7f442b3ee56272387de42b462926275c', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: 'a5554b316a4e57700a2902ae4499f594045f267d' })), this.renderFooter())), h("div", { key: '85ecb0922ece938a5de20b804b6a2590f98032df', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue) {

package/dist/collection/components/dynamic-label/dynamic-label.js

@@ -13,7 +13,7 @@ import { h } from "@stencil/core";
  * provide the best way of _visualizing information_, potentially leading to
  * confusion and negatively affecting the end-users' experience.
  *
- * @exampleComponent limel-example-dynamic-label
+ * @exampleComponent limel-example-dynamic-label-basic
  * @exampleComponent limel-example-dynamic-label-readonly-boolean
  */
 export class DynamicLabel {

package/dist/collection/components/file/file.js

@@ -35,7 +35,7 @@ const DEFAULT_FILE_CHIP = {
  * and similar phrases...
  * :::
  *
- * @exampleComponent limel-example-file
+ * @exampleComponent limel-example-file-basic
  * @exampleComponent limel-example-file-custom-icon
  * @exampleComponent limel-example-file-menu-items
  * @exampleComponent limel-example-file-accepted-types
@@ -89,7 +89,7 @@ export class File {
         };
     }
     render() {
-        return (h(Host, { key: '09d8f61392d489c41a083edb516b680f481d7b55' }, h("limel-file-dropzone", { key: '36812196ad3a91ce98ec13df0e26927fbe67b4a4', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
+        return (h(Host, { key: '4b91f02cff596bca5da1a635ce24d2bb8a5154e1' }, h("limel-file-dropzone", { key: 'c3636964ee41bd5396fe667cc983a74256845af5', disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()), this.renderDragAndDropTip()));
     }
     renderDragAndDropTip() {
         if (this.value || this.disabled || this.readonly) {

package/dist/collection/components/file-dropzone/file-dropzone.js

@@ -14,7 +14,7 @@ import { partition } from "lodash-es";
  * The event detail would be an array of `FileInfo` objects,
  * each representing a file dropped into the dropzone.
  *
- * @exampleComponent limel-example-file-dropzone
+ * @exampleComponent limel-example-file-dropzone-basic
  * @exampleComponent limel-example-file-dropzone-type-filtering
  * @private
  */
@@ -90,7 +90,7 @@ export class FileDropzone {
         };
     }
     render() {
-        return (h(Host, { key: '70e5213cc5470868f2442b908d9ffd39466edbac', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '4d886da6bfad382dc9c579ad17ea73d62ccdf1d3' }), this.renderOnDragLayout()));
+        return (h(Host, { key: 'a66ef9c3d9a005567749b61967a63caa4496135a', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '7a770aa9f98365da4b83038662f04c0e9e5c20c6' }), this.renderOnDragLayout()));
     }
     static get is() { return "limel-file-dropzone"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/file-input/file-input.js

@@ -14,7 +14,7 @@ import { createFileInfo } from "../../util/files";
  * The event detail would be an array of `FileInfo` objects,
  * each representing a file dropped into the dropzone.
  *
- * @exampleComponent limel-example-file-input
+ * @exampleComponent limel-example-file-input-basic
  * @exampleComponent limel-example-file-input-type-filtering
  * @private
  */
@@ -71,7 +71,7 @@ export class FileInput {
         this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
     }
     render() {
-        return (h(Host, { key: '4ec87952fba90e1fff07a60b977edd1980e33738', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '2fdc5fbb81294f85ad02a175b0720f53ad13c4f0', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: 'd72890dd7c622c71e6b46217891d88f770607bda' })));
+        return (h(Host, { key: '62d72f49b1a71bef9c5b91c36f34f763a04d78e2', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '72272f710f8ffb09eec2ace7409ab516ec4f80bd', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '7ecff23ba41d76a23a2b8a542f56044615cb8b24' })));
     }
     handleKeyDown(event) {
         if (event.code === 'Tab' ||

package/dist/collection/components/header/header.js

@@ -40,7 +40,7 @@ import { getIconName } from "../icon/get-icon-props";
  * and take a lot of attention from users.
  * :::
  *
- * @exampleComponent limel-example-header
+ * @exampleComponent limel-example-header-basic
  * @exampleComponent limel-example-header-slot-actions
  * @exampleComponent limel-example-header-colors
  * @exampleComponent limel-example-header-responsive
@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: 'a15f9daaa43d8c03c79f30c2a9d543b97185ed6b' }, h("div", { key: 'f9142be782bd6c20605387073db02ede3acd1a2e', class: "information" }, this.renderIcon(), h("div", { key: 'a1919b8bd21f92aeae4be0c26822517780d0bfc1', class: "headings" }, h("h1", { key: '2c6b225fc76359fa6573b25f232a3530bec7508b', class: "heading", title: this.heading }, this.heading), h("h2", { key: '14be7addf9b4a3082dab7373381a8daa30530fa8', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '27d8265622b327f77e893d5dc3e736a25d7b4da3', name: "actions" }, h("slot", { key: '03837c68e6f1ae38941702aef2ea6c74fa1b479d' }))));
+        return (h(Host, { key: '4a94e7808e3b295669faa4711d37f8d9ed50b006' }, h("div", { key: '7c02e31819ddac504b5c58b6200c00a621079990', class: "information" }, this.renderIcon(), h("div", { key: 'b38172e5332ee39476bd19f7ad4f0ce127cc30d6', class: "headings" }, h("h1", { key: '9ee1f899ba0f403a588e0dbca52d82c1c12e355e', class: "heading", title: this.heading }, this.heading), h("h2", { key: '49b81ef3a96a9c2f7fa27ec2d13a15907131624e', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '29984270ca745ce430deef27704b9c63065c2964', name: "actions" }, h("slot", { key: '1c3b766dc1444a0255ea605359b25d148d25ba57' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

package/dist/collection/components/help/help.js

@@ -15,7 +15,7 @@ import { h, Host } from "@stencil/core";
  * of an app more effortlessly, minimizes the learning curve,
  * transforming complex features into accessible opportunities for exploration.
  *
- * @exampleComponent limel-example-help
+ * @exampleComponent limel-example-help-basic
  * @exampleComponent limel-example-read-more
  * @exampleComponent limel-example-open-direction
  * @exampleComponent limel-example-placement
@@ -41,9 +41,9 @@ export class HelpComponent {
         };
     }
     render() {
-        return (h(Host, { key: 'df993a4485c405a756eb69ccbee5ab8ec616a6d3' }, h("limel-popover", { key: 'f4aab0006a23c83a1609f1c8e1b97f5d6f69b4b4', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: 'a88ae28570d62668a4b34d3e334816bc665dc33e', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: 'a52d9b4c220e21005011449735b97599cffb542e' }, h("limel-popover", { key: '8b6690894351ec32f5b982ca5d3aeac7300f5576', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '98e5dc4abcff54df74b02c737e4889e17639ddc6', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '32f146b00380d0de6529a7b6a4ab0bcb82b067d4', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '10b2d483aa459403b3d922add805bf6f64ae66e3', value: this.value, readMoreLink: this.readMoreLink }))));
     }
     static get is() { return "limel-help"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/helper-line/helper-line.js

@@ -10,7 +10,7 @@ import { Host, h } from "@stencil/core";
  * Also this enables us to open the helper line in limel-portal,
  * more easily without having to send the styles to the portal.
  *
- * @exampleComponent limel-example-helper-line
+ * @exampleComponent limel-example-helper-line-basic
  * @exampleComponent limel-example-helper-line-invalid
  * @exampleComponent limel-example-helper-line-long-text
  * @exampleComponent limel-example-helper-line-long-text-no-counter
@@ -46,9 +46,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: 'ca260d9f14bb76025f382964f3f24eafc25daeeb', tabIndex: -1, class: {
+        return (h(Host, { key: '8ef6eb3b3e372e5dc61af1424a88c1c342023d13', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3d24d9b80729945c7ebd3f1ecd4348afec77185b' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '3b4e31c23f5964aabb67556e68bd1785c871d934' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-tile/info-tile.js

@@ -10,7 +10,7 @@ import { getRel } from "../../util/link-helper";
  * a new screen or web page, you need to provide a URL,
  * using the `link` property.
  *
- * @exampleComponent limel-example-info-tile
+ * @exampleComponent limel-example-info-tile-basic
  * @exampleComponent limel-example-info-tile-badge
  * @exampleComponent limel-example-info-tile-progress
  * @exampleComponent limel-example-info-tile-loading
@@ -116,9 +116,9 @@ export class InfoTile {
             this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
         const link = this.disabled ? '#' : (_e = this.link) === null || _e === void 0 ? void 0 : _e.href;
         const rel = getRel((_f = this.link) === null || _f === void 0 ? void 0 : _f.target, (_g = this.link) === null || _g === void 0 ? void 0 : _g.rel);
-        return (h(Host, { key: '57b632bbe5ba4171c118171cbb1d5c7c87550a53', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'aa3e1db51f262a204a4d0bf7fc025e067f608629', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
+        return (h(Host, { key: '7c8d656a077f6c80cc7d4d64bf1aa9ef7d5bd781', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'f73467be963a8aa901c890958eda32212ff2f3a0', title: (_h = this.link) === null || _h === void 0 ? void 0 : _h.title, href: link, target: (_j = this.link) === null || _j === void 0 ? void 0 : _j.target, rel: rel, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
                 'is-clickable': !!((_k = this.link) === null || _k === void 0 ? void 0 : _k.href) && !this.disabled,
-            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '2f9643af8bfe88ff99eba045983081e9388ba688', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '9cf8b84d5f2376d36ba7dbae8e86cbb8e11fa390', class: "value-group" }, this.renderPrefix(), h("div", { key: 'c073080821cd0b4bd4340d6566688a10cd0acd5e', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '5ac6fee4d62020b9dfe1232309de0a414d35d6e4' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '2e4972465f34d57ce81a0c55782e9fcbc4c91c90', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '119b244389b740a05b266c80a78bffd2287f6dab', class: "value-group" }, this.renderPrefix(), h("div", { key: '9a9fc38d8c997b3ce6db3715a1aed622ec0af586', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '1809611bebee438d5b840907f09adda725c7849c' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

package/dist/collection/components/linear-progress/linear-progress.js

@@ -5,7 +5,7 @@ const PERCENT = 100;
  * The linear progress component can be used to visualize the current state of a progress in a scale;
  * for example percentage of completion of a task.
  *
- * @exampleComponent limel-example-linear-progress
+ * @exampleComponent limel-example-linear-progress-basic
  * @exampleComponent limel-example-linear-progress-indeterminate
  * @exampleComponent limel-example-linear-progress-accessible-label
  * @exampleComponent limel-example-linear-progress-color

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

@@ -4,7 +4,7 @@ import { h, Host, } from "@stencil/core";
 import { ListRenderer } from "./list-renderer";
 const { ACTION_EVENT } = listStrings;
 /**
- * @exampleComponent limel-example-list
+ * @exampleComponent limel-example-list-basic
  * @exampleComponent limel-example-list-secondary
  * @exampleComponent limel-example-list-separator
  * @exampleComponent limel-example-list-icons
@@ -143,7 +143,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'cc025328924cab9298919a2873ec1744aeed3dab', style: {
+        return (h(Host, { key: 'e08edeaabf6b51f940e305539aecec91517a51ca', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

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

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import { createRandomString } from "../../util/random-string";
 import { zipObject, isFunction } from "lodash-es";
-import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, TAB, } from "../../util/keycodes";
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ESCAPE, TAB, } from "../../util/keycodes";
 import { focusTriggerElement } from "../../util/focus-trigger-element";
 const DEFAULT_ROOT_BREADCRUMBS_ITEM = {
     text: '',
@@ -75,6 +75,7 @@ export class Menu {
          * Clicking it navigates back from a sub-menu to the root menu.
          */
         this.rootItem = DEFAULT_ROOT_BREADCRUMBS_ITEM;
+        this.shouldRestoreFocusOnClose = false;
         this.renderLoader = () => {
             if (!this.loadingSubItems && !this.loading) {
                 return;
@@ -329,11 +330,20 @@ export class Menu {
                 }
             }
         };
+        this.handleEscapeCapture = (event) => {
+            if (event.key === ESCAPE && this.open) {
+                this.shouldRestoreFocusOnClose = true;
+            }
+        };
         this.onClose = () => {
+            const restoreFocus = this.shouldRestoreFocusOnClose;
+            this.shouldRestoreFocusOnClose = false;
             this.cancel.emit();
             this.open = false;
             this.currentSubMenu = null;
-            setTimeout(this.focusTrigger, 0);
+            if (restoreFocus) {
+                setTimeout(this.focusTrigger, 0);
+            }
         };
         this.onTriggerClick = (event) => {
             event.stopPropagation();
@@ -519,7 +529,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: '7769d71e01b3e7835fdec458a56858c10eb0c71a', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '800c993b63e1ae0fd94d1c984ffbfaef96eec627', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cc4da9d70f09030f4c41567611b42dda8ad4403e', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '5bb2a262f66d2f9b7bcbe46009574daf5eddf589', 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: 'a54987a1be3e3fcc4ceae95c7cc334411a0c474f', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '1bacdb5d1387b8357d1c6f93db47369c8cf64a4f', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'fbc7982b1dcab9fd5172a95e7a7f0328281f3a35', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: '48b96e2e6fe815f4cc976553dfea7b26f36ea6d4', 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()))));
     }
@@ -530,9 +540,11 @@ export class Menu {
     openWatcher(newValue) {
         const opened = newValue;
         if (opened) {
+            document.addEventListener('keydown', this.handleEscapeCapture, true);
             this.setFocus();
         }
         else {
+            document.removeEventListener('keydown', this.handleEscapeCapture, true);
             this.clearSearch();
         }
     }

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

@@ -117,17 +117,17 @@ export class Popover {
             document.addEventListener('click', this.globalClickListener, {
                 capture: true,
             });
-            document.addEventListener('keyup', this.handleGlobalKeyPress);
+            document.addEventListener('keydown', this.handleGlobalKeyPress);
         }
         else {
             document.removeEventListener('click', this.globalClickListener);
-            document.removeEventListener('keyup', this.handleGlobalKeyPress);
+            document.removeEventListener('keydown', this.handleGlobalKeyPress);
         }
     }
     render() {
         const cssProperties = this.getCssProperties();
         const popoverZIndex = getComputedStyle(this.host).getPropertyValue('--popover-z-index');
-        return (h("div", { key: '862c9700bce5d7a3f55b20cb4ef8eb8346e62a25', class: "trigger-anchor" }, h("slot", { key: '08dd9ac01930db903dba46c15e25d00727f251ff', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'bc03a58425d52d5d7447a5ed1308ee51c51480b5', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: 'a9b117aee79359fa1f2800b914aed8ed8ab2a203', contentCollection: this.host.children, style: cssProperties }))));
+        return (h("div", { key: 'ac6e4c9358d68223f43ea60a29302d725438cf05', class: "trigger-anchor" }, h("slot", { key: '5e5ae7d194f7cc005573e909cd10343283603a7f', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: '5d4bda03c1ea9b07c17b7222fb2f30e29af9b3d3', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '0f9804103a70f924375429ba7e96ad62858cb2ea', contentCollection: this.host.children, style: cssProperties }))));
     }
     globalClickListener(event) {
         const element = event.target;
@@ -135,7 +135,7 @@ export class Popover {
         if (this.open && !clickedInside) {
             event.stopPropagation();
             event.preventDefault();
-            this.requestCloseAndRestoreFocus();
+            this.close.emit();
         }
     }
     getCssProperties() {

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

@@ -7,7 +7,7 @@ import { isMultiple } from "../../util/multiple";
 import { createRandomString } from "../../util/random-string";
 import { SelectTemplate, triggerIconColorWarning } from "./select.template";
 /**
- * @exampleComponent limel-example-select
+ * @exampleComponent limel-example-select-basic
  * @exampleComponent limel-example-select-with-icons
  * @exampleComponent limel-example-select-with-separators
  * @exampleComponent limel-example-select-with-secondary-text
@@ -19,6 +19,9 @@ import { SelectTemplate, triggerIconColorWarning } from "./select.template";
  * @exampleComponent limel-example-select-dialog
  */
 export class Select {
+    resetHasChanged() {
+        this.hasChanged = false;
+    }
     constructor() {
         /**
          * Set to `true` to make the field disabled.
@@ -101,7 +104,7 @@ export class Select {
     }
     render() {
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
-        return (h(SelectTemplate, { key: 'f2a3c3f06af578829d134ba4276850bbd035a3e2', 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, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
+        return (h(SelectTemplate, { key: '12c687df2b999aa6d8a06c7fab59bda425678791', 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, onTriggerPress: this.handleMenuTriggerKeyPress, multiple: this.multiple, isOpen: this.menuOpen, open: this.openMenu, close: this.closeMenu, checkValid: this.checkValid, native: this.isMobileDevice && !this.multiple, dropdownZIndex: dropdownZIndex, anchor: this.getAnchorElement() }));
     }
     watchOpen(newValue, oldValue) {
         if (this.checkValid) {
@@ -212,17 +215,32 @@ export class Select {
         this.setTriggerFocus();
     }
     openMenu() {
-        if (this.emitFirstChangeEvent()) {
+        const autoSelectOption = this.getFirstNativeAutoSelectOption();
+        if (autoSelectOption) {
             this.hasChanged = true;
-            this.change.emit(this.getOptionsExcludingSeparators()[0]);
+            this.change.emit(autoSelectOption);
         }
         this.menuOpen = true;
     }
-    emitFirstChangeEvent() {
-        return (!this.hasChanged &&
-            this.isMobileDevice &&
-            !this.multiple &&
-            !this.value);
+    getFirstNativeAutoSelectOption() {
+        if (this.hasChanged || !this.isMobileDevice || this.multiple) {
+            return undefined;
+        }
+        const options = this.getOptionsExcludingSeparators();
+        // Also treat it as "no value" when the current value doesn't match
+        // any available option (e.g. an empty option that was filtered out
+        // by a required field).
+        const currentValue = this.value;
+        const hasMatchingValue = currentValue &&
+            !Array.isArray(currentValue) &&
+            options.some((o) => o.value === currentValue.value);
+        if (hasMatchingValue) {
+            return undefined;
+        }
+        if (options.length > 0 && !options[0].value) {
+            return undefined;
+        }
+        return options.find((o) => !o.disabled && o.value);
     }
     closeMenu() {
         this.menuOpen = false;
@@ -503,6 +521,12 @@ export class Select {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
+                "propName": "value",
+                "methodName": "resetHasChanged"
+            }, {
+                "propName": "options",
+                "methodName": "resetHasChanged"
+            }, {
                 "propName": "menuOpen",
                 "methodName": "watchOpen"
             }];

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

@@ -10,7 +10,7 @@ import { getMouseEventHandlers } from "../../util/3d-tilt-hover-effect";
  * However, it is possible to override that behavior, by specifying a `target`
  * for the `link` property
  *
- * @exampleComponent limel-example-shortcut
+ * @exampleComponent limel-example-shortcut-basic
  * @exampleComponent limel-example-shortcut-notification
  * @exampleComponent limel-example-shortcut-styling
  * @exampleComponent limel-example-shortcut-with-click-handler
@@ -56,7 +56,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: '4c999ffbf57f45f652d4bfa881b54e421a58df8f', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: '5b7f3a5e43237b9a302bc63735b63a92c019eb2f', "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: '421faadecac1f5444ecab389574ad24cab6d7012', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '0d932adbb6b7c343b3120d01e866b29d4c165543' })), this.renderLabel(), this.renderNotification()));
+        return (h(Host, { key: '6d8f34f6545714c032ca8a106bd19b8c25b49c9e', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'ea703109895bf2baedeb85a573a7b9b95b6c77a5', "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: '065f25188bb6a712e3933d89067f6151362eee72', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '7c0ac50c83d7047d2745427c210e278150951b02' })), this.renderLabel(), this.renderNotification()));
     }
     static get is() { return "limel-shortcut"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,7 +26,7 @@ const hideAnimationDuration = 300;
  * [Dialog](#/component/limel-dialog/) is a better choice.
  * :::
  *
- * @exampleComponent limel-example-snackbar
+ * @exampleComponent limel-example-snackbar-basic
  * @exampleComponent limel-example-snackbar-with-action
  * @exampleComponent limel-example-snackbar-with-changing-messages
  * @exampleComponent limel-example-snackbar-dismissible
@@ -121,14 +121,14 @@ export class Snackbar {
         }
     }
     render() {
-        return (h("aside", { key: 'e07fbddded6a243a118dd9122db77e8286d5733e', popover: "manual", style: {
+        return (h("aside", { key: '50e3fbd9e15990446adc21cf46c5a50025ae32b2', 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: 'd672fadb9f690c99c60b0582cf371313278a9642', class: "surface" }, h("div", { key: '7502281b26c83fbac612d7896b25563255fd46e3', class: "label" }, 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: 'e256db2465275aee96cdd0b523382bfe26f4fed3', class: "surface" }, h("div", { key: '02cbd256b396c3aab857aebe0ba05db1a5d00d04', class: "label" }, this.message), this.renderActions(this.actionText), this.renderDismissButton(this.dismissible))));
     }
     setAriaRoles() {
         if (!this.open) {

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 /**
- * @exampleComponent limel-example-spinner
+ * @exampleComponent limel-example-spinner-basic
  * @exampleComponent limel-example-spinner-color
  * @exampleComponent limel-example-spinner-size
  */
@@ -16,7 +16,7 @@ export class Spinner {
         this.limeBranded = false;
     }
     render() {
-        return (h(Host, { key: '2ea3c8e615b6f95452c1ce2f8d5eb9ee989b8612' }, h("svg", { key: 'd0ff66dbbf8f7fefa0c6a52cd51a7fca2abe0c4a', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
+        return (h(Host, { key: '15c39e3df6a446d4f809e23d2316e535bf77dc99' }, h("svg", { key: 'e88d11c66514783aa11bb01c4e902a15d0cb6dd4', viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, this.renderSpinner())));
     }
     renderSpinner() {
         if (!this.limeBranded) {

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

@@ -15,7 +15,7 @@ import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter
  * But there is an important difference between the two! Please read our guidelines about
  * [Switch vs. Checkbox](#/DesignGuidelines/switch-vs-checkbox.md/).
  *
- * @exampleComponent limel-example-switch
+ * @exampleComponent limel-example-switch-basic
  * @exampleComponent limel-example-switch-helper-text
  * @exampleComponent limel-example-switch-readonly
  */
@@ -78,7 +78,7 @@ export class Switch {
         removeEnterClickable(this.host);
     }
     render() {
-        return (h(Host, { key: '3acdf2f3d34ab4cc8411638be9c8fe66a98b173d' }, this.readonly
+        return (h(Host, { key: '06ea93968a9f60b3fe115e1f54a9354cd4b8e891' }, this.readonly
             ? this.renderReadonly()
             : this.renderInteractive(), this.renderHelperLine()));
     }

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

@@ -25,7 +25,7 @@ const OVERLAP_PERCENTAGE = 20;
  * A tab will never be removed or get disabled, even if there is no content under it.
  * :::
  *
- * @exampleComponent limel-example-tab-bar
+ * @exampleComponent limel-example-tab-bar-basic
  * @exampleComponent limel-example-tab-bar-with-dynamic-tab-width
  * @exampleComponent limel-example-tab-bar-with-equal-tab-width
  */
@@ -62,11 +62,11 @@ export class TabBar {
         this.tearDown();
     }
     render() {
-        return (h("div", { key: '5c2300a224442e40e2dc2f6b49538f0688bc7a53', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'bd4d9d8f3f302cf1592fab3cfd15d3316f132470', class: {
+        return (h("div", { key: 'bdc335fde021cff31e6a47b8d0ab14de6e1f7c9b', class: "mdc-tab-bar", role: "tablist" }, h("div", { key: 'e4c25d25283507ce29d06260b5dd5fd9cbc41a49', class: {
                 'mdc-tab-scroller': true,
                 'can-scroll-left': this.canScrollLeft,
                 'can-scroll-right': this.canScrollRight,
-            } }, h("div", { key: 'f48abfa3b0169e952befc47e8adf9574aee616af', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: '7322a7ab34b24822a1043ad3172f1b2f3efc6244', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '668ebaaf096d5926b17e1e1a50b0569c4e6d11c1', class: "scroll-fade left" }), h("div", { key: '02c3b8484f4467ece6e1a0617578b0967641a536', class: "scroll-button left" }, h("button", { key: '22bd6170b849aadb7a78b3f0fe2ae0213d7a6cb5', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '62f4b1fff0ab4fac4b8b379c2ab5bda44579e589', name: "angle_left" }))), h("div", { key: 'fe3e1014ffde25bea6f16731e0edc3ce280f321d', class: "scroll-fade right" }), h("div", { key: 'd79950639da735d25053272ae0a53f28d3ce233c', class: "scroll-button right" }, h("button", { key: '24b05b9fdae0479c15159253d7c785853db21b1d', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: '5388965c9a27d888583ddc2d892ea5c3810500e4', name: "angle_right" }))))));
+            } }, h("div", { key: '0fd262305222f95f4dfab1e792a0686b9ffb3117', class: "mdc-tab-scroller__scroll-area lime-hide-scrollbars" }, h("div", { key: 'ff4dd675de9c6cde5c4a0dddd90211a73ea34962', class: "mdc-tab-scroller__scroll-content" }, this.tabs.map(this.renderTab))), h("div", { key: '3c201211c344ce09ef12166acfab2af0b3a4f64c', class: "scroll-fade left" }), h("div", { key: 'e124c7d58974629de53319948d0a961a293989a8', class: "scroll-button left" }, h("button", { key: 'df876f20c9177923218d773a5fd0880ac7eefb2a', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollLeft, onClick: this.handleLeftScrollClick }, h("limel-icon", { key: '65dbb20efcd7f233cd8637641e764f1be7b7e2a0', name: "angle_left" }))), h("div", { key: '5e8c69252a54be76393de70822ec2f6817e7a6d1', class: "scroll-fade right" }), h("div", { key: '341d0c50fe1513c8ad254ff8cebaf9be8607d5f0', class: "scroll-button right" }, h("button", { key: '8ea21fad4dace603ffdc8c51ac597806979a9dd4', type: "button", tabindex: "-1", "aria-hidden": "true", disabled: !this.canScrollRight, onClick: this.handleRightScrollClick }, h("limel-icon", { key: 'e28a22555f3ce6e434afa64faac037ae63787141', name: "angle_right" }))))));
     }
     tabsChanged(newTabs = [], oldTabs = []) {
         const newIds = newTabs.map((tab) => tab.id);

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

@@ -17,7 +17,7 @@ import { dispatchResizeEvent } from "../../util/dispatch-resize-event";
  *
  * @slot - Content to put inside the `limel-tab-panel`. Each slotted element
  * must have the `id` attribute equal to the id of the tab it belongs to.
- * @exampleComponent limel-example-tab-panel
+ * @exampleComponent limel-example-tab-panel-basic
  */
 export class TabPanel {
     constructor() {
@@ -56,7 +56,7 @@ export class TabPanel {
         this.tabs.forEach(this.setTabStatus);
     }
     render() {
-        return (h(Host, { key: 'dbd02a89b1b4c383652157b6466c8c0f94ef1ede', onChangeTab: this.handleChangeTabs }, h("div", { key: 'ccee27da7513a7e1bc35f74f35d9139ed3c640d2', class: "tab-panel" }, h("limel-tab-bar", { key: '770e20bcd0567d1538709b2172ee16cc2f80db5f', tabs: this.tabs }), h("div", { key: '6a320ec4081da33674a9174bc90edaec223f52e8', class: "tab-content" }, h("slot", { key: 'e31d4491e2237283be6497fe64542d93003b6c63' })))));
+        return (h(Host, { key: 'd1eb596b4d03fa6ac2ada4f05e67f243835cf341', onChangeTab: this.handleChangeTabs }, h("div", { key: 'f3970a0afb5c17ea357dcd9fcb5c031a71d4d7da', class: "tab-panel" }, h("limel-tab-bar", { key: 'ff232710bd7284cf7f96739c3aeaf1a9d7233101', tabs: this.tabs }), h("div", { key: 'b6d3c3a176466efd859eacd90a610c8c8895bc8a', class: "tab-content" }, h("slot", { key: '7a442c6f4347e506b3037dd2ec19f7edc7b2b066' })))));
     }
     setSlotElements() {
         const slot = this.getSlot();

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

@@ -9,7 +9,7 @@ import { areRowsEqual } from "./utils";
 import translate from "../../global/translations";
 const FIRST_PAGE = 1;
 /**
- * @exampleComponent limel-example-table
+ * @exampleComponent limel-example-table-basic
  * @exampleComponent limel-example-table-custom-components
  * @exampleComponent limel-example-table-header-menu
  * @exampleComponent limel-example-table-movable-columns
@@ -575,16 +575,16 @@ export class Table {
     render() {
         var _a, _b;
         const totalRows = (_a = this.totalRows) !== null && _a !== void 0 ? _a : this.data.length;
-        return (h(Host, { key: 'c6ccce572339f3e0ccb344672ca2b82d632ff8d9', class: {
+        return (h(Host, { key: 'ffcd07f62babe29a526ae77d2c36afa4bc066cc9', class: {
                 'has-low-density': this.layout === 'lowDensity',
                 'has-pagination-on-top': this.paginationLocation === 'top',
-            } }, h("div", { key: 'd4e10ab0ae22f480fd939a78e882e183db00a22b', id: "tabulator-container", class: {
+            } }, h("div", { key: '5fe17a812c0e2f0afb730222930f1b8878669511', id: "tabulator-container", class: {
                 'has-pagination': totalRows > this.pageSize,
                 'has-aggregation': this.hasAggregation(this.columns),
                 'has-movable-columns': this.movableColumns,
                 'has-rowselector': this.selectable,
                 'has-selection': (_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection,
-            } }, h("div", { key: '12ecdd76202a8332330b28cd46c78dacda381980', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '239e6d70bdbda4d6df7d526b0278e3ab683c3927', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '837fda38d2c98f3334b43f5206e78e5a1aa818e1', id: "tabulator-table" }))));
+            } }, h("div", { key: '7f2f41c8faff5b81e49bd0731f0cf7f268bbf1da', id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } }, h("limel-spinner", { key: '95ab49709be868ea55a9b92b262c93fb93f41f4b', size: "large" })), this.renderEmptyMessage(), this.renderSelectAll(), h("div", { key: '0c3e2605fefc6ddfdd72a68a13182d0517448f74', id: "tabulator-table" }))));
     }
     renderSelectAll() {
         var _a, _b, _c;

package/dist/collection/util/device.js

@@ -1,14 +1,26 @@
-const userAgent = window.navigator.userAgent;
+function getUserAgent() {
+    var _a;
+    return typeof navigator === 'undefined' ? '' : ((_a = navigator.userAgent) !== null && _a !== void 0 ? _a : '');
+}
+function getPlatform() {
+    var _a, _b, _c;
+    if (typeof navigator === 'undefined') {
+        return '';
+    }
+    return ((_c = (_b = (_a = navigator.userAgentData) === null || _a === void 0 ? void 0 : _a.platform) !== null && _b !== void 0 ? _b : navigator.platform) !== null && _c !== void 0 ? _c : '');
+}
 /**
  *
  */
 export function isIOSDevice() {
-    return /iPad|iPhone|iPod/i.test(userAgent) && !window.MSStream;
+    const userAgent = getUserAgent();
+    return /iPad|iPhone|iPod/i.test(userAgent) && !globalThis.MSStream;
 }
 /**
  *
  */
 export function isAndroidDevice() {
+    const userAgent = getUserAgent();
     return /Android/i.test(userAgent);
 }
 /**
@@ -17,3 +29,15 @@ export function isAndroidDevice() {
 export function isMobileDevice() {
     return isAndroidDevice() || isIOSDevice();
 }
+/**
+ * Detects whether the user is on an Apple device (iOS/iPadOS/macOS).
+ */
+export function isAppleDevice() {
+    const ua = getUserAgent();
+    const platform = getPlatform();
+    const isIPadIPhoneIPod = /iPad|iPhone|iPod/i.test(ua);
+    // Note: iPadOS 13+ reports itself as Mac, so isMacLike covers both
+    // macOS and iPadOS.
+    const isMacLike = /Mac/i.test(platform);
+    return isIPadIPhoneIPod || isMacLike;
+}