@limetech/lime-crm-building-blocks 1.118.1 → 1.119.0

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

@@ -1,6 +1,8 @@
 import { h, Host } from "@stencil/core";
 import { PlatformServiceName, } from "@limetech/lime-web-components";
-import { processChatItems, } from "./process-chat-items";
+import { processChatItems, reverseProcessedItems, } from "./process-chat-items";
+import { ScrollAnchor } from "./scroll-anchor";
+import { createHeightTransitionEndHandler, verifyHeightAnimationProperty, } from "./typing-indicator-scroll";
 /**
  * Chat list
  * This component displays a list of chat items, and groups them by date.
@@ -22,7 +24,10 @@ export class ChatList {
     constructor() {
         /**
          * List of items to display in the feed.
-         * These items must be sorted by their `timestamp` in descending order.
+         * These items must be sorted by their `timestamp` in ascending order
+         * (oldest first, newest last). This matches the natural visual order
+         * for the default `oldest-on-top` layout, keeping DOM order aligned
+         * with visual order for copy/paste, screen readers, and tab order.
          *
          * See the [ChatListItem](#/type/ChatListItem/) type for the kinds of
          * items that can appear in the list.
@@ -36,29 +41,56 @@ export class ChatList {
          *
          * :::important
          * Using this prop will _not_ automatically sort the chat items for you!
-         * You still need to pass the items in the correct order (descending order by timestamp).
-         * This prop will only affect the direction of the elements in the user interface,
+         * You still need to pass the items in the correct order (ascending order by timestamp — oldest first).
+         * This prop only affects the direction of the elements in the user interface,
          * such as the location of the typing indicator or the scrollbars.
          * :::
          */
         this.order = 'oldest-on-top';
         this.processedItems = [];
+        this.handleHeightTransitionEnd = createHeightTransitionEndHandler(() => { var _a; return (_a = this.scrollAnchor) === null || _a === void 0 ? void 0 : _a.repinIfSticky(); });
     }
     handleItemsChange() {
         let lastVisited = null;
         if (this.lastVisitedTimestamp) {
             lastVisited = parseToUTCDate(this.lastVisitedTimestamp);
         }
-        this.processedItems = processChatItems(this.items, this.dateTimeFormatter, lastVisited);
+        const processed = processChatItems(this.items, this.dateTimeFormatter, lastVisited);
+        this.processedItems =
+            this.order === 'newest-on-top'
+                ? reverseProcessedItems(processed)
+                : processed;
     }
     componentWillLoad() {
         this.handleItemsChange();
+        this.scrollAnchor = new ScrollAnchor(this.host, () => this.order, this.order);
+    }
+    componentDidLoad() {
+        var _a;
+        verifyHeightAnimationProperty((_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.typing-indicator-height-animation'));
+    }
+    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.
+            return;
+        }
+        this.scrollAnchor.beforeRender();
+    }
+    componentDidRender() {
+        if (this.items.length === 0) {
+            return;
+        }
+        this.scrollAnchor.afterRender();
     }
     render() {
-        return (h(Host, { key: 'b042ac219b98d38deb63cd862fc6aeb565bf3064', class: {
+        return (h(Host, { key: '002369dc1f47978696b4eb8ac7189f794568b0b4', class: {
                 'is-empty': this.items.length === 0 &&
                     !this.isTypingIndicatorVisible,
-            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), h("div", { key: 'dd245b7fced3824abbc97671204310f51f0ba603', class: "typing-indicator-height-animation" }, h("div", { key: 'da9f1fdb805cda959b707598694070ce8b765965' }, this.renderTypingIndicator())), this.renderChatItems()));
+            }, "aria-busy": this.isBusy(), role: "log" }, this.renderSpinner(), this.order === 'newest-on-top' &&
+            this.renderTypingIndicatorBlock(), this.renderChatItems(), this.order === 'oldest-on-top' &&
+            this.renderTypingIndicatorBlock()));
     }
     renderSpinner() {
         if (!this.loading) {
@@ -66,6 +98,14 @@ export class ChatList {
         }
         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())));
+    }
     renderTypingIndicator() {
         if (!this.isTypingIndicatorVisible) {
             return;
@@ -81,33 +121,54 @@ export class ChatList {
                 case 'newItemIndicator': {
                     return this.renderIndicator();
                 }
-                default: {
+                case 'chat':
+                case 'iconList': {
+                    // `insertDateGroups` wraps every `chat` / `iconList`
+                    // in a `group`, so these variants shouldn't appear
+                    // at top level. If the processor pipeline is ever
+                    // reordered, render nothing rather than double-
+                    // render once the wrapping group includes them.
                     return null;
                 }
+                default: {
+                    return assertNever(item);
+                }
             }
         });
     }
     renderGroup(group) {
         const chatItems = group.items.map((item) => {
-            if (item.type === 'chat') {
-                return this.renderChatItem(item.item);
-            }
-            else if (item.type === 'iconList') {
-                return this.renderIconList(item.item);
-            }
-            else if (item.type === 'newItemIndicator') {
-                return this.renderIndicator();
+            switch (item.type) {
+                case 'chat': {
+                    return this.renderChatItem(item.item);
+                }
+                case 'iconList': {
+                    return this.renderIconList(item.item);
+                }
+                case 'newItemIndicator': {
+                    return this.renderIndicator();
+                }
+                case 'group': {
+                    // Date groups don't nest. A compile-time `never`
+                    // here would require a separate nested-item type;
+                    // this runtime null return is the pragmatic
+                    // middle ground.
+                    return null;
+                }
+                default: {
+                    return assertNever(item);
+                }
             }
         });
-        const groupChatItems = group.items.filter((i) => i.type === 'chat');
-        const lastChatItem = groupChatItems.at(-1);
-        const stableId = (lastChatItem === null || lastChatItem === void 0 ? void 0 : lastChatItem.type) === 'chat' ? lastChatItem.item.id : '';
-        const sectionKey = 'date-group-' + group.heading + '-' + stableId;
+        // Key the section by the group's heading (unique per date, and
+        // stable across item additions). Must not vary with group
+        // content: if it did, appending a new message would change the
+        // key and cause Stencil to remount the whole section, briefly
+        // collapsing scrollHeight and scrolling the list to the top
+        // before `componentDidRender` scrolls it back.
+        const sectionKey = 'date-group-' + group.heading;
         const headingId = `heading-${sectionKey}`.replaceAll(/[^a-zA-Z0-9_-]/g, '_');
         const dateHeading = (h("a", { id: headingId, class: "date-heading", role: "heading", "aria-level": 2 }, group.heading));
-        if (this.order === 'oldest-on-top') {
-            return (h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, chatItems, dateHeading));
-        }
         return (h("section", { class: "date-group", key: sectionKey, "aria-labelledby": headingId }, dateHeading, chatItems));
     }
     renderChatItem(item) {
@@ -215,7 +276,7 @@ export class ChatList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "List of items to display in the feed.\nThese items must be sorted by their `timestamp` in descending order.\n\nSee the [ChatListItem](#/type/ChatListItem/) type for the kinds of\nitems that can appear in the list."
+                    "text": "List of items to display in the feed.\nThese items must be sorted by their `timestamp` in ascending order\n(oldest first, newest last). This matches the natural visual order\nfor the default `oldest-on-top` layout, keeping DOM order aligned\nwith visual order for copy/paste, screen readers, and tab order.\n\nSee the [ChatListItem](#/type/ChatListItem/) type for the kinds of\nitems that can appear in the list."
                 },
                 "getter": false,
                 "setter": false,
@@ -295,7 +356,7 @@ export class ChatList {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "- `newest-on-top` displays new messages at the top of the list;\nused if the chat input is located on top of the chat interface.\n- `oldest-on-top` displays new messages at the bottom of the list (default);\nused if the chat input is located at the bottom of the chat interface.\n\n:::important\nUsing this prop will _not_ automatically sort the chat items for you!\nYou still need to pass the items in the correct order (descending order by timestamp).\nThis prop will only affect the direction of the elements in the user interface,\nsuch as the location of the typing indicator or the scrollbars.\n:::"
+                    "text": "- `newest-on-top` displays new messages at the top of the list;\nused if the chat input is located on top of the chat interface.\n- `oldest-on-top` displays new messages at the bottom of the list (default);\nused if the chat input is located at the bottom of the chat interface.\n\n:::important\nUsing this prop will _not_ automatically sort the chat items for you!\nYou still need to pass the items in the correct order (ascending order by timestamp \u2014 oldest first).\nThis prop only affects the direction of the elements in the user interface,\nsuch as the location of the typing indicator or the scrollbars.\n:::"
                 },
                 "getter": false,
                 "setter": false,
