@limetech/lime-crm-building-blocks 1.104.1 → 1.104.3

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [1.104.3](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.104.2...v1.104.3) (2025-11-18)
+
+### Bug Fixes
+
+
+* **query-builder:** animate adding alias and description ([17f151e](https://github.com/Lundalogik/lime-crm-building-blocks/commit/17f151e1f83978fd5bc4f653b172704aa7620a43))
+* **query-builder:** improve UX of adding/removing alias and description ([32d7c44](https://github.com/Lundalogik/lime-crm-building-blocks/commit/32d7c446e2b83036be76c52fd36b3a17e84a55bf))
+* **query-builder:** make property items more visually distinct ([4e72932](https://github.com/Lundalogik/lime-crm-building-blocks/commit/4e7293239201712af27c1e32fc150f13f1508cf8))
+* **query-builder:** simplify HTML structure in response format ([a8c6edf](https://github.com/Lundalogik/lime-crm-building-blocks/commit/a8c6edf668f6e7282f371717476586fbe3d9cbf9))
+
+## [1.104.2](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.104.1...v1.104.2) (2025-11-18)
+
+### Bug Fixes
+
+
+* **document-picker:** remove unused interface ([257df7a](https://github.com/Lundalogik/lime-crm-building-blocks/commit/257df7a029668c07eeff0a4ce73ad6ec5b0b77d0))
+
 ## [1.104.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.104.0...v1.104.1) (2025-11-17)
 
 ### Bug Fixes

package/dist/cjs/limebb-document-picker.cjs.entry.js

@@ -71,7 +71,7 @@ const DocumentPicker = class {
         this.labelId = randomString.createRandomString();
     }
     render() {
-        return (index.h(index.Host, { key: '28bf6afd1999efc62689bc43b7d63d8c308d3663' }, index.h("limel-notched-outline", { key: '0b6f3d9f0cc88e9e1b782e3d12e7a08853211be6', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, index.h("div", { key: 'a3d64740ca2139a3435884526b9a6195929d8060', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
+        return (index.h(index.Host, { key: '5e4a9004ed3b81b6c35be868c664e61cb88d490c' }, index.h("limel-notched-outline", { key: 'ada8928b3ed815896e1ef5fb61f539f0ab77c7af', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, index.h("div", { key: '343aeef460a4ea4e0a4a247daf6988f749dc2b49', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
     }
     renderItems() {
         return this.items.map((item) => (index.h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.id, type: this.type, onInteract: this.handleItemInteract })));

package/dist/cjs/limebb-lime-query-response-format-editor_2.cjs.entry.js

@@ -163,7 +163,7 @@ function itemsToPropertySelection(items) {
     return result;
 }
 
-const responseFormatEditorCss = ":host(limebb-lime-query-response-format-editor){display:block;width:100%}.response-format-editor{display:flex;flex-direction:column;padding:1rem 0}limel-badge[slot=actions]{--badge-background-color:rgb(var(--contrast-200));margin-right:0.25rem}.property{border:1px solid var(--header-background-color);border-radius:0 0 0.75rem 0.75rem}.property-list{display:flex;flex-direction:column;border-radius:0.25rem;background-color:rgb(var(--contrast-100));gap:0.5rem;padding:0.5rem}.property-item{border-radius:0.25rem;transition:background-color 0.2s}.property-item:hover{background-color:rgb(var(--contrast-100))}.actions{display:flex}.actions limel-button{padding:0.5rem;width:100%}.empty-state{padding:2rem;text-align:center;color:rgb(var(--contrast-700));font-style:italic}.empty-state p{margin:0}.empty-state .empty-state-message{margin-bottom:1rem;font-size:0.875rem}.empty-state limel-button{margin:0 auto;max-width:200px}";
+const responseFormatEditorCss = ":host(limebb-lime-query-response-format-editor){display:block;width:100%}.response-format-editor{display:flex;flex-direction:column;padding:1rem 0}limel-badge[slot=actions]{--badge-background-color:rgb(var(--contrast-200));margin-right:0.25rem}.property-list{display:flex;flex-direction:column;border-radius:0 0 0.75rem 0.75rem;padding:0.25rem;background-color:rgb(var(--contrast-400))}.empty-state{padding:2rem;text-align:center;color:rgb(var(--contrast-700));font-style:italic}.empty-state p{margin:0}.empty-state .empty-state-message{margin-bottom:1rem;font-size:0.875rem}.empty-state limel-button{margin:0 auto;max-width:200px}";
 const LimebbLimeQueryResponseFormatEditorStyle0 = responseFormatEditorCss;
 
 const ResponseFormatEditor = class {
@@ -248,10 +248,10 @@ const ResponseFormatEditor = class {
         if (this.items.length === 0) {
             return (index.h("div", { class: "response-format-editor" }, index.h("h4", { class: "header" }, this.label), index.h("div", { class: "empty-state" }, index.h("p", { class: "empty-state-message" }, "No properties selected. The response will return empty objects."), index.h("limel-button", { label: "Add Property", icon: "plus_math", onClick: this.handleAddProperty }))));
         }
-        return (index.h("div", { class: "response-format-editor" }, index.h("limel-header", { subheading: this.label }, this.renderPropertyCount()), index.h("div", { class: "property" }, index.h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), index.h("div", { class: "actions" }, index.h("limel-button", { label: "Property", disabled: this.items.some((item) => !item.path || item.path.trim() === ''), icon: {
+        return (index.h("div", { class: "response-format-editor" }, index.h("limel-header", { subheading: this.label }, this.renderPropertyCount()), index.h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index)), index.h("limel-button", { label: "Property", disabled: this.items.some((item) => !item.path || item.path.trim() === ''), icon: {
                 name: 'plus_math',
                 title: 'Add',
-            }, onClick: this.handleAddProperty })))));
+            }, onClick: this.handleAddProperty }))));
     }
     renderPropertyCount() {
         return [
@@ -298,7 +298,7 @@ const ResponseFormatEditor = class {
 };
 ResponseFormatEditor.style = LimebbLimeQueryResponseFormatEditorStyle0;
 
-const responseFormatItemCss = ":host(limebb-lime-query-response-format-item){display:flex;flex-direction:column;gap:0.5rem}.property-controls{display:flex;flex-wrap:wrap;gap:0.5rem;width:100%}.property-path{flex-grow:1;min-width:min(10rem, 100%)}.control-buttons{flex-shrink:0;display:flex;flex-direction:row;gap:0.25rem;align-items:center}.control-buttons limel-icon-button{opacity:0.6;transition:opacity 0.2s ease}.control-buttons limel-icon-button:hover{opacity:1}.control-buttons limel-icon-button.has-value{opacity:1;color:rgb(var(--color-blue-default))}.alias,.description{padding-left:1rem;width:calc(100% - 8.75rem)}@media (max-width: 768px){.property-controls{flex-direction:column;gap:0.5rem}.alias,.description{padding-left:0;width:100%}}";
+const responseFormatItemCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0}:host(limebb-lime-query-response-format-item){display:flex;flex-direction:column;gap:0.5rem}.property-controls{transition:box-shadow 0.4s ease, background-color 0.6s ease;display:flex;align-items:flex-start;gap:0.5rem;width:100%;padding:0.75rem 0.75rem 0 0.75rem;border-radius:0.75rem}.property-controls:hover,.property-controls:focus,.property-controls:focus-within{transition-duration:0.2s;background-color:rgb(var(--contrast-100));box-shadow:var(--shadow-inflated-16)}.property-controls limel-icon-button{margin-top:0.125rem}.property-path{flex-grow:1;display:flex;flex-direction:column;padding-bottom:0.25rem}.button-group,.input-group{padding-left:1rem}.button-group:not(:empty),.input-group:not(:empty){padding-top:0.25rem;padding-bottom:0.25rem}.button-group{display:flex;gap:0.5rem;align-items:center}.button-group button{all:unset;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);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent;font-size:0.625rem;padding:0 0.5rem 0 0.25rem;display:flex;align-items:center;gap:0.25rem;border-radius:0.25rem}.button-group button:hover,.button-group button:focus,.button-group button:focus-visible{will-change:color, background-color, box-shadow, transform}.button-group button:hover,.button-group button:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}.button-group button:hover{box-shadow:var(--button-shadow-hovered)}.button-group button:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.button-group button:hover,.button-group button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.button-group button:focus{outline:none}.button-group button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.button-group button:hover{transform:scale(1.2)}.button-group limel-icon{width:1rem}.input-group{display:flex;align-items:center}.input-group limel-input-field{flex-grow:1}.input-group limel-icon-button{transform:scale(0.85)}.metadata{flex-grow:1;padding-left:1rem}@media (max-width: 768px){.property-controls{flex-direction:column;gap:0.5rem}}.input-grid{--limebb-l-q-r-f-i--opacity-transition-speed:0.1s;--limebb-l-q-r-f-i--opacity-transition-delay:0s;--limebb-l-q-r-f-i--grid-template-rows-transition-speed:0.3s;transition:grid-template-rows var(--limebb-l-q-r-f-i--grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0fr}.input-grid .input-group{transition:opacity var(--limebb-l-q-r-f-i--opacity-transition-speed) ease var(--limebb-l-q-r-f-i--opacity-transition-delay), padding var(--limebb-l-q-r-f-i--opacity-transition-speed) ease var(--limebb-l-q-r-f-i--opacity-transition-delay);overflow:hidden;opacity:0}.input-grid:not(:empty){--limebb-l-q-r-f-i--opacity-transition-speed:0.2s;--limebb-l-q-r-f-i--opacity-transition-delay:0.1s;--limebb-l-q-r-f-i--grid-template-rows-transition-speed:0.2s;grid-template-rows:1fr}.input-grid:not(:empty) .input-group{opacity:1}.button-group:hover .input-grid{will-change:grid-template-rows}.button-group:hover .input-group{will-change:opacity, padding}";
 const LimebbLimeQueryResponseFormatItemStyle0 = responseFormatItemCss;
 
 const ResponseFormatItem = class {
@@ -363,32 +363,32 @@ const ResponseFormatItem = class {
     }
     render() {
         return [
-            index.h("div", { key: 'f80b67734802324c50613070fd91fde35b1caaaa', class: "property-controls" }, index.h("div", { key: 'b481a96617ff29690329bff363ee408c42b746d7', class: "property-path" }, index.h("limebb-property-selector", { key: 'a936e9586348b27250e3b0404eefb0ee5f5a675e', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange })), index.h("div", { key: '058b8ade00d076764327fbd85e968fbc9b96cb23', class: "control-buttons" }, index.h("limel-icon-button", { key: '85614c39df85b3957aac7a31c2fcbb181cf1c351', icon: this.getAliasIcon(), label: "Add alias", class: this.item.alias ? 'has-value' : '', onClick: this.toggleAliasInput }), index.h("limel-icon-button", { key: 'e09875fdef378d3a4141ba1b428d6239c691dc9f', icon: this.getDescriptionIcon(), label: "Add description", class: this.item.description ? 'has-value' : '', onClick: this.toggleDescriptionInput }), index.h("limel-icon-button", { key: '5bced548d2cf53d5097d3b6e84a2440d1bb84b11', icon: "trash", label: "Remove property", onClick: this.handleRemove }))),
-            this.showAliasInput && (index.h("div", { key: '052d6e7f01089914a1b9e79e06cb04b1510c79c2', class: "alias" }, index.h("limel-input-field", { key: '381874f03fdabcedbe07eaf23dd1c31541c42cf4', label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur }))),
-            this.showDescriptionInput && (index.h("div", { key: '083508a61dadb201526b197f60b691bbea7b50df', class: "description" }, index.h("limel-input-field", { key: 'bd718e98091d4776394365aa7175d61d11856a9f', label: "Description", value: this.item.description || '', placeholder: "Describe this property for AI...", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur }))),
+            index.h("div", { key: 'f80b67734802324c50613070fd91fde35b1caaaa', class: "property-controls" }, index.h("div", { key: 'b481a96617ff29690329bff363ee408c42b746d7', class: "property-path" }, index.h("limebb-property-selector", { key: 'a936e9586348b27250e3b0404eefb0ee5f5a675e', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: this.item.path, required: true, onChange: this.handlePathChange }), index.h("div", { key: 'f400ca51e8c4b0540502990282efb2c4e2177404', class: "input-grid" }, this.renderAliasInput()), index.h("div", { key: '48a9cbb975553d06d6b29446e0b949a0748c9175', class: "input-grid" }, this.renderDescriptionInput()), index.h("div", { key: 'c65f2037e82aa3808618f308f680afb8aac4e29f', class: "button-group" }, this.renderAliasButton(), this.renderDescriptionButton())), index.h("limel-icon-button", { key: 'a9b9bcbd2c5600cd2d94b064f219a4ad4119c31b', icon: "trash", label: "Remove property", onClick: this.handleRemove })),
         ];
     }
-    getAliasIcon() {
-        const defaultIcon = {
-            name: 'add_tag',
-            color: 'rgb(var(--color-gray-600))',
-        };
-        const toggledIcon = {
-            name: 'add_tag',
-            color: 'rgb(var(--color-teal-default))',
-        };
-        return this.showAliasInput ? toggledIcon : defaultIcon;
+    renderAliasButton() {
+        if (this.showAliasInput) {
+            return;
+        }
+        return (index.h("button", { type: "button", class: "alias", onClick: this.toggleAliasInput }, "+ Alias"));
     }
-    getDescriptionIcon() {
-        const defaultIcon = {
-            name: 'comments',
-            color: 'rgb(var(--color-gray-600))',
-        };
-        const toggledIcon = {
-            name: 'comments',
-            color: 'rgb(var(--color-teal-default))',
-        };
-        return this.showDescriptionInput ? toggledIcon : defaultIcon;
+    renderDescriptionButton() {
+        if (this.showDescriptionInput) {
+            return;
+        }
+        return (index.h("button", { type: "button", class: "description", onClick: this.toggleDescriptionInput }, "+ Description"));
+    }
+    renderAliasInput() {
+        if (!this.showAliasInput) {
+            return;
+        }
+        return (index.h("div", { class: "input-group" }, index.h("limel-input-field", { label: "Alias", value: this.item.alias || '', placeholder: "Custom property name...", onChange: this.handleAliasChange, onBlur: this.handleAliasBlur, leadingIcon: "add_tag" }), index.h("limel-icon-button", { class: "remove-alias", icon: "multiply", onClick: this.toggleAliasInput, label: "Remove alias", disabled: !!this.item.alias })));
+    }
+    renderDescriptionInput() {
+        if (!this.showDescriptionInput) {
+            return;
+        }
+        return (index.h("div", { class: "input-group" }, index.h("limel-input-field", { label: "Description", value: this.item.description || '', placeholder: "Describe this property for AI...", onChange: this.handleDescriptionChange, onBlur: this.handleDescriptionBlur, leadingIcon: "comments" }), index.h("limel-icon-button", { class: "remove-description", icon: "multiply", onClick: this.toggleDescriptionInput, label: "Remove description", disabled: !!this.item.description })));
     }
 };
 ResponseFormatItem.style = LimebbLimeQueryResponseFormatItemStyle0;

package/dist/cjs/limebb-live-docs-info.cjs.entry.js

@@ -13,8 +13,8 @@ const LiveDocsInfo = class {
     }
     render() {
         return [
-            index.h("div", { key: '849694495956b6afbdfeac8aa7de680e1ab03450', class: "header" }, index.h("limel-icon", { key: '84117fdfff949d6b41b9ec3f2b3ec73f21e5be7b', name: "not_showing_video_frames" }), index.h("h2", { key: '90f1738815699808c6353707b4f366d8a2c661ac' }, "Viewing this file type requires ", index.h("em", { key: 'ef09921e893851f06b756e1e2777847a7e4bd563' }, "Live Docs"))),
-            index.h("p", { key: 'a835a0e1cabd84d7509167b3331878807b083130' }, index.h("em", { key: '3f9ce9e473f33b89adfeb3b143e46cabb6feb1d4' }, "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!", index.h("a", { key: 'f3e683b041ddd66e6f23514d9bb5f3faf80f4c3a', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
+            index.h("div", { key: '98c48e74c9cade3b2da713618d585dd8f80e3116', class: "header" }, index.h("limel-icon", { key: 'b8f56066533f64842a25a324c2794914700c2e8a', name: "not_showing_video_frames" }), index.h("h2", { key: 'c1e8c722d1fc7d22a85f348a66094ffd8c5a5dd3' }, "Viewing this file type requires ", index.h("em", { key: '8aca798b2cf1bfe81be5142496e693f57efea8b1' }, "Live Docs"))),
+            index.h("p", { key: '3934d0c93f6c4b6524643c2ecadd0f3f0f925b09' }, index.h("em", { key: '1d3b811bf94ba19644231e77434442f9f1ade8f6' }, "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!", index.h("a", { key: '023c16b0cfc5b57d750c9a344690fcce51350100', target: "_blank", href: "https://www.lime-technologies.com/en/lime-crm/live-docs/" }, "Learn more")),
         ];
     }
 };

package/dist/cjs/limebb-locale-picker.cjs.entry.js

@@ -1133,7 +1133,7 @@ const LocalePicker = class {
             const value = this.value;
             selectedOptions = options.find((option) => option.value === value);
         }
-        return (index.h("limel-select", { key: '5b3491e9dd6725186c4a2795e7893de43457e147', value: selectedOptions, options: sortBy$1(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
+        return (index.h("limel-select", { key: '4010306cc9bb60b5d1233165eeca5468fe011c33', value: selectedOptions, options: sortBy$1(options, 'text'), helperText: this.helperText, label: this.label, required: this.required, disabled: this.disabled, readonly: this.readonly, onChange: this.handleChange, multiple: this.multipleChoice }));
     }
 };
 

package/dist/cjs/limebb-mention-group-counter.cjs.entry.js

@@ -15,8 +15,8 @@ const MentionGroupCounter = class {
     render() {
         const label = this.getLabel();
         return [
-            index.h("span", { key: 'dcd5792c82409e75e149e263fc7b4864e195a387', id: this.tooltipId }, label),
-            index.h("limel-tooltip", { key: '2c17e50ac616348df3a98da324b6538891cff75c', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
+            index.h("span", { key: 'e6627acbd791531d8f94ed31b07bc47af748da9d', id: this.tooltipId }, label),
+            index.h("limel-tooltip", { key: 'e7eddf0643b594fce4aa00f8c783c39b815bbc6d', elementId: this.tooltipId, label: label, helperLabel: this.helperLabel }),
         ];
     }
     getLabel() {

package/dist/cjs/limebb-navigation-button_2.cjs.entry.js

@@ -124,14 +124,14 @@ const SummaryPopover = class {
             top: '0.125rem',
             right: '0.125rem',
         };
-        return (index.h("limel-popover", { key: '1681bf3578fb29886f68070e3e07397d1e312dc1', style: {
+        return (index.h("limel-popover", { key: '838ab57fbd92dd56d10df1e132c3a0f3f2fef58a', style: {
                 '--limebb-summary-popover-timeout': `${this.triggerDelay}ms`,
-            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("div", { key: '1e2daa75c518f4949a7ca6fdd0ff29bc1a6d529e', slot: "trigger", tabIndex: 0, onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocus: this.openPopoverWithDelay }, index.h("slot", { key: '9d1a9b69db8ac1c4cfddd62fb9949c98700e61b7', name: "trigger" }), index.h("div", { key: '95fcc70f46106c426ae191b6a8d66c7d7a025ca9', class: "opening-countdown-indicator" })), index.h("limel-card", { key: '9294ae443aa9f279c3c01f0af48ca6a2d0d1409f', style: {
+            }, open: this.isPopoverOpen, onClose: this.onPopoverClose, openDirection: this.openDirection }, index.h("div", { key: 'ae1c5c30ac48ea401319596edc02c0cebecede2c', slot: "trigger", tabIndex: 0, onMouseEnter: this.openPopoverWithDelay, onMouseLeave: this.resetTimeout, onFocus: this.openPopoverWithDelay }, index.h("slot", { key: 'c4aa17eca607080749902ebc19dca7cead778af9', name: "trigger" }), index.h("div", { key: 'a19c9591ea7744550f1a7588522552155549b4d1', class: "opening-countdown-indicator" })), index.h("limel-card", { key: 'c19be162436f7744717934e0f5b21e2558dacb5d', 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 }, index.h("limebb-navigation-button", { key: 'b26fecf7c748fcd82fea453ece55189bcd1302ef', 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 }, index.h("limebb-navigation-button", { key: 'e2e8685758030513feacce28e6b9a09cadb7f6c7', slot: "component", type: "close", style: closeButtonStyle, tooltipLabel: "Close", tooltipHelperLabel: "Esc", onClick: this.handleCloseClick }))));
     }
 };
 SummaryPopover.currentOpenPopover = null;

package/dist/cjs/limebb-notification-item.cjs.entry.js

@@ -60,7 +60,7 @@ const NotificationListItem = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '39801fd8e10f1dc228741df48561cad3c59d81d7', id: this.item.id, class: {
+        return (index.h(index.Host, { key: 'e51a5ebe9c955d43f1025a61a12ca870abb66347', 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/cjs/limebb-percentage-visualizer.cjs.entry.js

@@ -78,11 +78,11 @@ const PercentageVisualizer = class {
     render() {
         const normalizedValue = this.getNormalizedValue();
         const zeroPoint = this.getZeroPointPosition();
-        return (index.h(index.Host, { key: '069ab0188df35e32bca3fe7c000d2c5c874012a5', class: this.getContainerClassList(), style: {
+        return (index.h(index.Host, { key: 'a99a367379f75613f8f37824fae64d5425e13c92', 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'}`,
-            } }, index.h("limel-notched-outline", { key: 'f6e544a1859f3166ee540435c687415bbfd5de1d', 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 }, index.h("div", { key: '348f345b2212b3da15c0e081385a5fee76317ebe', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
+            } }, index.h("limel-notched-outline", { key: '498c23ad0ddd79219de646286f9958a84c2592c9', 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 }, index.h("div", { key: 'f8ba78a9b92bb93fc107e04f3001413c7560431b', slot: "content" }, this.renderVisualization())), this.renderHelperLine()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

package/dist/cjs/limebb-text-editor.cjs.entry.js

@@ -1774,7 +1774,7 @@ const LimeBBTextEditor = class {
     }
     render() {
         return [
-            index.h("limel-text-editor", { key: '277ec61f05d5edff319ed8bb37df9bc385cb3941', 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 }),
+            index.h("limel-text-editor", { key: 'de672970cfd1048cc232eeadd527153421f28f36', 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/cjs/limebb-trend-indicator.cjs.entry.js

@@ -39,7 +39,7 @@ const TrendIndicator = class {
         this.numValue = this.parseValue(this.value);
     }
     render() {
-        return (index.h(index.Host, { key: '8c503e1a099f65fe29e2ef1903f78ddf62f815d9', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: '76d8b456dec89cea949ae427091256dffc1e71ab', 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 }, index.h("div", { key: 'e295b50dcc7a3d4cb017f7d1ca5dd187bf52299c', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
+        return (index.h(index.Host, { key: 'a0f458a114e5698f40899c44d532643f50bef249', class: this.getContainerClassList() }, index.h("limel-notched-outline", { key: 'fe9a66d44f3155d6594da5e7e16ce9a33907f800', 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 }, index.h("div", { key: 'daff3b1e6ec7098e7353bca3664179fd9c2594c1', slot: "content", tabIndex: 0 }, this.renderVisualization())), this.renderHelperLine(), this.renderTooltip()));
     }
     renderVisualization() {
         if (this.reducePresence && (this.numValue === 0 || !this.hasValue())) {

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

@@ -76,7 +76,7 @@ export class DocumentPicker {
         this.labelId = createRandomString();
     }
     render() {
-        return (h(Host, { key: '28bf6afd1999efc62689bc43b7d63d8c308d3663' }, h("limel-notched-outline", { key: '0b6f3d9f0cc88e9e1b782e3d12e7a08853211be6', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("div", { key: 'a3d64740ca2139a3435884526b9a6195929d8060', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
+        return (h(Host, { key: '5e4a9004ed3b81b6c35be868c664e61cb88d490c' }, h("limel-notched-outline", { key: 'ada8928b3ed815896e1ef5fb61f539f0ab77c7af', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("div", { key: '343aeef460a4ea4e0a4a247daf6988f749dc2b49', slot: "content", role: this.type === 'radio' ? 'radiogroup' : 'group', "aria-labelledby": this.label ? this.labelId : undefined, "aria-describedby": this.helperText ? this.helperTextId : undefined }, this.renderItems())), this.renderHelperLine()));
     }
     renderItems() {
         return this.items.map((item) => (h("limebb-document-item", { platform: this.platform, context: this.context, item: item, key: item.id, type: this.type, onInteract: this.handleItemInteract })));

package/dist/collection/components/lime-query-builder/response-format/response-format-editor.css

@@ -14,34 +14,12 @@ limel-badge[slot=actions] {
   margin-right: 0.25rem;
 }
 
-.property {
-  border: 1px solid var(--header-background-color);
-  border-radius: 0 0 0.75rem 0.75rem;
-}
-
 .property-list {
   display: flex;
   flex-direction: column;
-  border-radius: 0.25rem;
-  background-color: rgb(var(--contrast-100));
-  gap: 0.5rem;
-  padding: 0.5rem;
-}
-
-.property-item {
-  border-radius: 0.25rem;
-  transition: background-color 0.2s;
-}
-.property-item:hover {
-  background-color: rgb(var(--contrast-100));
-}
-
-.actions {
-  display: flex;
-}
-.actions limel-button {
-  padding: 0.5rem;
-  width: 100%;
+  border-radius: 0 0 0.75rem 0.75rem;
+  padding: 0.25rem;
+  background-color: rgb(var(--contrast-400));
 }
 
 .empty-state {

package/dist/collection/components/lime-query-builder/response-format/response-format-editor.js

@@ -99,10 +99,10 @@ export class ResponseFormatEditor {
         if (this.items.length === 0) {
             return (h("div", { class: "response-format-editor" }, h("h4", { class: "header" }, this.label), h("div", { class: "empty-state" }, h("p", { class: "empty-state-message" }, "No properties selected. The response will return empty objects."), h("limel-button", { label: "Add Property", icon: "plus_math", onClick: this.handleAddProperty }))));
         }
-        return (h("div", { class: "response-format-editor" }, h("limel-header", { subheading: this.label }, this.renderPropertyCount()), h("div", { class: "property" }, h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index))), h("div", { class: "actions" }, h("limel-button", { label: "Property", disabled: this.items.some((item) => !item.path || item.path.trim() === ''), icon: {
+        return (h("div", { class: "response-format-editor" }, h("limel-header", { subheading: this.label }, this.renderPropertyCount()), h("div", { class: "property-list" }, this.items.map((item, index) => this.renderItem(item, index)), h("limel-button", { label: "Property", disabled: this.items.some((item) => !item.path || item.path.trim() === ''), icon: {
                 name: 'plus_math',
                 title: 'Add',
-            }, onClick: this.handleAddProperty })))));
+            }, onClick: this.handleAddProperty }))));
     }
     renderPropertyCount() {
         return [

package/dist/collection/components/lime-query-builder/response-format/response-format-item.css

@@ -1,3 +1,93 @@
+@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!
+  */
+* {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
 :host(limebb-lime-query-response-format-item) {
   display: flex;
   flex-direction: column;
@@ -5,40 +95,111 @@
 }
 
 .property-controls {
+  transition: box-shadow 0.4s ease, background-color 0.6s ease;
   display: flex;
-  flex-wrap: wrap;
+  align-items: flex-start;
   gap: 0.5rem;
   width: 100%;
+  padding: 0.75rem 0.75rem 0 0.75rem;
+  border-radius: 0.75rem;
+}
+.property-controls:hover, .property-controls:focus, .property-controls:focus-within {
+  transition-duration: 0.2s;
+  background-color: rgb(var(--contrast-100));
+  box-shadow: var(--shadow-inflated-16);
+}
+.property-controls limel-icon-button {
+  margin-top: 0.125rem;
 }
 
 .property-path {
   flex-grow: 1;
-  min-width: min(10rem, 100%);
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 0.25rem;
 }
 
-.control-buttons {
-  flex-shrink: 0;
+.button-group,
+.input-group {
+  padding-left: 1rem;
+}
+.button-group:not(:empty),
+.input-group:not(:empty) {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.button-group {
   display: flex;
-  flex-direction: row;
-  gap: 0.25rem;
+  gap: 0.5rem;
   align-items: center;
 }
-.control-buttons limel-icon-button {
-  opacity: 0.6;
-  transition: opacity 0.2s ease;
+.button-group button {
+  all: unset;
+  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);
+  cursor: pointer;
+  color: var(--limel-theme-on-surface-color);
+  background-color: transparent;
+  font-size: 0.625rem;
+  padding: 0 0.5rem 0 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 0.25rem;
 }
-.control-buttons limel-icon-button:hover {
-  opacity: 1;
+.button-group button:hover, .button-group button:focus, .button-group button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
 }
-.control-buttons limel-icon-button.has-value {
-  opacity: 1;
-  color: rgb(var(--color-blue-default));
+.button-group button:hover, .button-group button:focus-visible {
+  transform: translate3d(0, 0.01rem, 0);
+  color: var(--limel-theme-on-surface-color);
+  background-color: var(--lime-elevated-surface-background-color);
+}
+.button-group button:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.button-group button:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
+  box-shadow: var(--button-shadow-pressed);
+}
+.button-group button:hover, .button-group button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
+}
+.button-group button:focus {
+  outline: none;
+}
+.button-group button:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+.button-group button:hover {
+  transform: scale(1.2);
+}
+.button-group limel-icon {
+  width: 1rem;
+}
+
+.input-group {
+  display: flex;
+  align-items: center;
+}
+.input-group limel-input-field {
+  flex-grow: 1;
+}
+.input-group limel-icon-button {
+  transform: scale(0.85);
 }
 
-.alias,
-.description {
+.metadata {
+  flex-grow: 1;
   padding-left: 1rem;
-  width: calc(100% - 8.75rem);
 }
 
 @media (max-width: 768px) {
@@ -46,9 +207,33 @@
     flex-direction: column;
     gap: 0.5rem;
   }
-  .alias,
-  .description {
-    padding-left: 0;
-    width: 100%;
-  }
+}
+.input-grid {
+  --limebb-l-q-r-f-i--opacity-transition-speed: 0.1s;
+  --limebb-l-q-r-f-i--opacity-transition-delay: 0s;
+  --limebb-l-q-r-f-i--grid-template-rows-transition-speed: 0.3s;
+  transition: grid-template-rows var(--limebb-l-q-r-f-i--grid-template-rows-transition-speed) ease;
+  display: grid;
+  grid-template-rows: 0fr;
+}
+.input-grid .input-group {
+  transition: opacity var(--limebb-l-q-r-f-i--opacity-transition-speed) ease var(--limebb-l-q-r-f-i--opacity-transition-delay), padding var(--limebb-l-q-r-f-i--opacity-transition-speed) ease var(--limebb-l-q-r-f-i--opacity-transition-delay);
+  overflow: hidden;
+  opacity: 0;
+}
+.input-grid:not(:empty) {
+  --limebb-l-q-r-f-i--opacity-transition-speed: 0.2s;
+  --limebb-l-q-r-f-i--opacity-transition-delay: 0.1s;
+  --limebb-l-q-r-f-i--grid-template-rows-transition-speed: 0.2s;
+  grid-template-rows: 1fr;
+}
+.input-grid:not(:empty) .input-group {
+  opacity: 1;
+}
+
+.button-group:hover .input-grid {
+  will-change: grid-template-rows;
+}
+.button-group:hover .input-group {
+  will-change: opacity, padding;
 }