@limetech/lime-crm-building-blocks 2.2.1 → 2.3.1

package/dist/esm/limebb-chat-list.entry.js

@@ -199,54 +199,45 @@ function insertDateGroups(context) {
 // position as "stuck to newest" and re-pin on each items update.
 const NEAR_NEWEST_THRESHOLD_PX = 50;
 /**
- * Keeps a scroll container stuck to its "newest" edge as items are
- * appended, so long as the user hasn't scrolled away.
- *
- * We use imperative scrolling rather than `flex-direction: column-reverse`
- * so DOM order matches visual order (copy/paste, screen readers, tab
- * order all align with what the user sees). CSS `overflow-anchor: auto`
- * — the default and left enabled here — solves a different problem:
- * preserving scroll position when content is inserted *above* the
- * viewport. It doesn't stick the scroll to the newest edge when items
- * arrive below the viewport, which is what chat typically needs; that
- * requires the imperative approach in this class.
- *
- * Lifecycle:
- * - `beforeRender()` in `componentWillRender` — snapshot whether the
- *   user is near the newest edge, using the order the scroll position
- *   was last measured against. Capturing here (synchronously, before
- *   the new DOM lands) avoids the race a scroll-event listener would
- *   have with `componentDidRender`.
- * - `afterRender()` in `componentDidRender` — if the snapshot said
- *   "near newest", re-pin to the newest edge (new `scrollHeight`).
- * - `repinIfSticky()` for out-of-band re-pins (e.g. after the typing
- *   indicator's height transition finishes — its `scrollHeight`
- *   change lands after `componentDidRender`).
- *
- * Scroll-container contract: the passed element must itself be the
- * scrolling ancestor (the element whose `scrollTop` / `scrollHeight`
- * / `clientHeight` reflect the chat list's scroll state). In practice
- * that is the component's host, which sets `overflow: hidden auto` on
- * itself. If future refactors introduce an inner scrolling wrapper,
- * pass that wrapper instead.
+ * Follows the newest edge until the reader scrolls away. Content growth
+ * does not change that choice, including growth after a component render.
+ * The container must own scrolling and receive handleScroll calls.
+ * The owner must disable native scroll anchoring while following.
  */
 class ScrollAnchor {
-    constructor(scrollContainer, getOrder, initialOrder) {
+    constructor(scrollContainer, getOrder, initialOrder, onFollowingChanged) {
+        var _a;
         this.scrollContainer = scrollContainer;
         this.getOrder = getOrder;
+        this.onFollowingChanged = onFollowingChanged;
         this.isSticky = true;
         this.paintedOrder = initialOrder;
+        (_a = this.onFollowingChanged) === null || _a === void 0 ? void 0 : _a.call(this, this.isSticky);
     }
     beforeRender() {
         if (!this.scrollContainer.isConnected) {
             return;
         }
-        // Measure against the order the scroll position was last painted
-        // with. If `order` just changed, the scroll position still refers
-        // to the previous layout until this render commits.
-        this.isSticky =
-            this.distanceFromNewestEdge(this.paintedOrder) <
-                NEAR_NEWEST_THRESHOLD_PX;
+        this.handleScroll();
+    }
+    handleScroll() {
+        var _a;
+        if (!this.scrollContainer.isConnected) {
+            return;
+        }
+        const scrollTop = this.scrollContainer.scrollTop;
+        // Content can grow without moving the scroll position. Recomputing
+        // the distance then would mistake layout growth for a reader scroll.
+        if (scrollTop === this.lastScrollTop) {
+            return;
+        }
+        const following = this.distanceFromNewestEdge(this.paintedOrder) <
+            NEAR_NEWEST_THRESHOLD_PX;
+        if (following !== this.isSticky) {
+            this.isSticky = following;
+            (_a = this.onFollowingChanged) === null || _a === void 0 ? void 0 : _a.call(this, following);
+        }
+        this.lastScrollTop = scrollTop;
     }
     afterRender() {
         if (!this.scrollContainer.isConnected) {
@@ -261,13 +252,16 @@ class ScrollAnchor {
         if (!this.scrollContainer.isConnected) {
             return;
         }
+        // A scroll event may still be queued when ResizeObserver runs.
+        this.handleScroll();
         if (this.isSticky) {
             this.scrollToNewest();
         }
     }
     scrollToNewest() {
         const target = this.getOrder() === 'oldest-on-top'
-            ? this.scrollContainer.scrollHeight
+            ? Math.max(0, this.scrollContainer.scrollHeight -
+                this.scrollContainer.clientHeight)
             : 0;
         // Reading `scrollTop` is a cheap (already-measured) lookup, and
         // short-circuiting avoids forcing a layout when we'd write the
@@ -277,6 +271,7 @@ class ScrollAnchor {
             return;
         }
         this.scrollContainer.scrollTop = target;
+        this.lastScrollTop = this.scrollContainer.scrollTop;
     }
     distanceFromNewestEdge(order) {
         return order === 'oldest-on-top'
@@ -287,49 +282,7 @@ class ScrollAnchor {
     }
 }
 
-// The CSS property the typing-indicator container transitions.
-// Mirrored from chat-list.scss `.typing-indicator-height-animation
-// { transition: grid-template-rows ... }`. The runtime verifier below
-// guards against the SCSS and the handler-side filter silently
-// disagreeing.
-const HEIGHT_ANIMATION_PROPERTY = 'grid-template-rows';
-/**
- * Returns a `transitionend` listener for the typing indicator's
- * height transition. Filters by property name so unrelated
- * transitions on the same element (e.g. opacity) don't trigger the
- * callback.
- * @param onHeightTransitionEnd
- */
-function createHeightTransitionEndHandler(onHeightTransitionEnd) {
-    return (event) => {
-        if (event.propertyName !== HEIGHT_ANIMATION_PROPERTY) {
-            return;
-        }
-        onHeightTransitionEnd();
-    };
-}
-/**
- * Verifies that the passed element actually transitions on the
- * property the height-transition handler filters on. Surfaces SCSS
- * drift loudly instead of silently breaking auto-scroll-on-indicator-
- * appearance.
- * @param element
- */
-function verifyHeightAnimationProperty(element) {
-    if (!element) {
-        return;
-    }
-    const transitionProperty = globalThis.getComputedStyle(element).transitionProperty;
-    if (!transitionProperty) {
-        return;
-    }
-    const properties = new Set(transitionProperty.split(',').map((p) => p.trim()));
-    if (!properties.has('all') && !properties.has(HEIGHT_ANIMATION_PROPERTY)) {
-        console.warn(`[limebb-chat-list] Typing indicator is transitioning \`${transitionProperty}\` instead of \`${HEIGHT_ANIMATION_PROPERTY}\`. The auto-scroll on indicator appearance will not fire. Update the CSS or the handler so they match.`);
-    }
-}
-
-const chatListCss = () => `@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;gap:0.5rem;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}*{box-sizing:border-box}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;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))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[order=oldest-on-top]) .typing-indicator-height-animation{bottom:0}:host(limebb-chat-list[order=newest-on-top]) .typing-indicator-height-animation{top:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:last-of-type limebb-chat-item:last-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}`;
+const chatListCss = () => `@charset "UTF-8";:host(limebb-chat-list){--limel-top-edge-fade-height:0.75rem;isolation:isolate;--limel-overflow-mask-vertical:linear-gradient(       to bottom,       transparent 0%,       black calc(0% + var(--limel-top-edge-fade-height, 1rem)),       black calc(100% - var(--limel-bottom-edge-fade-height, 1rem)),       transparent 100%   );-webkit-mask-image:var(--limel-overflow-mask-vertical);mask-image:var(--limel-overflow-mask-vertical);padding-top:var(--limel-top-edge-fade-height, 1rem);padding-bottom:var(--limel-bottom-edge-fade-height, 1rem);box-sizing:border-box;display:flex;flex-direction:column;height:100%;width:100%;min-width:0;min-height:0;padding:var(--limel-top-edge-fade-height) 0.5rem;overflow:hidden auto}:host(limebb-chat-list.is-empty){padding:0}:host(limebb-chat-list.is-following){overflow-anchor:none}*{box-sizing:border-box}.content{display:flex;flex-direction:column;flex:1 0 auto;gap:0.5rem;min-width:0}.messages{display:flex;flex-direction:column;flex-shrink:0;gap:0.5rem}:host(limebb-chat-list[loading]) .messages{flex-grow:1}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:inherit;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0 auto;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))}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:rgb(var(--contrast-100))}.typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.1s;--limebb-chat-typing-opacity-transition-delay:0s;--limebb-chat-typing-grid-template-rows-transition-speed:0.3s;position:sticky;z-index:1;transition:grid-template-rows var(--limebb-chat-typing-grid-template-rows-transition-speed) ease;display:grid;grid-template-rows:0}.typing-indicator-height-animation div{transition:opacity var(--limebb-chat-typing-opacity-transition-speed) ease var(--limebb-chat-typing-opacity-transition-delay);overflow:hidden;opacity:0}:host(limebb-chat-list[order=oldest-on-top]) .typing-indicator-height-animation{bottom:0}:host(limebb-chat-list[order=newest-on-top]) .typing-indicator-height-animation{top:0}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation{--limebb-chat-typing-opacity-transition-speed:0.4s;--limebb-chat-typing-opacity-transition-delay:0.3s;--limebb-chat-typing-grid-template-rows-transition-speed:0.46s;grid-template-rows:1.5rem}:host(limebb-chat-list[is-typing-indicator-visible]) .typing-indicator-height-animation div{opacity:1}.date-group limebb-chat-item{--limebb-promoted-action-bar-grid-template-rows:0fr}:host(limebb-chat-list[order=oldest-on-top]) .date-group:last-of-type limebb-chat-item:last-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}:host(limebb-chat-list[order=newest-on-top]) .date-group:first-of-type limebb-chat-item:first-of-type{--limebb-promoted-action-bar-grid-template-rows:1fr}`;
 
 const ChatList = class {
     constructor(hostRef) {
@@ -360,7 +313,12 @@ const ChatList = class {
          */
         this.order = 'oldest-on-top';
         this.processedItems = [];
-        this.handleHeightTransitionEnd = createHeightTransitionEndHandler(() => { var _a; return (_a = this.scrollAnchor) === null || _a === void 0 ? void 0 : _a.repinIfSticky(); });
+        this.handleScroll = (event) => {
+            var _a;
+            if (event.target === this.host) {
+                (_a = this.scrollAnchor) === null || _a === void 0 ? void 0 : _a.handleScroll();
+            }
+        };
     }
     handleItemsChange() {
         let lastVisited = null;
@@ -375,34 +333,55 @@ const ChatList = class {
     }
     componentWillLoad() {
         this.handleItemsChange();
-        this.scrollAnchor = new ScrollAnchor(this.host, () => this.order, this.order);
+    }
+    connectedCallback() {
+        this.observeSize();
     }
     componentDidLoad() {
+        this.observeSize();
+    }
+    disconnectedCallback() {
         var _a;
-        verifyHeightAnimationProperty((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.typing-indicator-height-animation'));
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
     }
-    componentWillRender() {
-        if (this.items.length === 0) {
-            // Nothing to measure or scroll against. `isSticky` retains
-            // its last value (default `true`), so the first non-empty
-            // render still pins correctly.
+    observeSize() {
+        var _a;
+        const content = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.content');
+        if (!content || this.resizeObserver) {
             return;
         }
-        this.scrollAnchor.beforeRender();
+        this.resizeObserver = new ResizeObserver(() => { var _a; return (_a = this.scrollAnchor) === null || _a === void 0 ? void 0 : _a.repinIfSticky(); });
+        this.resizeObserver.observe(content);
+        this.resizeObserver.observe(this.host);
     }
-    componentDidRender() {
+    componentWillRender() {
         if (this.items.length === 0) {
+            if (this.scrollAnchor) {
+                this.host.scrollTop = 0;
+            }
+            this.scrollAnchor = undefined;
+            this.host.classList.remove('is-following');
             return;
         }
-        this.scrollAnchor.afterRender();
+        if (this.scrollAnchor) {
+            this.scrollAnchor.beforeRender();
+        }
+        else {
+            this.scrollAnchor = new ScrollAnchor(this.host, () => this.order, this.order, (following) => this.host.classList.toggle('is-following', following));
+        }
+    }
+    componentDidRender() {
+        var _a;
+        (_a = this.scrollAnchor) === null || _a === void 0 ? void 0 : _a.afterRender();
     }
     render() {
-        return (h(Host, { key: '18a96922c3f3a501396a174a4ab2b5ecfaebdbd7', class: {
+        return (h(Host, { key: 'f99cc3baf1dd34c6a8949976c71042ce0d809046', class: {
                 'is-empty': this.items.length === 0 &&
                     !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), this.order === 'newest-on-top' &&
+            }, onScroll: this.handleScroll }, h("div", { key: '1d77b03beb2c5d61b4e50f15d7458f9b28f35d67', class: "content" }, h("div", { key: '7d1b5577c5f79ef49fe8f1fe33513b60576ee3b4', class: "messages", role: "log", "aria-busy": this.isBusy() }, this.renderSpinner(), this.order === 'newest-on-top' &&
             this.renderTypingIndicatorBlock(), this.renderChatItems(), this.order === 'oldest-on-top' &&
-            this.renderTypingIndicatorBlock()));
+            this.renderTypingIndicatorBlock()), h("slot", { key: '04ae84b855377c9407f266ca9edffaefdd69f721', name: "after" }))));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -411,12 +390,7 @@ const ChatList = class {
         return h("limel-spinner", null);
     }
     renderTypingIndicatorBlock() {
-        // The indicator's grid-template-rows transition grows the
-        // container over ~0.46s. `componentDidRender` fires before the
-        // transition starts, so `scrollHeight` at that moment doesn't
-        // include the final height. `handleHeightTransitionEnd` re-pins
-        // once the transition lands.
-        return (h("div", { class: "typing-indicator-height-animation", onTransitionEnd: this.handleHeightTransitionEnd }, h("div", null, this.renderTypingIndicator())));
+        return (h("div", { class: "typing-indicator-height-animation" }, h("div", null, this.renderTypingIndicator())));
     }
     renderTypingIndicator() {
         if (!this.isTypingIndicatorVisible) {
@@ -483,11 +457,16 @@ const ChatList = class {
         const dateHeading = (h("a", { id: headingId, class: "date-heading", role: "heading", "aria-level": 2 }, group.heading));
         return (h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, dateHeading, chatItems));
     }
+    // Keys carry the item kind because Stencil builds the replacement
+    // for a key that changed tag from the wrong vnode, corrupting the
+    // list. Consumers reuse ids across item kinds (and across the
+    // conversations they render into one list), so a bare id can name
+    // a bubble in one render and an icon row in the next.
     renderChatItem(item) {
-        return (h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, helperText: item.helperText, hasError: item.hasError, key: item.id }));
+        return (h("limebb-chat-item", { platform: this.platform, context: this.context, item: item, helperText: item.helperText, hasError: item.hasError, key: `chat-${item.id}` }));
     }
     renderIconList(item) {
-        return h("limebb-chat-icon-list", { item: item, key: item.id });
+        return (h("limebb-chat-icon-list", { item: item, key: `icon-list-${item.id}` }));
     }
     renderIndicator() {
         return (h("div", { class: "new-items-indicator", role: "separator" }, h("hr", null), h("h3", null, this.translator.get('webclient.new'))));

package/dist/esm/limebb-color-palette-picker.entry.js

@@ -31,7 +31,7 @@ const ColorPalettePicker = class {
         this.optionsById = new Map(this.options.map((option) => [option.value, option]));
     }
     render() {
-        return (h(Host, { key: 'a5f44d09a862e67f6216bcad7f46eec29ced722a' }, h("limel-select", { key: 'a5cf05f6592bdda711def6ec1a05b56aee2b73c9', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, options: this.options, value: this.getSelectedOption(), onChange: this.handleChange })));
+        return (h(Host, { key: '5144d7eed8495f7880a5b9b84f6d21e057823f6f' }, h("limel-select", { key: '592ba7009714d5585c3ec4051ff87780bfaf7ce0', label: this.label, helperText: this.helperText, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, required: this.required, options: this.options, value: this.getSelectedOption(), onChange: this.handleChange })));
     }
     /**
      * Resolve `this.value` against the cached options map. Returns

package/dist/esm/limebb-color-palette-swatches.entry.js

@@ -11,7 +11,7 @@ const ColorPaletteSwatches = class {
         this.colors = [];
     }
     render() {
-        return (h(Host, { key: '62b7189e13fb67c79e8da299a40b1ec621a2886f', "aria-hidden": "true" }, h("ol", { key: 'ae4bda8db0f631c0a8d7ea42f033c4bb1e37b1da' }, this.colors.map((color, index) => (h("li", { key: index, style: { backgroundColor: color } }))))));
+        return (h(Host, { key: '0a9f6954afe6a8378b9a9dfebf4b6509ee6bc3b6', "aria-hidden": "true" }, h("ol", { key: 'ed8ce5aa8220f66888cdf349d15367447973bf00' }, this.colors.map((color, index) => (h("li", { key: index, style: { backgroundColor: color } }))))));
     }
 };
 ColorPaletteSwatches.style = colorPaletteSwatchesCss();

package/dist/esm/limebb-composer-toolbar.entry.js

@@ -64,8 +64,8 @@ const ComposerToolbar = class {
     }
     render() {
         return [
-            h("div", { key: '95a495c2289ee07d42b9f2ffd5b9f69634f0c70b', class: "actions" }, h("slot", { key: '3729266b77e939e980734556dc1417e34921b9a9', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), h("slot", { key: '211edc189658f512049b9e9487007a9e5b580134', name: "trailing" })),
-            h("slot", { key: '5c7e90a4577224f004e45b4f8447b330b6878138', name: "primary-action" }),
+            h("div", { key: '838a9bb908a59ea4d7667ce54578277ef2733426', class: "actions" }, h("slot", { key: '09f4969bdf3c01b86e54708e105e93812c8e5e69', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), h("slot", { key: 'f0f58aeb42a17784c1343e94f9ee51c0f85b7a8a', name: "trailing" })),
+            h("slot", { key: '76a69ca163d0c92a1fd27f9aaf5ce1644d9ed4b4', name: "primary-action" }),
         ];
     }
     get translator() {

package/dist/esm/limebb-currency-picker.entry.js

@@ -1968,7 +1968,7 @@ const CurrencyPicker = class {
         };
     }
     render() {
-        return (h("limel-picker", { key: 'e1c19958d4a1e01b3e4457df228f3385afc7c2dc', label: this.label || this.defaultLabel, value: this.createListItem(this.value), helperText: this.helperText, onChange: this.handleChange, badgeIcons: false, disabled: this.disabled, required: this.required, readonly: this.readonly, invalid: this.readonly, searcher: this.search }));
+        return (h("limel-picker", { key: 'a27f9d7eb1a3c5b351f7fbf3754a2ffff6c50e96', label: this.label || this.defaultLabel, value: this.createListItem(this.value), helperText: this.helperText, onChange: this.handleChange, badgeIcons: false, disabled: this.disabled, required: this.required, readonly: this.readonly, invalid: this.readonly, searcher: this.search }));
     }
     getCurrencyName(code) {
         var _a;

package/dist/esm/limebb-dashboard-widget.entry.js

@@ -16,7 +16,7 @@ const DashboardComponent = class {
         };
     }
     render() {
-        return [this.renderHeader(), h("slot", { key: 'ba53d5b138de483e0e00338af99323ae0985be08', name: "content" })];
+        return [this.renderHeader(), h("slot", { key: '909b0c9589ee8e78c1cc8e9ab348527fea2d802c', name: "content" })];
     }
 };
 DashboardComponent.style = dashboardWidgetCss();

package/dist/esm/limebb-date-picker.entry.js

@@ -73,7 +73,7 @@ const DatePicker = class {
         if (this.value) {
             this.shouldEmitValueAsString = typeof this.value === 'string';
         }
-        return (h("limel-date-picker", { key: 'f7862d367f9cbf03a57d5da9e668daddc782d09f', disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.parseDateValue(), type: this.type, language: this.language, formatter: this.formatter, onChange: this.handleChange }));
+        return (h("limel-date-picker", { key: '5b73d026cdc90f74cab3889f75a1049152db9281', disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: this.helperText, required: this.required, value: this.parseDateValue(), type: this.type, language: this.language, formatter: this.formatter, onChange: this.handleChange }));
     }
     parseDateValue() {
         const value = this.value;

package/dist/esm/limebb-date-range.entry.js

@@ -21,7 +21,7 @@ const DateRange = class {
         this.originalEndTime = this.endTime;
     }
     render() {
-        return (h("div", { key: '164c0dd19a89356dcd9186768033d7974006dcb5', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
+        return (h("div", { key: 'b7061f4bc5dbca336514fcf45ff4560c4aa91403', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
     }
     renderStartDatePicker() {
         if (!this.originalStartTime) {

package/dist/esm/limebb-document-chips.entry.js

@@ -345,7 +345,7 @@ const DocumentChips = class {
         this.revokeAllBlobUrls();
     }
     render() {
-        return (h(Host, { key: '2e28ebeac60bd5da2ee8123d3b9d842184574cf4', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
+        return (h(Host, { key: '6ae3555251d692d23e010e717df9b7d6b938e47e', role: "list", "aria-label": this.accessibleLabel }, this.files.map((file) => this.renderFile(file))));
     }
     renderFile(file) {
         const isReady = !file.uploadState || file.uploadState === 'done';

package/dist/esm/limebb-document-item.entry.js

@@ -114,10 +114,10 @@ const DocumentItemComponent = class {
     render() {
         const isUnavailable = this.isUnavailable();
         const image = this.getImage();
-        return (h(Host, { key: '2dc84cd76b18d18e88773d95360fce70fd3f889e', id: String(this.item.file.id), class: {
+        return (h(Host, { key: 'd43c632328fced71fd52672150fc33304b172212', id: String(this.item.file.id), class: {
                 'has-image': !!image,
                 'has-error': !!this.item.hasError,
-            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: '07cb1a3f10d57810f818d7391052f81a0d37a0a5', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'bded9a7c6cd9427125286dbce6b5e4b24153cae1', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
+            }, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": this.item.selected ? 'true' : 'false', "aria-disabled": isUnavailable ? 'true' : 'false', tabIndex: isUnavailable ? -1 : 0 }, h("limel-card", { key: '9e3348decfcd8cae2011ee8d6a677529a8eeba81', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'e748c2fd4e5cf0d97870fb7b4cbda71ae79c2209', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
     }
     renderBooleanInput() {
         const id = this.getControlId();

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

@@ -66,7 +66,7 @@ const DocumentPicker = class {
         this.labelId = createRandomString();
     }
     render() {
-        return (h(Host, { key: '8138e0b7f0293f202538badd54b36cd8aae6b803' }, h("limel-notched-outline", { key: '78d990077f20983a0b650e5fb09b0d6e464b4af9', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: 'ba2cac65bb707cd2b81a434ced3e00f440d84e58', 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: '54de1e83d59de262b8e8e7f81c5505bd288d4e75' }, h("limel-notched-outline", { key: '54502e0f4eb3105746aaf1f7ba80c6e88e687acb', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: 'c782d54540e6a1d66743796983b4f14997725bdc', 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.file.id, type: this.type, onInteract: this.handleItemInteract })));

package/dist/esm/limebb-feed-item-thumbnail-file-info.entry.js

@@ -7,7 +7,7 @@ const FeedItemThumbnailFileInfo = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return h("span", { key: '7290a59bad25cf3b5a0859438745867bb62837cc' }, this.description);
+        return h("span", { key: 'a19af68f2f240a1bb36645509e42b337cec8be01' }, this.description);
     }
 };
 FeedItemThumbnailFileInfo.style = feedItemThumbnailFileInfoCss();

package/dist/esm/limebb-feed-timeline-item.entry.js

@@ -216,7 +216,7 @@ const FeedTimelineItem = class {
     render() {
         var _a, _b;
         const helperTextId = `helper-text-${this.item.id}`;
-        return (h(Host, { key: '8348e3e4331d6e82b450f018901cc7de3b599954', id: this.item.id, class: {
+        return (h(Host, { key: 'ad9ac13f47bda162ecdd9df62a2393d4b34ca76d', id: this.item.id, class: {
                 'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
                 'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
                 'shows-less': !this.showMore,

package/dist/esm/limebb-feed.entry.js

@@ -556,7 +556,7 @@ const Feed = class {
         this.highlighter.unregisterFeed(this.feedItemElement);
     }
     render() {
-        return (h(Host, { key: '67cdc2679d56efee3433fbfa23f434fa284163fa', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
+        return (h(Host, { key: 'f2ffe4bbef2e7371d0b1c51e81f2246a16a2615e', role: "log", "aria-busy": this.loading ? 'true' : 'false', style: {
                 '--limebb-feed-highlight-duration': `${ITEM_HIGHLIGHT_DURATION}ms`,
             } }, this.renderLoadMore(), this.renderEmptyFeedMessage(), this.renderSpinner(), this.renderFeedItems()));
     }

package/dist/esm/limebb-filter-chip_6.entry.js

@@ -89,8 +89,8 @@ const FilterChip = class {
         const items = this.getDisplayItems();
         const conjunction = this.getConjunctionText();
         const helperLabel = this.getHelperLabel(items, conjunction);
-        return (h(Host, { key: '1528a86d1e7f7f1749cc895787bca1e77c8678aa' }, this.renderLabel(), h("button", { key: '07dc7184d0a53472ed0d595a07941077aabaa5c0', class: { chip: true }, type: "button", id: chipId, "aria-label": [this.label, helperLabel].filter(Boolean).join(', ') ||
-                this.getFilterLabel(), "aria-pressed": this.getAriaPressed(), onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.renderIcon(), this.renderValue(items, conjunction)), this.renderRemoveButton(chipId), h("limel-tooltip", { key: '665f0b32f7ccdc27b72a56bee9d39e83fb3945b7', elementId: chipId, label: this.label || this.getFilterLabel(), helperLabel: helperLabel })));
+        return (h(Host, { key: '0a9928cddf2b33b2c7e9141b76ef6114966bcf5f' }, this.renderLabel(), h("button", { key: '087a97e9a0e3bed2f926ac7e72096a0fd2224d5b', class: { chip: true }, type: "button", id: chipId, "aria-label": [this.label, helperLabel].filter(Boolean).join(', ') ||
+                this.getFilterLabel(), "aria-pressed": this.getAriaPressed(), onKeyDown: this.handleKeyDown, disabled: this.disabled }, this.renderIcon(), this.renderValue(items, conjunction)), this.renderRemoveButton(chipId), h("limel-tooltip", { key: 'ee48543757e7bde9f31c58c00b7e46f0a0c38b83', elementId: chipId, label: this.label || this.getFilterLabel(), helperLabel: helperLabel })));
     }
     /**
      * `aria-pressed` only makes sense for an interactive toggle. A readonly
@@ -317,7 +317,7 @@ const FilterConditionPicker = class {
     render() {
         const items = this.buildItems();
         const selected = this.selectedOption(items);
-        return (h(Host, { key: 'ca926963d368460db20fa8961f49825d19ae2c07' }, h("limel-select", { key: '5571b580b7da63d1a95fef6cb9b204ed3b32cf75', class: "condition", label: this.accessibleLabel, disabled: this.disabled, options: items, value: selected, onChange: this.handleChange })));
+        return (h(Host, { key: '5883ce6193714207687cf7f5ad05aba1a0dc6a87' }, h("limel-select", { key: '1a4b9c6ce47cb89ff9d98fe0bbcc51d01db8a69e', class: "condition", label: this.accessibleLabel, disabled: this.disabled, options: items, value: selected, onChange: this.handleChange })));
     }
     buildItems() {
         var _a;
@@ -441,7 +441,7 @@ const LimeQueryFilterComparisonEditorComponent = class {
         (_a = this.propertySelectorEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '98144a439c21e88ba452732933dd155afa7f90d8' }, this.renderPropertySelector(), this.renderConditionPicker(), this.renderValueInput()));
+        return (h(Host, { key: '6adf494d70409b6fd0b41760646d5c6c6501a48f' }, this.renderPropertySelector(), this.renderConditionPicker(), this.renderValueInput()));
     }
     renderPropertySelector() {
         return (h("limebb-property-selector", { ref: (el) => (this.propertySelectorEl = el), class: "property", label: "Property", platform: this.platform, context: this.context, limetype: this.limetype, value: this.expression.key, required: true, onChange: this.handlePropertyChange }));
@@ -543,9 +543,9 @@ const LimeQueryFilterGroupComponent = class {
         const combinator = getCombinator(this.expression);
         const inner = getInnerAndOr(this.expression);
         const selected = COMBINATOR_OPTIONS.find((o) => o.value === combinator);
-        return (h(Host, { key: 'f41c27e721c5241f03ebc380fc0bee1bc6488ba8', "data-op": combinator, style: {
+        return (h(Host, { key: '92c46da043467cc08a6832b1b3d8efb902d0202f', "data-op": combinator, style: {
                 '--limebb-query-filter-group-color-code': OP_STYLE[combinator].color,
-            } }, h("div", { key: '6dee3189e64ff49cc6b4234fcacabbcc592c56a7', class: "group" }, h("div", { key: 'c92e073de445fcefa48e8d90eeaa0357f2fbc9ea', class: "group-header" }, h("limel-select", { key: 'd0de8053b240e5d40b2f9d1de2defdb5257383b6', class: "combinator", label: "Match", value: selected, options: COMBINATOR_OPTIONS, onChange: this.handleCombinatorChange }), h("limel-icon-button", { key: '44b099283399ab33a906f0e7acc940dc39041b10', class: "delete-group", icon: "trash", label: "Delete this group", onClick: this.handleDeleteGroup })), h("ul", { key: 'a8d06013ab21aa149ea1dcf2293ffbb5d0d13e61', class: "rows" }, inner.exp.map(this.renderChildExpression), h("limel-chip", { key: 'f2866e974c93a0633b487d9943e63b929d67a7be', role: "listitem", class: "add-condition", text: "Condition", icon: { name: 'plus_math', title: 'Add' }, onClick: this.handleAddChildExpression })), h("limel-chip", { key: 'defd0ab0875920887391c2114139b92a63d10650', class: "add-group", size: "small", text: "Group", icon: {
+            } }, h("div", { key: '9bdd072b62abf3707be294845f0b852bcef6ff30', class: "group" }, h("div", { key: 'b543e0aec068144ebcc1af3f2024c1823bfe4cac', class: "group-header" }, h("limel-select", { key: 'cf5094130a5776d194d1678d2f09405732bb075a', class: "combinator", label: "Match", value: selected, options: COMBINATOR_OPTIONS, onChange: this.handleCombinatorChange }), h("limel-icon-button", { key: 'f1e9d60319a303754231f51fb15a0141d456878e', class: "delete-group", icon: "trash", label: "Delete this group", onClick: this.handleDeleteGroup })), h("ul", { key: '38120502709887cfd904781da2cf7ca96dc663dc', class: "rows" }, inner.exp.map(this.renderChildExpression), h("limel-chip", { key: 'ddbaed450c74d5113ac1d227d04da353237ee3f7', role: "listitem", class: "add-condition", text: "Condition", icon: { name: 'plus_math', title: 'Add' }, onClick: this.handleAddChildExpression })), h("limel-chip", { key: 'b1a2506e6d5da147e2b2e4ecfa755cda5f86c395', class: "add-group", size: "small", text: "Group", icon: {
                 name: 'plus_math',
                 title: 'Add',
                 color: 'var(--group-rail-color)',
@@ -585,7 +585,7 @@ const LimeQueryFilterNotComponent = class {
         };
     }
     render() {
-        return (h("div", { key: '7e9bac8c51b903d1a569d1272167870701412729', class: "expression" }, this.label && h("limel-header", { key: 'aa5d7a0d55a5b2754e02c58dc5c08614b8a0808b', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '573b8435f73b10bf1eb04ced205af5c4b295a01d', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
+        return (h("div", { key: 'c2419ca2da5c2e99b4462bec483f62f3272b826e', class: "expression" }, this.label && h("limel-header", { key: '58b93b01e0607a52b22e56379cba36dae6113513', heading: this.label }), h("limebb-lime-query-filter-expression", { key: '72165139bfa1e0236a0048c2f59c1638dfd950d9', platform: this.platform, context: this.context, label: "Not", limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression.exp, onExpressionChange: this.handleExpressionChange })));
     }
 };
 LimeQueryFilterNotComponent.style = limeQueryFilterNotCss();

package/dist/esm/limebb-icon-picker.entry.js

@@ -53110,7 +53110,7 @@ const IconPicker = class {
                 icon: this.value,
             };
         }
-        return (h("limel-picker", { key: 'bf6b76bbcea838150261e9e0037b1d7ca1ee08d1', 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: 'f123d92ec72fecdc8056319b8d2fb7c63b644232', 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" }));
     }
 };
 

package/dist/esm/limebb-info-tile-format.entry.js

@@ -91,7 +91,7 @@ const InfoTileAdminConfig = class {
             },
         ];
         return [
-            h("limel-button-group", { key: '68999f607fd66a5a451929d6720200734c6505ea', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
+            h("limel-button-group", { key: 'af628fd7209c35426f94257b9d01751132eb7062', value: buttons.filter(this.isValidButton), onChange: this.handleChangeType }),
             this.renderFormatConfig(),
         ];
     }

package/dist/esm/limebb-info-tile.entry.js

@@ -484,7 +484,7 @@ const InfoTile = class {
         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: '802c93fade2b3aff10e53c1a970798b994bff2d2', class: { error: !filter || this.error } }, props)));
+        return (h("limel-info-tile", Object.assign({ key: '50e9fba6bf058bc41f8596f42fba5b2a20762adc', class: { error: !filter || this.error } }, props)));
     }
     /**
      * Effective `reducedPresence` for this render. The boolean prop

package/dist/esm/limebb-kanban-group.entry.js

@@ -27,7 +27,7 @@ const KanbanGroup = class {
         };
     }
     render() {
-        return (h(Host, { key: 'b00741bf0f2c617453ce53ce2e6ec852472f20dc' }, this.renderHelp(), this.renderGroupHeading(), this.renderGroupSummary(), this.renderItems()));
+        return (h(Host, { key: '0854f6e541983cfac72eaf884c51ffb17f99f122' }, this.renderHelp(), this.renderGroupHeading(), this.renderGroupSummary(), this.renderItems()));
     }
     renderGroupSummary() {
         if (!this.summary || !this.totalCount) {

package/dist/esm/limebb-kanban-item.entry.js

@@ -55,7 +55,7 @@ const KanbanItemComponent = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'cc405f1c7ffd4e8a72158f53863b604e38df882e', id: this.item.id.toString(), class: {
+        return (h(Host, { key: '4f5094240ee414b67254301be60b096e83d9c7af', 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/esm/limebb-lime-query-builder.entry.js

@@ -149,7 +149,7 @@ const LimeQueryBuilder = class {
         }
     }
     render() {
-        return (h(Host, { key: '0f28a00b055f7e9094dd26cf733acba1158dda45' }, this.renderHeader(), this.renderContent()));
+        return (h(Host, { key: '798c1d0486dae6e06663e9a64913cc5d614a6351' }, this.renderHeader(), this.renderContent()));
     }
     renderContent() {
         const visualModeSupported = this.checkVisualModeSupport();

package/dist/esm/limebb-lime-query-filter-comparison_2.entry.js

@@ -39,11 +39,11 @@ const LimeQueryFilterComparisonComponent = class {
         const propertyType = hasKey
             ? this.getPropertyType(this.expression.key)
             : undefined;
-        return (h(Host, { key: 'ebffd40bd7fe14023be8081b21a164fba7ff7d78' }, this.renderHeader(), h("limel-popover", { key: '1e6b11ad372ae6fe98d69d3da739f0f61c2e2015', open: this.isOpen, openDirection: "bottom-start", onClose: this.handleClose }, h("limebb-filter-chip", { key: '1017d1ff6512104d073430d7d233b3bfe14c1edd', slot: "trigger", platform: this.platform, label: hasKey
+        return (h(Host, { key: '11a87b46a1273aadb654a13a08351b2114b5c77d' }, this.renderHeader(), h("limel-popover", { key: 'c407e0d0672a4302cc96e452baeca8009359856c', open: this.isOpen, openDirection: "bottom-start", onClose: this.handleClose }, h("limebb-filter-chip", { key: '530e38e1d326614c13324a7efd2e08db62712450', slot: "trigger", platform: this.platform, label: hasKey
                 ? this.getPropertyLabel(this.expression.key)
                 : undefined, condition: hasKey
                 ? operatorToCondition(this.expression.op)
-                : undefined, propertyType: propertyType, value: hasKey ? this.chipValue() : 'New condition', conjunction: isList ? 'or' : undefined, selected: this.isOpen, removable: true, onClick: this.handleOpen, onRemove: this.removeExpression }), h("limebb-lime-query-filter-comparison-editor", { key: '802cd50b41afc9a3155d50cf8a28d7544cd673c1', platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression, propertyType: propertyType, onExpressionChange: this.handleEditorChange }))));
+                : undefined, propertyType: propertyType, value: hasKey ? this.chipValue() : 'New condition', conjunction: isList ? 'or' : undefined, selected: this.isOpen, removable: true, onClick: this.handleOpen, onRemove: this.removeExpression }), h("limebb-lime-query-filter-comparison-editor", { key: 'e736c00aa2f6c750da34a08f671d50dc97f6f452', platform: this.platform, context: this.context, limetype: this.limetype, activeLimetype: this.activeLimetype, expression: this.expression, propertyType: propertyType, onExpressionChange: this.handleEditorChange }))));
     }
     getPropertyLabel(key) {
         return this.resolveProperty(key).labels.join(' › ');

package/dist/esm/limebb-lime-query-order-by-editor_2.entry.js

@@ -119,7 +119,7 @@ const OrderByEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f5426a11ccbc3f0e4159b50dea245f8da07f669c' }, this.renderEmptyState(), this.renderOrderByEditor()));
+        return (h(Host, { key: '6538465113c62786cad0c02a6ab3196dcc0635a1' }, this.renderEmptyState(), this.renderOrderByEditor()));
     }
     renderEmptyState() {
         if (this.limetype) {
@@ -249,7 +249,7 @@ const LimetypeField = class {
             value: '',
         };
         options.unshift(emptyOption);
-        return (h("limel-select", { key: 'c649a9e99ec7af2055df7f1cd82cdd87f19ddde7', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
+        return (h("limel-select", { key: '1bb0d48ee4613baef033cea5f6f610261a67972f', label: this.label, options: options, value: selectedOption, required: this.required, helperText: this.helperText, invalid: invalid, disabled: this.disabled || this.readonly, onChange: this.handleChange }));
     }
     componentWillRender() {
         this.updatePropertyFields(this.value || '');

package/dist/esm/limebb-lime-query-order-by-item.entry.js

@@ -36,9 +36,9 @@ const OrderByItemComponent = class {
     render() {
         const propertyPath = Object.keys(this.item)[0] || '';
         const direction = this.item[propertyPath] || 'ASC';
-        return (h(Host, { key: 'f3c2d3fa47d0e5e11ff2c9d8372ff5a625814462' }, h("limebb-property-selector", { key: 'f6290981aa40a2807722d82e23a893c8511e7892', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: propertyPath, required: true, onChange: this.handlePathChange }), h("div", { key: '365c64b46f428ff6e97cd2682688991bde32ce60', class: "control-buttons" }, h("limel-icon-button", { key: 'b3a8eb5d27dee271a4b989c57d925dc4023b88c0', icon: direction === 'ASC'
+        return (h(Host, { key: 'd406aa6128f42fa11b92a5755554efa0218f42b1' }, h("limebb-property-selector", { key: '54140307a6762e05c782c2b54288d941a7cd419a', platform: this.platform, context: this.context, limetype: this.limetype, label: "Property", value: propertyPath, required: true, onChange: this.handlePathChange }), h("div", { key: 'ef219a25a4d8a61e1295524533c7a7937b8b9320', class: "control-buttons" }, h("limel-icon-button", { key: '2eec9ff17a503c0c08b4faa80efc32f379d5c2c9', icon: direction === 'ASC'
                 ? 'sort_ascending'
-                : 'sort_descending', label: direction === 'ASC' ? 'Ascending' : 'Descending', onClick: this.handleToggleDirection }), h("limel-icon-button", { key: '12ce082489ae86a246b84a7a8091ce382bf2acbd', icon: "trash", label: "Remove", onClick: this.handleRemove }))));
+                : 'sort_descending', label: direction === 'ASC' ? 'Ascending' : 'Descending', onClick: this.handleToggleDirection }), h("limel-icon-button", { key: '17ce23ee6b4ec9916a852b4a4612268be974055d', icon: "trash", label: "Remove", onClick: this.handleRemove }))));
     }
 };
 OrderByItemComponent.style = orderByItemCss();