@limetech/lime-elements 40.9.0 → 40.10.1

package/dist/collection/components/flex-container/flex-container.js

@@ -31,7 +31,7 @@ export class FlexContainer {
         console.warn('limel-flex-container is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox');
     }
     render() {
-        return h("slot", { key: 'b198feb938d5eb26cf1f96aa6cbfd412c843a3b1' });
+        return h("slot", { key: '791a96736443febd2103b7aeb1437299b103be80' });
     }
     static get is() { return "limel-flex-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/form/form.js

@@ -87,7 +87,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '843ccbe06e291ffa1958da88634f4aee41007f2b', class: "root" });
+        return h("div", { key: '9c5db05ffcc594473a3ca7b2e3962f1659d3601d', class: "root" });
     }
     reactRender() {
         if (!this.root) {

package/dist/collection/components/grid/grid.js

@@ -12,7 +12,7 @@ export class Grid {
         console.warn('limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout');
     }
     render() {
-        return h("slot", { key: '4928fa4c63f2db778bde762470299c8bf05952b3' });
+        return h("slot", { key: 'fcc80e1ddf56068650e342120441027bce5263b5' });
     }
     static get is() { return "limel-grid"; }
     static get encapsulation() { return "shadow"; }

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

@@ -61,7 +61,7 @@ export class Header {
         this.subheadingDivider = '·';
     }
     render() {
-        return (h(Host, { key: '77afcbc01f9ba4c71ad2aec82114564de1cfd591' }, h("div", { key: 'd20b369bd1ae5e472afeee2b6f1bed0c17eacb87', class: "information" }, this.renderIcon(), h("div", { key: '91e5a5aea8fad80316b890e88594da6aa8183182', class: "headings" }, h("h1", { key: '4477c5c6a2f134e98c8aaa4e9716399a4496e09a', class: "heading", title: this.heading }, this.heading), h("h2", { key: 'd81bd39f801ade017cd84d308141041faad4e33b', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '7f1e532fb88771ecd3ab52c5581528e3aa7a14e4', name: "actions" }, h("slot", { key: '5cafb4367e7e9fed6dc3bffb17b4a310daec0c6a' }))));
+        return (h(Host, { key: 'e90e33e08296a0215db2467226e09da918df2e89' }, h("div", { key: '82c18d96c84e78109a38add09df18b0b8b6dd0e3', class: "information" }, this.renderIcon(), h("div", { key: '16e17dfe84b683aece74dafd2ab6a9c433014959', class: "headings" }, h("h1", { key: '1dc86af4d544af7d610442f05fb88c24cc3bb969', class: "heading", title: this.heading }, this.heading), h("h2", { key: '8dcec7cba249b55b543025e7484e3b5cf6b2a6d8', class: "subheading", title: this.subheading }, this.subheading, this.renderSupportingText()))), h("slot", { key: '589ab97c6f9574b84e785ff79c57ecccd51a633d', name: "actions" }, h("slot", { key: '5c1b4d222d5200690917c7a25ef7bb7565d07ef5' }))));
     }
     renderIcon() {
         var _a, _b, _c, _d, _e;

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

@@ -19,7 +19,7 @@ export class HelpContent {
         };
     }
     render() {
-        return (h(Host, { key: '5c4eb2e9819635fb321c9544044521218677b2f6' }, h("limel-markdown", { key: 'bf231a4673cc49263838a41e0469636755df5772', value: this.value }), this.renderReadMoreLink()));
+        return (h(Host, { key: 'dd9facb6511b80349bc2da0b226bb660b6d90027' }, h("limel-markdown", { key: 'e74f0a9a0321bfb0fb16544c39b0c05c736e0d8b', value: this.value }), this.renderReadMoreLink()));
     }
     static get is() { return "limel-help-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,9 +41,9 @@ export class HelpComponent {
         };
     }
     render() {
-        return (h(Host, { key: 'ea89d810cf9e7406a4a299eb98d9470c758d82ec' }, h("limel-popover", { key: '3693e98650f4d94fef1abd8a033dac0cf12906d7', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: '34db4bb7f2c61377b6068f14105d0e6a88fc827e', slot: "trigger", type: "button", onClick: this.openPopover, class: {
+        return (h(Host, { key: '0a59bc47d2f8281466fb478804656d4d69707293' }, h("limel-popover", { key: '4fbb9cc254d7d8428dac179dfecdec15589646cb', open: this.isOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("button", { key: 'b15e2219cb9850fc571d6b2441e2efa999ae3c2d', slot: "trigger", type: "button", onClick: this.openPopover, class: {
                 'is-open': this.isOpen,
-            } }, this.trigger), h("limel-help-content", { key: '5e50557a652e842bf9846738b1aae1df63d55755', value: this.value, readMoreLink: this.readMoreLink }))));
+            } }, this.trigger), h("limel-help-content", { key: '38e1a3222de220e2da82cf0cfc6e7885d7af0c6d', 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

@@ -46,9 +46,9 @@ export class HelperLine {
         };
     }
     render() {
-        return (h(Host, { key: '9fe6acba5a79d706deec8353cdb761565269ab0c', tabIndex: -1, class: {
+        return (h(Host, { key: '69872d6dcdbecf1d703a9fb441f118f9389596bc', tabIndex: -1, class: {
                 invalid: this.invalid,
-            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: '8cec25fd07c608ee5bbbd97af8d3276d124efa64' }, this.renderHelperText(), this.renderCharacterCounter())));
+            }, style: this.hasContent() ? {} : { display: 'none' }, "aria-hidden": !this.hasContent() }, h("div", { key: 'bf63441b2481b1d91fae50d7f85630e361fb2089' }, this.renderHelperText(), this.renderCharacterCounter())));
     }
     static get is() { return "limel-helper-line"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/hotkey/get-hotkey-aria-label.js

@@ -0,0 +1,14 @@
+import { tokenizeHotkeyString } from "../../util/hotkeys";
+import { formatDisplayToken } from "./format-display-token";
+/**
+ * Get the text that a screen reader reads for a hotkey, e.g. `"Command K"`.
+ *
+ * @param hotkey - The hotkey string, e.g. `"meta+k"`.
+ * @param isApple - Whether the current device is an Apple device.
+ */
+export function getHotkeyAriaLabel(hotkey, isApple) {
+    return tokenizeHotkeyString(hotkey)
+        .map((token) => formatDisplayToken(token, isApple).ariaName)
+        .filter(Boolean)
+        .join(' ');
+}

package/dist/collection/components/hotkey/hotkey.js

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { tokenizeHotkeyString } from "../../util/hotkeys";
 import { isAppleDevice } from "../../util/device";
 import { formatDisplayToken } from "./format-display-token";
+import { getHotkeyAriaLabel } from "./get-hotkey-aria-label";
 /**
  * This is a display-only component used to visualize keyboard shortcuts.
  * It renders hotkey strings as styled `<kbd>` elements with
@@ -28,11 +29,8 @@ export class Hotkey {
     render() {
         const parts = tokenizeHotkeyString(this.value);
         const displayParts = parts.map((part) => formatDisplayToken(part, this.isApple));
-        const ariaLabel = displayParts
-            .map((p) => p.ariaName)
-            .filter(Boolean)
-            .join(' ');
-        return (h(Host, { key: 'dd8bc8134560dae3014e6ab5ab6eadeaa0bb6a4e', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
+        const ariaLabel = getHotkeyAriaLabel(this.value, this.isApple);
+        return (h(Host, { key: '8ffc94c7ac5061743e423e5efb8097b7ea03dc6e', "aria-label": ariaLabel || undefined }, displayParts.map(({ display, isGlyph }, index) => (h("kbd", { key: `${parts[index]}-${index}`, class: isGlyph ? 'is-glyph' : undefined }, h("span", null, display))))));
     }
     static get is() { return "limel-hotkey"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -19,7 +19,7 @@ export class Icon {
         this.loadIcon(this.name);
     }
     render() {
-        return h("div", { key: '3e5dc80a0e19e21988169509b33685bdb3005f1d', class: "container" });
+        return h("div", { key: '6d01432082e0272137562dd22ab309b75ce95504', class: "container" });
     }
     async loadIcon(name) {
         if (name === undefined || name === '') {

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

@@ -52,7 +52,7 @@ export class IconButton {
         if (this.host.hasAttribute('tabindex')) {
             buttonAttributes.tabindex = this.host.getAttribute('tabindex');
         }
-        return (h(Host, { key: 'e2fa10697beccc59cb8f332695e445522391649d', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '2dc00d1341e9a458f5a7d060abd777c29cd333e0', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
+        return (h(Host, { key: '0c2536bf5d9628ed72bc55ed768c4e5eb6396b68', onClick: this.filterClickWhenDisabled }, h("button", Object.assign({ key: '3c18c8f45209887df5c4f76ec635839f3cc147ab', "aria-label": this.label, disabled: this.disabled, id: this.tooltipId }, buttonAttributes), this.renderIcon(), this.renderTooltip(this.tooltipId))));
     }
     renderIcon() {
         var _a, _b;

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

@@ -127,9 +127,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: '60e7f038ad45210a2ef928287b2794052993a84b', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: 'd6c9828fa7aaea462e9fefaad921da51b2376738', 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: 'a21ede478dc485edad5648d167cb5168a8560c85', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, class: { 'has-primary-slot-content': this.hasPrimarySlot } }, h("a", { key: '694ed4b61590373e448f63d0814a91d506db9caf', 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: '045db9fdf61d87bd8e92bb299d20b3f21a980634', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '78ddf4323cb56a791a6d3749b653716afd33ccba', class: "value-group" }, this.renderPrefix(), h("div", { key: 'b84ba69a5720088e3207bceb02cc8fd84d4dbdd2', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: 'e33b280c08673989e33d99b982499b401cd505f0' })), this.renderNotification()));
+            } }, this.renderIcon(), this.renderProgress(), h("slot", { key: '753e0576a88b10a3a981e0e46ba266266d84aec6', name: "primary", onSlotchange: this.updateHasPrimarySlotContent }), h("div", { key: '0d125992ed03f4aedcc8b82d47929bd45a268c80', class: "value-group" }, this.renderPrefix(), h("div", { key: 'bde1b5e9cd8fe539d29f267d8b1675bcbc8dbe0b', class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel(), h("limel-3d-hover-effect-glow", { key: '6263b7a134238981c5ce6cdc5dc4321cc7ac43d1' })), this.renderNotification()));
     }
     checkProps(propValue) {
         return propValue ? propValue + ' ' : '';

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

@@ -597,7 +597,7 @@ export class InputField {
         if (ariaControls) {
             properties['aria-controls'] = ariaControls;
         }
-        return (h(Host, { key: 'f75582060395fe9167939a30d0fb07a89d225cf2' }, h("limel-notched-outline", { key: '85e40d1ceee2efb56a7175f090b876b6514a41cb', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: '683ee7c3e879a07f590ac27e8056489cb626b36f', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
+        return (h(Host, { key: 'd12c660cb9aad1bd47680672e632287aba8dd97e' }, h("limel-notched-outline", { key: '91b34653b223e956a6218de02c7f6670a1fe1857', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid || this.isInvalid(), disabled: this.disabled, readonly: this.readonly, hasValue: !!this.value, hasLeadingIcon: !!this.leadingIcon }, h("label", { key: 'd55df49d702b0bf8938304512b716e82b3d3e348', slot: "content", class: this.getContainerClassList() }, this.renderLeadingIcon(), this.renderPrefix(), this.renderFormattedNumber(), this.renderInput(properties), this.renderSuffix(), this.renderTextarea(properties), this.renderTrailingLinkOrButton())), this.renderHelperLine(), this.renderAutocompleteList()));
     }
     valueWatcher(newValue) {
         if (!this.mdcTextField || this.changeWaiting) {

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

@@ -194,7 +194,7 @@ export class List {
             maxLinesSecondaryText = 1;
         }
         const html = this.listRenderer.render(this.items, this.config);
-        return (h(Host, { key: 'b8c5f38d03402596fbd227a19587a801ef0c8b6e', style: {
+        return (h(Host, { key: '5a259a6d125ba3cc5ee04a68dd3ab761bceb2cfb', style: {
                 '--maxLinesSecondaryText': `${maxLinesSecondaryText}`,
             } }, html));
     }

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

@@ -158,9 +158,9 @@ export class ListItemComponent {
             // also keep for `menuitem` for visual state consistency
             ariaProps['aria-selected'] = this.selected ? 'true' : 'false';
         }
-        return (h(Host, Object.assign({ key: '005e6e5fa87bab94b1d3c00970ed4efff409de1b', role: this.getHostRole(), class: {
+        return (h(Host, Object.assign({ key: '628910c7216db5d7580fb139475210d0a05c55db', role: this.getHostRole(), class: {
                 'has-primary-component': !!((_a = this.primaryComponent) === null || _a === void 0 ? void 0 : _a.name),
-            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: '351438e788b747b86a9700ab1a8c700532aee409', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
+            } }, ariaProps), this.renderRadioButton(), this.renderCheckbox(), this.renderIcon(), this.renderImage(), this.renderPrimaryComponent(), h("div", { key: 'acb5d43d2690515d88146b5592a9bfd32225ab88', class: "text" }, this.renderLabel(), this.renderDescription()), this.renderActionMenu(this.actions)));
     }
     /**
      * Returns a stable reference for the provided actions array to avoid

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: '6dbc3a71962933c5cfdf415096e41f90e84e7740' }, this.renderCommandText(), this.renderBadge(), this.renderChevron()));
+        return (h(Host, { key: '468078fa475182bea0474fa0806bd54bb00db4c6' }, 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: 'cb9496c27479dce2acf8005bff7c780190f923ba' }, h("div", { key: 'a48bd187c4b08db7d7b2e105fe4b1c92089d1a57', id: "markdown", ref: (el) => (this.rootElement = el) })));
+        return (h(Host, { key: 'a1883ae4c80a775bc1dbdd9f2b993ab4af8c4cba' }, h("div", { key: 'd8a1cd8f5a102a209fa89f8baf0b08912ead1059', 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: 'eac58da6cc41749eaaae8ca78d9940132c632fba', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: 'c551e446908efa397c665301f121a02c2efb068c' })));
+        return (h(Host, { key: '4739b8085adca277a42f36478b1692970e2a8675', style: style, class: { 'is-laid-out': this.hasRendered } }, h("slot", { key: '14290465ddb5ea67ff9d2883904f3298900151ee' })));
     }
     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: '53dad76785873b9673e15413e2c2f6d3b7253725', class: "mdc-menu-surface--anchor", onClick: this.onTriggerClick }, h("slot", { key: '13bb5f53e6e13101a8ecbb18dbc4df4d74ac5f27', ref: this.setTriggerRef, name: "trigger" }), this.renderNotificationBadge(), h("limel-portal", { key: 'cb64f614e55158e1b3d49fe9111e8c4ad36794b1', visible: this.open, containerId: this.portalId, openDirection: this.openDirection, position: "absolute", containerStyle: { 'z-index': dropdownZIndex } }, h("limel-menu-surface", { key: 'bfe7f53832ac43ec7b0e60f8dd7ac385d0ea3f14', 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: '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: {
                 '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: 'd543dcdd212cd774cd4da536fba637212c4afa59', class: "mdc-menu mdc-menu-surface" }, html);
+        return h("div", { key: '23e18e570d984333dfafc3b45e1e8f06cf02420d', 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: '9bc341ae3ec547e20c882d282cfeb8e876ef067a', class: classList, tabindex: "-1" }, h("slot", { key: '81a18040d209809e41d20d2d37b1a657b8e07c33' })));
+        return (h("div", { key: 'ad7c084b7ac99d8837f0641eb2d1da16cf54866a', class: classList, tabindex: "-1" }, h("slot", { key: 'ddba9bf6dca376d72801e0feb5548bbd0e767d61' })));
     }
     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: 'dc6355aacb61f03ab180b619bd8a619cd2c80cb4', class: "limel-notched-outline" }, h("slot", { key: '49297b4ac7c981f840c359a7f536e57f9a92b91f', name: "content" }), h("span", { key: '78018e75d6e77cbd0ca235d5036d29f9360fe2d0', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: 'ae1aaa6291a429db8f376a68609241c2701c6c80', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: 'd86779e2e34c5bd4138d3d47d127b73af95456d0', class: "limel-notched-outline--trailing-outline" }), this.renderEmptyReadonlyValue())));
+        return (h("div", { key: 'a7d059bafca0519edd93c90daad620131d3fbdd0', class: "limel-notched-outline" }, h("slot", { key: '2498cc520769655fe0445ff58bd782e5ccfb857f', name: "content" }), h("span", { key: '8946f7b280ee76331b6ac66e4b212ea8a3aa567c', class: "limel-notched-outline--outlines", "aria-hidden": "true" }, h("span", { key: '096357fb61dddafd811669d36d910dfd753fcc1e', class: "limel-notched-outline--leading-outline" }), this.renderLabel(), h("span", { key: '37460f34ac2cd82360a0a3bd6cba015133d64516', 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: 'f2218cfa9c631d93e39ecee3a9823c3dd73ba505' }, h("nav", { key: '7b1989a9abdbf254b66d3d2780583749a3ecd44e', "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: 'ad9af64cb7885d6bb6227d5bb6897a267c1a598e', class: "live-region", "aria-live": "polite" }, this.liveMessage)));
+        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)));
     }
     /**
      * 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: '5045ffdd72efce3465448fb8e1ae3044c32ffea2', 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: '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)),
             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: '5726846ff3f4ccc50067c63cab387ce9efa34e9b', class: "trigger-anchor" }, h("slot", { key: '9bc0082641e95e2345b0ae3eb548477827420e85', name: "trigger", ref: this.setTriggerRef }), h("limel-portal", { key: 'fb247bd41c2d0f62f598a0e7d21776661490c485', visible: this.open, containerId: this.portalId, containerStyle: { 'z-index': popoverZIndex }, openDirection: this.openDirection }, h("limel-popover-surface", { key: '808155682967864b09f4344106cc0d1106f9e2c5', contentCollection: this.host.children, style: cssProperties }))));
+        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 }))));
     }
     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: '246fdc8fe255ae881e4ece6ae20bbb7f34a827b5', class: "limel-popover-surface", tabindex: "0" });
+        return h("div", { key: '0efb74a821ff0c1919a048ee08209befdf5582c0', 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: '7fd1ebea533dbbd8ff3df343830cc195e0a66555' });
+        return h("slot", { key: 'f4db0b146b4cd851a9837bf10dc7d331cd5a9dce' });
     }
     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: '1c3fef764fd84f4e84d38a4dbd04f2272fb73775', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
+        return (h("limel-list", { key: '9c12503b398b5c5d35d47d554b64219baf75d21b', 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: '93e5adb101fd866a1c56e0233b32eddef6617a08', class: {
+        return (h(Host, { key: '7cdb4d6a667a0afe8ed668cc32b4a38c39817d75', class: {
                 'boolean-input': true,
                 'radio-button': true,
                 checked: this.checked,
                 disabled: this.disabled,
-            } }, h("input", { key: '816bc49ab2f8bd6fcbaa8d10c7b5250fd64aa044', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: 'e4656777d40210f46c5f28deace470a90f41cfdf', class: "box" }), h("label", { key: 'c27a557fea46c0951a0aed27df40a61b30809550', class: "boolean-input-label", htmlFor: this.id }, this.label)));
+            } }, 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)));
     }
     static get is() { return "limel-radio-button"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,274 @@
+@charset "UTF-8";
+/**
+ * @prop --limel-resize-handle-thickness: Size of the grab area of a handle with `location="top"` or `location="bottom"`, measured in the direction of the drag. Has no effect on a handle with `location="left"` or `location="right"`. Defaults to `0.5rem`, which is the size of the visible strip. Increase it to give touch pointers a larger target. The grab area grows away from the edge that is dragged, and the visible strip stays at the edge.
+ * @prop --limel-resize-handle-visual-length: Length of the visible strip of a handle with `location="top"` or `location="bottom"`, measured along the edge. Has no effect on a handle with `location="left"` or `location="right"`. Defaults to `auto`, so the strip spans the whole grab area. Set it when the grab area is longer than the strip should appear.
+ */
+/**
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
+*
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
+*
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
+*/
+/**
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
+*
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
+*
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
+*/
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+:host(limel-resize-handle) {
+  position: absolute;
+  z-index: 1;
+  touch-action: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100vh;
+}
+
+:host::before,
+:host::after {
+  pointer-events: none;
+  content: "";
+  display: block;
+  position: absolute;
+  inset: 0;
+  border-radius: 100vh;
+  margin: auto;
+}
+
+:host::before {
+  transition: scale 0.3s ease, opacity 0.3s ease;
+  transition-delay: 0.2s;
+  opacity: 0;
+}
+
+:host::after {
+  transition: background-color 0.4s ease;
+  transition-delay: 0.2s;
+  background-color: rgb(var(--contrast-600));
+}
+
+:host([location=top]),
+:host([location=bottom]) {
+  cursor: row-resize;
+  height: var(--limel-resize-handle-thickness, 0.5rem) !important;
+  right: 0;
+  left: 0;
+}
+:host([location=top])::before,
+:host([location=bottom])::before {
+  scale: 1 0.9;
+  height: 0.5rem;
+  width: var(--limel-resize-handle-visual-length, auto);
+}
+:host([location=top])::after,
+:host([location=bottom])::after {
+  height: 0.125rem;
+  width: var(--limel-resize-handle-visual-length, auto);
+}
+
+:host([location=top]) {
+  top: 0;
+}
+:host([location=top])::before {
+  top: 0;
+  bottom: auto;
+}
+:host([location=top])::after {
+  top: calc((0.5rem - 0.125rem) / 2);
+  bottom: auto;
+}
+
+:host([location=bottom]) {
+  bottom: 0;
+}
+:host([location=bottom])::before {
+  top: auto;
+  bottom: 0;
+}
+:host([location=bottom])::after {
+  top: auto;
+  bottom: calc((0.5rem - 0.125rem) / 2);
+}
+
+:host([location=left]),
+:host([location=right]) {
+  cursor: col-resize;
+  width: 0.5rem;
+  top: 0;
+  bottom: 0;
+}
+:host([location=left])::before,
+:host([location=right])::before {
+  scale: 0.9 1;
+}
+:host([location=left])::after,
+:host([location=right])::after {
+  width: 0.125rem;
+}
+
+:host([location=left]) {
+  left: 0;
+}
+
+:host([location=right]) {
+  right: 0;
+}
+
+:host(:focus-visible) {
+  outline: none;
+}
+
+:host(:hover)::before,
+:host(:focus-visible)::before {
+  transition-duration: 0.46s;
+  transition-timing-function: ease-in;
+  opacity: 1;
+  scale: 1 1;
+  background-color: rgb(var(--color-sky-light), 0.4);
+}
+
+:host(:hover)::after,
+:host(:focus-visible)::after {
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in;
+  background-color: rgb(var(--color-sky-default));
+}
+
+div {
+  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;
+  z-index: 1;
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 0.1875rem 0.25rem;
+  border-radius: 100vh;
+  margin: auto;
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-pressed);
+}
+div 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 {
+  margin-top: 0;
+  margin-bottom: auto;
+}
+:host([location=bottom]) div {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+:host([aria-orientation=vertical]) div {
+  rotate: 90deg;
+}
+
+:host(:hover),
+:host(:focus-visible) {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+:host(:hover) div,
+:host(:focus-visible) div {
+  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 {
+  will-change: background-color;
+  background-color: var(--mdc-theme-primary);
+}