@kubex/zinc 1.1.80 → 1.1.81

package/src/components/slash-menu/slash-menu.component.ts

@@ -188,7 +188,24 @@ export default class ZnSlashMenu extends ZincElement {
 
   private scrollActiveIntoView() {
     const active = this.renderRoot.querySelector<HTMLElement>('[data-slash-item][aria-selected="true"]');
-    active?.scrollIntoView({block: 'nearest'});
+    if (!active) return;
+
+    const items = this.visibleItems;
+    const panel = this.panel;
+
+    // The heading and footer scroll with the list, and `nearest` stops at the item's own box — so
+    // landing on the first or last item goes all the way to the panel's edge to bring them back
+    if (panel && items.slice(0, this.activeIndex).every(item => item.disabled)) {
+      panel.scrollTop = 0;
+      return;
+    }
+
+    if (panel && items.slice(this.activeIndex + 1).every(item => item.disabled)) {
+      panel.scrollTop = panel.scrollHeight;
+      return;
+    }
+
+    active.scrollIntoView({block: 'nearest'});
   }
 
   // mousedown, not click: preventDefault keeps focus (and the caret) in the field
@@ -216,6 +233,11 @@ export default class ZnSlashMenu extends ZincElement {
   protected updated(changed: PropertyValues) {
     super.updated(changed);
 
+    // A new list, or a reopen, starts at the top rather than wherever the last one was scrolled to
+    if (changed.has('items') || (changed.has('open') && this.open)) {
+      this.scrollActiveIntoView();
+    }
+
     if (changed.has('open') || changed.has('anchor')) {
       if (this.open) {
         this.startPositioner();

package/src/components/translations/translations.component.ts

@@ -45,7 +45,7 @@ export default class ZnTranslations extends ZincElement implements ZincFormContr
   @property({attribute: "textarea-rows", type: Number}) textareaRows: number | undefined;
 
   /**
-   * Quick insertions offered by the slash menu when `input-type` is `textarea`. Accepts a JSON array of items, or
+   * Quick insertions offered by the slash menu on `text` and `textarea` inputs. Accepts a JSON array of items, or
    * the shorthand `Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}`. Every language shares the list.
    */
   @property({