@@ -305,10 +366,14 @@ export class ChatList {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "items",
                 "methodName": "handleItemsChange"
+            }, {
+                "propName": "order",
+                "methodName": "handleItemsChange"
             }];
     }
 }
@@ -318,3 +383,6 @@ function parseToUTCDate(date) {
     }
     return new Date(date); // This will automatically be UTC
 }
+function assertNever(value) {
+    throw new Error(`Unexpected value in exhaustive switch: ${JSON.stringify(value)}`);
+}

package/dist/collection/components/chat-list/process-chat-items.js

@@ -10,7 +10,7 @@ function getProcessedItemTimestamp(item) {
 /**
  * Processes a list of chat list inputs by adding date headers and a "new items" indicator.
  *
- * @param items - The list of items to process. Pre-sorted by `timestamp` in descending order.
+ * @param items - The list of items to process. Pre-sorted by `timestamp` in ascending order.
  * @param dateTimeFormatter - A service used to format dates for the date headers.
  * @param lastVisitedTimestamp - The timestamp of the user's last visit. Used to position the
  *   "new items" indicator.
@@ -24,16 +24,18 @@ export function processChatItems(items, dateTimeFormatter, lastVisitedTimestamp)
         processedItems: [],
         lastVisitedTimestamp: lastVisitedTimestamp,
         dateTimeFormatter: dateTimeFormatter,
-        newItemIndicatorInserted: false,
-        lastProcessedDate: null,
-        hasUnseenNotifications: items.some((item) => lastVisitedTimestamp &&
-            new Date(item.timestamp) > lastVisitedTimestamp),
     };
-    // Add processors here, in the order they should be executed
+    // Add processors here, in the order they should be executed.
+    // `insertNewItemIndicator` runs after `insertDateGroups` so the
+    // indicator can be placed at top level when the seen/unseen
+    // boundary falls between two groups, and only inside a group when
+    // the boundary falls within a single day. That placement makes
+    // `reverseProcessedItems` a pure two-level reverse — no group-
+    // boundary hoisting needed.
     const processors = [
         insertNotifications,
-        insertNewItemIndicator,
         insertDateGroups,
+        insertNewItemIndicator,
     ];
     const finalContext = createPipeline(initialContext, processors);
     return finalContext.processedItems;
@@ -42,6 +44,32 @@ function createPipeline(initialContext, processors) {
     // eslint-disable-next-line unicorn/no-array-reduce
     return processors.reduce((context, processor) => processor(context), initialContext);
 }
+/**
+ * Reverses the chronological order of a processed-items array.
+ *
+ * Pure two-level reverse: the top-level array is reversed, and each
+ * group's items are reversed. `insertNewItemIndicator` places the
+ * indicator at top level when the seen/unseen boundary falls
+ * between groups, and only nests it inside a group when the
+ * boundary falls within a single day — so reversal never needs to
+ * move an indicator across levels to preserve its separator role.
+ *
+ * Used by `limebb-chat-list` when rendering in `newest-on-top`
+ * layout, so that DOM order continues to match visual order
+ * (newest-first in that layout), keeping copy/paste, screen-reader,
+ * and tab order aligned with what the user sees.
+ *
+ * @param items - processed items in ascending-by-timestamp order
+ * @returns processed items in descending-by-timestamp order
+ */
+export function reverseProcessedItems(items) {
+    return items.toReversed().map((item) => {
+        if (item.type !== 'group') {
+            return item;
+        }
+        return Object.assign(Object.assign({}, item), { items: item.items.toReversed() });
+    });
+}
 /**
  *
  * @param context
@@ -62,61 +90,99 @@ export function insertNotifications(context) {
  * @param context
  */
 export function insertNewItemIndicator(context) {
-    const processedWithIndicator = [];
-    let newItemIndicatorInserted = context.newItemIndicatorInserted;
-    for (const item of context.processedItems) {
-        const timestamp = getProcessedItemTimestamp(item);
-        if (timestamp !== undefined &&
-            context.lastVisitedTimestamp &&
-            !newItemIndicatorInserted &&
-            new Date(timestamp) <= context.lastVisitedTimestamp &&
-            context.hasUnseenNotifications) {
-            processedWithIndicator.push({ type: 'newItemIndicator' });
-            newItemIndicatorInserted = true;
+    if (!context.lastVisitedTimestamp) {
+        return context;
+    }
+    const groups = context.processedItems;
+    const lastVisited = context.lastVisitedTimestamp;
+    // Walk groups newest → oldest. Items and groups are sorted
+    // ascending, so at most one group straddles the seen/unseen
+    // boundary; the rest are entirely seen or entirely unseen. In an
+    // active chat where the newest item is already seen, the loop
+    // exits in O(1).
+    for (let g = groups.length - 1; g >= 0; g--) {
+        const group = groups[g];
+        if (group.type !== 'group') {
+            continue;
+        }
+        const seenIndex = findNewestSeenIndex(group.items, lastVisited);
+        if (seenIndex === -1) {
+            continue;
         }
-        processedWithIndicator.push(item);
+        return placeIndicatorAtBoundary(context, groups, g, group, seenIndex);
     }
-    context.processedItems = processedWithIndicator;
-    context.newItemIndicatorInserted = newItemIndicatorInserted;
+    // No seen item found — everything is unseen, no boundary to mark.
     return context;
 }
+function findNewestSeenIndex(items, lastVisited) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const timestamp = getProcessedItemTimestamp(items[i]);
+        if (timestamp === undefined) {
+            continue;
+        }
+        if (new Date(timestamp) <= lastVisited) {
+            return i;
+        }
+    }
+    return -1;
+}
+function placeIndicatorAtBoundary(context, groups, groupIndex, group, seenIndex) {
+    const isLastItemInGroup = seenIndex === group.items.length - 1;
+    const isLastGroup = groupIndex === groups.length - 1;
+    // Newest seen item is the very last item overall → everything is
+    // seen, nothing to mark.
+    if (isLastItemInGroup && isLastGroup) {
+        return context;
+    }
+    // Seen item is last in its group → boundary is between groups.
+    // Place the indicator at top level so reversal stays a pure
+    // two-level reverse.
+    if (isLastItemInGroup) {
+        return Object.assign(Object.assign({}, context), { processedItems: [
+                ...groups.slice(0, groupIndex + 1),
+                { type: 'newItemIndicator' },
+                ...groups.slice(groupIndex + 1),
+            ] });
+    }
+    // Boundary falls inside a single day — indicator stays nested.
+    const newGroupItems = [
+        ...group.items.slice(0, seenIndex + 1),
+        { type: 'newItemIndicator' },
+        ...group.items.slice(seenIndex + 1),
+    ];
+    return Object.assign(Object.assign({}, context), { processedItems: [
+            ...groups.slice(0, groupIndex),
+            Object.assign(Object.assign({}, group), { items: newGroupItems }),
+            ...groups.slice(groupIndex + 1),
+        ] });
+}
 /**
  *
  * @param context
  */
-// eslint-disable-next-line sonarjs/cognitive-complexity
 export function insertDateGroups(context) {
     const newProcessedItems = [];
     let currentGroup = null;
     let lastProcessedDate = null;
     for (const item of context.processedItems) {
-        if (item.type === 'chat' || item.type === 'iconList') {
-            const currentTimestamp = new Date(item.item.timestamp);
-            const currentDate = context.dateTimeFormatter.format(currentTimestamp, 'date');
-            if (currentDate !== lastProcessedDate) {
-                if (currentGroup) {
-                    newProcessedItems.push(currentGroup);
-                }
-                currentGroup = {
-                    type: 'group',
-                    groupType: 'dateGroup',
-                    heading: currentDate,
-                    items: [],
-                };
-                lastProcessedDate = currentDate;
-            }
-            if (currentGroup) {
-                currentGroup.items.push(item);
-            }
+        if (item.type !== 'chat' && item.type !== 'iconList') {
+            continue;
         }
-        else if (item.type === 'newItemIndicator') {
+        const currentDate = context.dateTimeFormatter.format(new Date(item.item.timestamp), 'date');
+        if (currentDate !== lastProcessedDate) {
             if (currentGroup) {
-                currentGroup.items.push(item);
-            }
-            else {
-                newProcessedItems.push(item);
+                newProcessedItems.push(currentGroup);
             }
+            currentGroup = {
+                type: 'group',
+                groupType: 'dateGroup',
+                heading: currentDate,
+                items: [item],
+            };
+            lastProcessedDate = currentDate;
+            continue;
         }
+        currentGroup === null || currentGroup === void 0 ? void 0 : currentGroup.items.push(item);
     }
     if (currentGroup) {
         newProcessedItems.push(currentGroup);

package/dist/collection/components/chat-list/scroll-anchor.js

@@ -0,0 +1,93 @@
+// "Near enough the newest edge to count as sticky." 50px is roughly
+// two message-bubble margins; a user who is within that distance
+// clearly wasn't scrolling back through history, so we treat their
+// 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.
+ */
+export class ScrollAnchor {
+    constructor(scrollContainer, getOrder, initialOrder) {
+        this.scrollContainer = scrollContainer;
+        this.getOrder = getOrder;
+        this.isSticky = true;
+        this.paintedOrder = initialOrder;
+    }
+    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;
+    }
+    afterRender() {
+        if (!this.scrollContainer.isConnected) {
+            return;
+        }
+        this.paintedOrder = this.getOrder();
+        if (this.isSticky) {
+            this.scrollToNewest();
+        }
+    }
+    repinIfSticky() {
+        if (!this.scrollContainer.isConnected) {
+            return;
+        }
+        if (this.isSticky) {
+            this.scrollToNewest();
+        }
+    }
+    scrollToNewest() {
+        const target = this.getOrder() === 'oldest-on-top'
+            ? this.scrollContainer.scrollHeight
+            : 0;
+        // Reading `scrollTop` is a cheap (already-measured) lookup, and
+        // short-circuiting avoids forcing a layout when we'd write the
+        // same value — important under high-frequency re-renders
+        // (streaming AI output).
+        if (this.scrollContainer.scrollTop === target) {
+            return;
+        }
+        this.scrollContainer.scrollTop = target;
+    }
+    distanceFromNewestEdge(order) {
+        return order === 'oldest-on-top'
+            ? this.scrollContainer.scrollHeight -
+                this.scrollContainer.scrollTop -
+                this.scrollContainer.clientHeight
+            : this.scrollContainer.scrollTop;
+    }
+}

package/dist/collection/components/chat-list/typing-indicator/typing-indicator.js

@@ -7,7 +7,7 @@ import { h } from "@stencil/core";
  */
 export class TypingIndicator {
     render() {
-        return (h("div", { key: '3b2b1fe0a578f22ebe2698428c2169d0b98bc0e6', class: "typing-ellipsis" }, h("div", { key: 'b7aa85a8b2aa8f9a52374fb794ff4ef757861f7b', class: "circle" }), h("div", { key: 'ffea2029e1869afa64ca9989be071dee6a4e0936', class: "circle" }), h("div", { key: '6d78b20e1bdd35c74912adf49031998cf30b9b7b', class: "circle" })));
+        return (h("div", { key: 'da6a23e31e0d54dd99f45de9f6ef27ed5562a96b', class: "typing-ellipsis" }, h("div", { key: 'd4f1af82536b37640041525ef6f448a87819d220', class: "circle" }), h("div", { key: '3523c0242ee91eeec62b95ca932cff67ee82e8e6', class: "circle" }), h("div", { key: 'ac2c1b8e9180776961a8ab0bd96f1ed219bb4d5f', class: "circle" })));
     }
     static get is() { return "limebb-typing-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chat-list/typing-indicator-scroll.js

@@ -0,0 +1,41 @@
+// 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.
+export 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
+ */
+export 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
+ */
+export 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.`);
+    }
+}

package/dist/collection/components/composer-toolbar/composer-toolbar.js

@@ -83,8 +83,8 @@ export class ComposerToolbar {
     }
     render() {
         return [
-            h("div", { key: '62fa9154e6593b46509a4b4185c425c416fbf1de', class: "actions" }, h("slot", { key: '97476b607eb583b8c26e0164836174b9aeb8faa9', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), h("slot", { key: '14c2388e0cb0d1ec2a1cd548d11994475da5e949', name: "trailing" })),
-            h("slot", { key: 'bc290147db27a9a6454cb32031bfe0990fe59e77', name: "primary-action" }),
+            h("div", { key: '6034b2945edfd9b613f606f8bb4fb0db81c1390f', class: "actions" }, h("slot", { key: '82b9bc14d80aedd3320af70bc63d3a908db6a7b2', name: "leading" }), this.renderFileInput(), this.renderTriggerActions(), h("slot", { key: '338fc1b7c7ec3f7dfedb123b7e09dd05f75fc45c', name: "trailing" })),
+            h("slot", { key: '57b277b772cbaf702e619ecbd6ff9032718b87b7', name: "primary-action" }),
         ];
     }
     get translator() {

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

@@ -84,7 +84,7 @@ export class CurrencyPicker {
         };
     }
     render() {
-        return (h("limel-picker", { key: '75278107cede6773fb098f52183b8c3d291d12fe', 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: '12d166b930a2864eefbb16c4d66706dd02b54112', 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/collection/components/dashboard-widget/dashboard-widget.js

@@ -17,7 +17,7 @@ export class DashboardComponent {
         };
     }
     render() {
-        return [this.renderHeader(), h("slot", { key: '3c5a1725b0cf3887074d0be4b1b7086126447d3b', name: "content" })];
+        return [this.renderHeader(), h("slot", { key: 'f5202c8c5d6ceb3e01420c6045ecb5589fed915a', name: "content" })];
     }
     static get is() { return "limebb-dashboard-widget"; }
     static get encapsulation() { return "shadow"; }

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

@@ -66,7 +66,7 @@ export class DatePicker {
         if (this.value) {
             this.shouldEmitValueAsString = typeof this.value === 'string';
         }
-        return (h("limel-date-picker", { key: 'd3f3229f134e51ae94abbdb63da0e88988eaa474', 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: 'f3276cfc57128c566248a97e5fea9a3dcc107888', 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/collection/components/date-range/date-range.js

@@ -33,7 +33,7 @@ export class DateRange {
         this.originalEndTime = this.endTime;
     }
     render() {
-        return (h("div", { key: '0eab8abe9007384af9e7fcd56f8ac37c4aeb6b39', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
+        return (h("div", { key: 'e00abfd31fcae2a4279ae2194696b5cffb76dd79', class: "date-pickers" }, this.renderStartDatePicker(), this.renderEndDatePicker()));
     }
     renderStartDatePicker() {
         if (!this.originalStartTime) {

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

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

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

@@ -78,10 +78,10 @@ export class DocumentItemComponent {
     render() {
         const isUnavailable = this.isUnavailable();
         const image = this.getImage();
-        return (h(Host, { key: '339a290abba67ded1229568ca8b3bb90238abb43', id: String(this.item.file.id), class: {
+        return (h(Host, { key: '97fe779b6706627e3abb9729b6ea2933d5ccafb4', 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: '518a23576f225d4a7b67cc7c1adee6d64ed27589', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'beb0197e876f351a0e432c58a6061c0937a78b70', 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: 'c897ca8a474b6b2e2f9e722507dd4b038ece058b', image: image, clickable: isUnavailable ? false : true, onClick: this.handleDocumentItemClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'cc75606770a2e0edeab4111e6e04608f6d841b6e', slot: "component" }, this.renderFileSize(), this.renderBooleanInput())), this.renderHelp()));
     }
     renderBooleanInput() {
         const id = this.getControlId();

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

@@ -76,7 +76,7 @@ export class DocumentPicker {
         this.labelId = createRandomString();
     }
     render() {
-        return (h(Host, { key: 'ff9e59b375c66d9b5c6818e4b81776d4dbfd63a8' }, h("limel-notched-outline", { key: '8414b5e0363c10b90c0dc5fda549d0268c177a8d', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: '06037f5780b8755b628309e26fa908167df49347', 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: 'd3d8d080de7dd9ceec2cbfa7382e9ac669c2d35b' }, h("limel-notched-outline", { key: '978b42774a036eccb8f347231a98b495e7b520a0', labelId: this.labelId, label: this.label, required: this.required, invalid: this.invalid, hasFloatingLabel: true }, h("limel-masonry-layout", { key: '5aa49ca5764d4b25dae50754ab77498beeaf016c', 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 })));