@limetech/lime-crm-building-blocks 1.92.0 → 1.92.2

package/dist/collection/components/feed/feed-item/feed-timeline-item.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed
@@ -639,23 +649,24 @@ limel-chip-set {
 }
 
 .thumbnails-grid {
-  column-width: 8rem;
-  column-gap: 0.5rem;
-  margin-top: 0.25rem;
+  display: block;
+  width: 100%;
+  padding: 0.25rem 0;
+  columns: 10rem;
+  gap: clamp(0.25rem, 2vmin, 0.75rem);
 }
 .thumbnails-grid > .thumbnail-card-link {
-  width: 100%;
-  margin: 0 0 0.5rem;
+  display: block;
   break-inside: avoid;
+  margin-bottom: clamp(0.25rem, 2vmin, 0.75rem);
 }
-
 @supports (grid-template-rows: masonry) {
   .thumbnails-grid {
     /* reset column fallback */
     column-width: initial;
     column-gap: initial;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
     grid-template-rows: masonry;
     grid-auto-flow: dense;
     gap: 0.5rem;
@@ -667,6 +678,7 @@ limel-chip-set {
     break-inside: auto;
   }
 }
+
 :host(limebb-feed-timeline-item[has-error]:not([has-error=false])) .left:before {
   background-color: rgb(var(--color-red-default));
   box-shadow: 0 0 0 1px rgb(var(--color-red-default));

package/dist/collection/components/feed/feed-item/feed-timeline-item.js

@@ -98,7 +98,7 @@ export class FeedTimelineItem {
             }
             const id = 'thumb-' + crypto.randomUUID();
             return [
-                h("a", { class: "thumbnail-card-link", id: id, key: id, href: href || undefined }, h("limel-card", { image: image, subheading: filename, clickable: !!href }), this.showThumbnailTooltip(thumbnail, id)),
+                h("a", { class: "thumbnail-card-link", id: id, key: id, href: href || undefined }, h("limel-card", { image: image, clickable: !!href }, h("limebb-feed-item-thumbnail-file-info", { slot: "component", description: filename })), this.showThumbnailTooltip(thumbnail, id)),
             ];
         };
         this.setBodyTextElement = (element) => {

package/dist/collection/components/feed/feed-item-thumbnail-file-info/feed-item-thumbnail-file-info.css

@@ -0,0 +1,103 @@
+@charset "UTF-8";
+/**
+* Note! This file is exported to `dist/scss/` in the published
+* node module, for consumer projects to import.
+* That means this file cannot import from any file that isn't
+* also exported, keeping the same relative path.
+*
+* Or, just don't import anything, that works too.
+*/
+/**
+* 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.
+*/
+/**
+ * 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(limebb-feed-item-thumbnail-file-info) {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.25rem 0.125rem 0.25rem;
+}
+
+span {
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: normal;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-height: normal;
+  color: rgb(var(--contrast-1000));
+  flex-grow: 1;
+  font-size: 0.75rem;
+}

package/dist/collection/components/feed/feed-item-thumbnail-file-info/feed-item-thumbnail-file-info.js

@@ -0,0 +1,48 @@
+import { h } from "@stencil/core";
+/**
+ * This component renders information about a file.
+ * It is used in the feed item thumbnail card to display file details.
+ * If the filename or the "Primary title" is too long, this component
+ * will truncate the text with an ellipsis, on the second line.
+ * @private
+ */
+export class FeedItemThumbnailFileInfo {
+    render() {
+        return h("span", { key: 'adefcb0955cf6ae663bc9edd1a449e21b352c202' }, this.description);
+    }
+    static get is() { return "limebb-feed-item-thumbnail-file-info"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["feed-item-thumbnail-file-info.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["feed-item-thumbnail-file-info.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the file, or the \"Primary title\" of the document object."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "description",
+                "reflect": false
+            }
+        };
+    }
+}

package/dist/collection/components/feed/feed.css

@@ -20,11 +20,45 @@ limel-spinner {
   margin: auto;
 }
 
+.date-group {
+  isolation: isolate;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
 .date-heading {
-  font-weight: 600;
-  font-size: 0.875rem;
-  margin: 1.25rem 0 0.5rem 0;
+  position: sticky;
+  z-index: 1;
+  top: 0.25rem;
+  display: flex;
+  border-radius: 9rem;
+  padding: 0.25rem 0.5rem;
+  margin: 0 auto 0 -0.5rem;
+  width: fit-content;
+  font-size: 0.75rem;
+  line-height: 1;
   color: rgb(var(--contrast-900));
+  backdrop-filter: blur(0.5rem);
+  -webkit-backdrop-filter: blur(0.5rem);
+  transition: color 0.2s ease, border-color 0.4s ease;
+}
+.date-heading:hover {
+  color: rgb(var(--contrast-1000));
+  border-color: rgb(var(--contrast-500));
+}
+.date-heading:hover:before {
+  opacity: 1;
+}
+.date-heading:before {
+  transition: opacity 0.2s ease;
+  content: "";
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  opacity: 0.6;
+  border-radius: inherit;
+  background-color: rgb(var(--contrast-100));
 }
 
 limebb-feed-timeline-item:has(+ limebb-feed-timeline-item[is-bundled]) {

package/dist/collection/components/feed/feed.js

@@ -117,13 +117,10 @@ export class Feed {
         }
     }
     renderFeedItems() {
-        return this.items.map((item, index) => {
-            return [
-                this.renderNewItemsIndicator(item.timestamp, index),
-                this.renderDateHeader(item.timestamp, index),
-                h("limebb-feed-timeline-item", { platform: this.platform, context: this.context, item: item, key: item.id, ui: item === null || item === void 0 ? void 0 : item.ui, helperText: item === null || item === void 0 ? void 0 : item.helperText, hasError: item === null || item === void 0 ? void 0 : item.hasError, isBundled: this.isBundled(item, index) }),
-            ];
-        });
+        return this.groupedItems.map((group) => (h("section", { class: "date-group", key: `date-group-${group.date}-${group.items[0].index}` }, h("a", { class: "date-heading" }, group.date), group.items.map(({ item, index }) => [
+            this.renderNewItemsIndicator(item.timestamp, index),
+            h("limebb-feed-timeline-item", { platform: this.platform, context: this.context, item: item, key: item.id, ui: item === null || item === void 0 ? void 0 : item.ui, helperText: item === null || item === void 0 ? void 0 : item.helperText, hasError: item === null || item === void 0 ? void 0 : item.hasError, isBundled: this.isBundled(item, index) }),
+        ]))));
     }
     renderNewItemsIndicator(timestamp, index) {
         if (!this.lastVisitedTimestamp) {
@@ -155,17 +152,6 @@ export class Feed {
     renderIndicator() {
         return (h("div", { class: "new-items-indicator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));
     }
-    renderDateHeader(timestamp, index) {
-        const currentIndexDate = this.dateTimeFormatter.format(timestamp, 'date');
-        if (index === 0) {
-            return h("a", { class: "date-heading" }, currentIndexDate);
-        }
-        const previousIndexDate = this.dateTimeFormatter.format(this.items[index - 1].timestamp, 'date');
-        if (previousIndexDate === currentIndexDate) {
-            return;
-        }
-        return h("a", { class: "date-heading" }, currentIndexDate);
-    }
     renderLoadMore() {
         if (this.items.length === 0 || this.totalCount <= this.items.length) {
             return;
@@ -181,6 +167,26 @@ export class Feed {
     get translator() {
         return this.platform.get(PlatformServiceName.Translate);
     }
+    /**
+     * Groups feed items by calendar date (formatted using date formatter 'date').
+     * Returns an array of groups each containing the display date string and
+     * the original items with their indices.
+     */
+    get groupedItems() {
+        const groups = [];
+        for (let index = 0; index < this.items.length; index++) {
+            const item = this.items[index];
+            const dateKey = this.dateTimeFormatter.format(item.timestamp, 'date');
+            const lastGroup = groups.at(-1);
+            if (!lastGroup || lastGroup.date !== dateKey) {
+                groups.push({ date: dateKey, items: [{ item, index }] });
+            }
+            else {
+                lastGroup.items.push({ item, index });
+            }
+        }
+        return groups;
+    }
     highlightedItemIdChanged(newValue) {
         if (newValue !== undefined) {
             this.highlightItem(newValue);

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

@@ -35,7 +35,7 @@ export class IconPicker {
                 icon: this.value,
             };
         }
-        return (h("limel-picker", { key: 'c8ff9c4673d8a7b617684ca5a2bfeccca76ddd0c', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
+        return (h("limel-picker", { key: '4be7dd4855e9fb6bbb0f6167a9c3e478f262b23c', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, value: value, searcher: this.search, onChange: this.handleChange, badgeIcons: false, leadingIcon: "search", searchLabel: "Start typing to find the right icon" }));
     }
     static get is() { return "limebb-icon-picker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,7 +92,7 @@ export class InfoTileAdminConfig {
             },
         ];
         return [
-            h("limel-button-group", { key: 'b1448fef0bbb3cd7cf667fc7a064166cb3ccbd3e', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
+            h("limel-button-group", { key: '74a794bc61c9692587bf35e54712c649d3768f9b', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
             this.renderFormatConfig(),
         ];
     }

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

@@ -92,7 +92,7 @@ export class InfoTile {
         const errorProps = Object.assign(Object.assign({}, baseProps), { icon: 'error', prefix: 'ERROR', loading: true, label: this.getLabel(filter) });
         const normalProps = Object.assign(Object.assign({}, baseProps), { label: this.getLabel(filter), link: this.getLink(filter), loading: this.loading, value: value === null || value === void 0 ? void 0 : value.value.trim() });
         const props = !filter || this.error ? errorProps : normalProps;
-        return (h("limel-info-tile", Object.assign({ key: '9d8d11498cba43ea63f18f6a6a72148d39966d5c', class: { error: !filter || this.error } }, props)));
+        return (h("limel-info-tile", Object.assign({ key: '4fca09fbc878e3960ed691f68c6041ce53eb12da', class: { error: !filter || this.error } }, props)));
     }
     getFormattedValue() {
         if (!this.value && this.value !== 0) {

package/dist/collection/components/kanban/kanban-group/kanban-group.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/kanban/kanban-group/kanban-group.js

@@ -31,7 +31,7 @@ export class KanbanGroup {
             this.renderHelp(),
             this.renderGroupHeading(),
             this.renderGroupSummary(),
-            h("div", { key: 'ef4360be090c5c15ab2fc02e9169bf8965386153', class: "items" }, this.renderKanbanItems(), this.renderSpinner(), this.renderLoadMore()),
+            h("div", { key: 'e295aac5500dc6a6a09c3a55dffaeff9a997edf6', class: "items" }, this.renderKanbanItems(), this.renderSpinner(), this.renderLoadMore()),
         ];
     }
     renderGroupSummary() {

package/dist/collection/components/kanban/kanban-item/kanban-item.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

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

@@ -50,7 +50,7 @@ export class KanbanItemComponent {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'dd22e6855c6a5a72a02fb1edd17b2baf3f94020d', id: this.item.id.toString(), class: {
+        return (h(Host, { key: '15d9b0f4cb7074024a1869ca02e08bc60d6c3153', id: this.item.id.toString(), class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),
             }, style: {

package/dist/collection/components/limeobject/file-viewer/live-docs-info.js

@@ -5,8 +5,8 @@ import { h } from "@stencil/core";
 export class LiveDocsInfo {
     render() {
         return [
-            h("div", { key: 'c22bc521545cfe4399ad059e5591aca95eb41a7c', class: "header" }, h("limel-icon", { key: 'e95ac35591ed62d024b8f29ea6cbe5b324dbc25f', name: "not_showing_video_frames" }), h("h2", { key: 'bf81b3a74f19ff7b058edd4ed003f9b12e34a826' }, "Viewing this file type requires ", h("em", { key: 'e85201359337aca5fa9c04c0407829f07c6e3f79' }, "Live Docs"))),
-            h("p", { key: 'f9d85cb82c05f5f4bf0bffe49ae4a7353c52147f' }, h("em", { key: '07a83aef4523e28ed21fb2c4d9d512aae9c8c728' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: 'e5ef9586c943fe2e44f48435e9fbe8674a421752', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
+            h("div", { key: 'c9f2a93f053062a3c3c02c2e3653f9d3240a1dd8', class: "header" }, h("limel-icon", { key: 'cee77268f6abf4dee77fdc6e3ba49477ad24d3a6', name: "not_showing_video_frames" }), h("h2", { key: '05034620f48cbeb2195238e4e63e20ef46d1ffb5' }, "Viewing this file type requires ", h("em", { key: 'b556aeb0136a0252682fb54af461d1e779ea6060' }, "Live Docs"))),
+            h("p", { key: '3833b1b024525c143a6c03619fcf37e308ac7409' }, h("em", { key: '9cd6242503906d79305a03a67326c756697615cb' }, "Live Docs"), " not only enables you to view many file formats such as Microsoft Office documents, but it also empowers you to edit them right in the CRM. No need to download anything on your device!", h("a", { key: '8c95828f4b111d62c9629cfed54d099bc60eb159', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
         ];
     }
     static get is() { return "limebb-live-docs-info"; }

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

@@ -53,7 +53,7 @@ export class LocalePicker {
             const value = this.value;
             selectedOptions = options.find((option) => option.value === value);
         }
-        return (h("limel-select", { key: '30df6f324d8079e37d46c947c7770a06fb155dcf', value: selectedOptions, options: sortBy(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
+        return (h("limel-select", { key: '8796010a6c1c7413d6e7ea8b6db963d82717c1c6', value: selectedOptions, options: sortBy(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
     }
     static get is() { return "limebb-locale-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/navigation-button/navigation-button.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/notification-list/notification-item/notification-item.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

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

@@ -56,7 +56,7 @@ export class NotificationListItem {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '1c473740c91fa41cd54faf388e38b07e94d77a6b', id: this.item.id, class: {
+        return (h(Host, { key: 'd02a619aeed66ab5c79556f858e5603ef153a850', id: this.item.id, class: {
                 'is-clickable': this.isItemClickable(),
                 'is-read': !!((_a = this.item) === null || _a === void 0 ? void 0 : _a.read),
                 'is-selected': !!((_b = this.item) === null || _b === void 0 ? void 0 : _b.selected),

package/dist/collection/components/notification-list/notification-list.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/percentage-visualizer/percentage-visualizer.css

@@ -60,6 +60,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/percentage-visualizer/percentage-visualizer.js

@@ -91,11 +91,11 @@ export class PercentageVisualizer {
     render() {
         const normalizedValue = this.getNormalizedValue();
         const zeroPoint = this.getZeroPointPosition();
-        return (h(Host, { key: 'e49d51430c1004d648a1da8cb186f3bcc2875229', class: this.getContainerClassList(), style: {
+        return (h(Host, { key: 'ad5e9cdb104ade1dfa71497ff3b6aac94d91c2f6', class: this.getContainerClassList(), style: {
                 '--limebb-percentage-visualizer-zero-point-position': `${zeroPoint}%`,
                 '--limebb-percentage-visualizer-width': `${Math.abs(normalizedValue)}%`,
                 '--limebb-percentage-visualizer-rotate': `${normalizedValue >= 0 ? '0deg' : '180deg'}`,
-            } }, h("limel-notched-outline", { key: 'f1f6d3f22bc9d16b8090e4db3598a8156a776695', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: '255d24447f96ff0388aa7931d25db6ba7771921d', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
+            } }, h("limel-notched-outline", { key: '68e10eee563dff4c4142906820b041f3f42f41e9', tabIndex: 0, role: "meter", "aria-valuemin": this.rangeMin, "aria-valuemax": this.rangeMax, "aria-valuenow": this.numValue, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-controls": this.helperTextId }, h("div", { key: 'ecb1cfbd1b90442fe0aa34cf727ab7666a6908e6', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

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

@@ -118,14 +118,14 @@ export class SummaryPopover {
             top: '0.125rem',
             right: '0.125rem',
         };
-        return (h("limel-popover", { key: 'cb6f62c316319bfce2d9261ba6f5a30d60350062', style: {
+        return (h("limel-popover", { key: '126d39c5b55b3b0c363d0f8ef832c77928815a1b', style: {
                 '--limebb-summary-popover-timeout': `${this.triggerDelay}ms`,
-            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: '328782b2ddde3fade53a1b9694fb4780e7956569', slot: "trigger", tabIndex: 0, onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocus: this.openPopoverWithDelay }, h("slot", { key: 'd9b945adaad436de84f8cbe934d119eae01bcc7a', name: "trigger" }), h("div", { key: '2b738785628a66b50c409546e3e076af64813487', class: "opening-countdown-indicator" })), h("limel-card", { key: 'c26ec8ab71ac2fe02d1cef1da7d2b1bd2db8d111', style: {
+            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, h("div", { key: '45ce61d635aed881f3e1cd3a59f3b224820030f1', slot: "trigger", tabIndex: 0, onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocus: this.openPopoverWithDelay }, h("slot", { key: '750536b95b4e44f7e05fd2e418d52928c6a4b7c3', name: "trigger" }), h("div", { key: '8eb3a32ec5a03a145b1b1b447a9d8d4a35b44572', class: "opening-countdown-indicator" })), h("limel-card", { key: '5011cf53fd7e41f3401a7de5271b9a988bf6368d', style: {
                 'max-width': this.popoverMaxWidth,
                 'max-height': this.popoverMaxHeight,
                 'min-width': '7rem',
                 'min-height': '3rem',
-            }, orientation: "landscape", heading: this.heading, subheading: this.subheading, icon: this.icon, value: this.value, image: this.image, actions: this.actions, onActionSelected: this.handleSelected }, h("limebb-navigation-button", { key: '60804ec150c1ac4efcce9dac0897b647cbd9c9bd', slot: "component", type: "close", style: closeButtonStyle, tooltipLabel: "Close", tooltipHelperLabel: "Esc", onClick: this.handleCloseClick }))));
+            }, orientation: "landscape", heading: this.heading, subheading: this.subheading, icon: this.icon, value: this.value, image: this.image, actions: this.actions, onActionSelected: this.handleSelected }, h("limebb-navigation-button", { key: '35cd8a0d34214cccb5ca2bb722e23c72c78fa7b9', slot: "component", type: "close", style: closeButtonStyle, tooltipLabel: "Close", tooltipHelperLabel: "Esc", onClick: this.handleCloseClick }))));
     }
     static get is() { return "limebb-summary-popover"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-editor/mention-group-counter.js

@@ -13,8 +13,8 @@ export class MentionGroupCounter {
     render() {
         const label = this.getLabel();
         return [
-            h("span", { key: '12d42d503da3645e5daa433051fa93166284f00c', id: this.tooltipId }, label),
-            h("limel-tooltip", { key: '614c67320586f5431fa9b76d93ed034312065846', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
+            h("span", { key: '298e2c1a6917dd732e96875ac0fc45eb05120cef', id: this.tooltipId }, label),
+            h("limel-tooltip", { key: '836b49c9627198f232f0a3f07a74be3f3ea260d7', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
         ];
     }
     getLabel() {

package/dist/collection/components/text-editor/text-editor.js

@@ -389,7 +389,7 @@ export class LimeBBTextEditor {
     }
     render() {
         return [
-            h("limel-text-editor", { key: '016d2f9a14697986453733c66a2fb1c5d20fbaa9', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
+            h("limel-text-editor", { key: '260e595d9d833230601d45dfade2dd101ad220d2', ref: (el) => (this.textEditor = el), tabindex: this.disabled ? -1 : 0, value: this.value, contentType: this.contentType, customElements: this.registeredCustomElements, "aria-disabled": this.disabled, language: this.language, triggers: this.registeredTriggers, onTriggerStart: this.handleTriggerStart, onTriggerStop: this.handleTriggerStop, onTriggerChange: this.handleTriggerChange, onImagePasted: this.handleImagePasted, onMetadataChange: this.handleMetadataChange, ui: this.ui, allowResize: this.allowResize, required: this.required, disabled: this.disabled, readonly: this.readonly, helperText: this.helperText, placeholder: this.placeholder, label: this.label, invalid: this.invalid }),
             this.renderPicker(),
         ];
     }

package/dist/collection/components/trend-indicator/trend-indicator.css

@@ -57,6 +57,16 @@
 * 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.
+*/
 /**
  * The breakpoints below are used to create responsive designs
  * in Lime's products. Therefore, they are here to get distributed

package/dist/collection/components/trend-indicator/trend-indicator.js

@@ -52,7 +52,7 @@ export class TrendIndicator {
         this.numValue = this.parseValue(this.value);
     }
     render() {
-        return (h(Host, { key: '91d85a90426f7596bcf33d3a7890796d20afe6f5', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'fcf9b40ca8a3c9df39d5d3c2305e52e134690d64', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '45f0b8aba7b7b1ac83828e91bf14fc4c9204148a', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
+        return (h(Host, { key: '50c4e69d2b6f010418e8a53e6510e22ab14ad1de', class: this.getContainerClassList() }, h("limel-notched-outline", { key: 'f2dc52dcb1bf2af327965e6fd9cd13dde2c542b5', id: this.tooltipId, label: this.label, labelId: this.labelId, invalid: this.invalid, required: this.required, hasValue: true, hasFloatingLabel: true, "aria-labelledby": this.labelId, "aria-describedby": this.helperTextId, "aria-controls": this.helperTextId }, h("div", { key: '41049706a85d38c99877a8e790f8323a9bd23c1e', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {