@aparte/core 0.5.0-alpha.0 → 0.6.1

package/dist/index.js

@@ -312,8 +312,23 @@ class AparteSelect extends HTMLElement {
   _setupMutationObserver() {
     this._observer = new MutationObserver(() => {
       this._updateDropdownContent();
+      this._restoreActive();
     });
-    this._observer.observe(this, { childList: true });
+    this._observer.observe(this, { childList: true, subtree: true });
+  }
+  /**
+   * Put the roving highlight back after the options changed underneath it.
+   *
+   * `data-active` lives on an option ELEMENT, so replacing the list throws it
+   * away while `_activeIndex` still claims a position: the highlight disappeared,
+   * `aria-activedescendant` kept pointing at an id no longer in the document, and
+   * the next ArrowDown moved from the stale index — skipping an option. Only when
+   * open and only when a position was held, so a refresh never invents one.
+   */
+  _restoreActive() {
+    if (!this._isOpen || this._activeIndex < 0) return;
+    if (this.querySelector("aparte-option[data-active]")) return;
+    this._setActive(this._activeIndex);
   }
   _updateDropdownContent() {
     if (!this._trigger || !this.contains(this._trigger)) {
@@ -335,9 +350,10 @@ class AparteSelect extends HTMLElement {
       optionsContainer.appendChild(child);
     });
     if (this.isConnected) {
-      this._observer?.observe(this, { childList: true });
+      this._observer?.observe(this, { childList: true, subtree: true });
     }
     this._updateTriggerLabel();
+    this._restoreActive();
   }
   _setupEventListeners() {
     this._trigger?.addEventListener("click", () => this._toggle());
@@ -772,7 +788,23 @@ class AparteChatBubble extends HTMLElement {
     const detail = e2.detail;
     if (detail?.config && detail.config !== this._cfg) return;
     this._updateActionBar();
+    this._updateName();
+    this._updateLocalizedLabels();
+    this._updateWaiting();
   };
+  /**
+   * Re-apply the locale strings written straight into the markup by `_render()` —
+   * the accessible names a screen reader reads, which nothing else refreshes.
+   */
+  _updateLocalizedLabels() {
+    const locale = this._cfg.getLocale();
+    const set = (selector, label) => {
+      this.querySelector(selector)?.setAttribute("aria-label", label);
+    };
+    set(".aparte-branch-prev", locale.previousResponse ?? "Previous response");
+    set(".aparte-branch-next", locale.nextResponse ?? "Next response");
+    set(".aparte-action-bar", locale.messageActions ?? "Message actions");
+  }
   /**
    * Config governing this bubble: the instance config of the nearest
    * `[data-aparte-host]` boundary, else the global singleton. Resolved live
@@ -1797,8 +1829,28 @@ class AparteChatViewport extends HTMLElement {
     this._setupObservers();
     this._boundResetHandler = () => this.clearAll();
     window.addEventListener("aparte-reset", this._boundResetHandler);
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+  }
+  /**
+   * A locale switch changes the reading direction, and `dir` was applied once at
+   * render — so a chat already on screen never flipped to RTL until a reload.
+   * Only OUR config: an instance-scoped change elsewhere must not touch us.
+   */
+  _onConfigChange = (e2) => {
+    const detail = e2.detail;
+    if (detail?.config && detail.config !== resolveConfig(this)) return;
+    this._applyDirection();
+  };
+  /** Mirror `locale.direction` onto the scroll container. */
+  _applyDirection() {
+    const container = this.querySelector(".aparte-viewport-container");
+    if (!container) return;
+    const direction = resolveConfig(this).getLocale().direction;
+    if (direction) container.setAttribute("dir", direction);
+    else container.removeAttribute("dir");
   }
   disconnectedCallback() {
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
     if (this._boundResetHandler) {
       window.removeEventListener("aparte-reset", this._boundResetHandler);
       this._boundResetHandler = null;
@@ -3609,6 +3661,10 @@ class AparteConversationList extends HTMLElement {
       this.setAttribute("role", "navigation");
     }
     this._render();
+    window.addEventListener("aparte-config-change", this._onConfigChange);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("aparte-config-change", this._onConfigChange);
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue === newValue) return;
@@ -3617,6 +3673,16 @@ class AparteConversationList extends HTMLElement {
       this._updateActiveState();
     }
   }
+  /**
+   * Re-render on a locale switch: every row's title fallback and both button
+   * labels come from the locale, so without this the list stayed in the previous
+   * language until something else happened to re-render it. Only OUR config.
+   */
+  _onConfigChange = (e2) => {
+    const detail = e2.detail;
+    if (detail?.config && detail.config !== resolveConfig(this)) return;
+    this._render();
+  };
   // ─── Public API ───────────────────────────────────────────────────────
   /** Set the list of conversations to display. Triggers a re-render. */
   set conversations(items) {