@dialpad/dialtone-vue 3.97.0 → 3.99.0

package/dist/{emoji_picker-Mxqzrrbr.js → emoji_picker-3kUtetnz.js}

@@ -1,7 +1,7 @@
-import { ref as h, onMounted as re, openBlock as y, createElementBlock as _, createVNode as F, unref as T, withKeys as U, withModifiers as ue, createSlots as ye, withCtx as H, createElementVNode as w, computed as P, toRefs as Se, watch as W, Fragment as z, renderList as Y, createBlock as _e, nextTick as x, onUnmounted as Re, toDisplayString as J, withDirectives as le, createCommentVNode as oe, vShow as se, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
-import { t as je, w as ne, x as Te, y as we, z as I } from "./emoji-64scMQZS.js";
-import { D as Ee } from "./tooltip-H27s49LR.js";
-const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = ["onKeydown"], Ae = {
+import { ref as h, onMounted as re, openBlock as y, createElementBlock as _, createVNode as F, unref as T, withKeys as U, withModifiers as ue, createSlots as Se, withCtx as H, createElementVNode as w, computed as P, toRefs as _e, watch as W, Fragment as z, renderList as Y, createBlock as Re, nextTick as x, onUnmounted as je, toDisplayString as J, withDirectives as oe, createCommentVNode as le, vShow as se, normalizeClass as ce, watchEffect as ae, createTextVNode as fe } from "vue";
+import { t as Te, w as ne, x as we, y as Ee, z as I } from "./emoji-ZUS2Xysh.js";
+import { D as $e } from "./tooltip-Cr_G7ib3.js";
+const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = ["onKeydown"], Ie = {
   __name: "emoji_search",
   props: {
     searchPlaceholderLabel: {
@@ -14,38 +14,38 @@ const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = [
     }
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(l, { expose: g, emit: L }) {
-    const i = L, d = h(null);
+  setup(o, { expose: k, emit: L }) {
+    const i = L, u = h(null);
     function j() {
       i("update:modelValue", ""), p();
     }
     function p() {
-      d.value.focus();
+      u.value.focus();
     }
     return re(() => {
       p();
-    }), g({
+    }), k({
       focusSearchInput: p
-    }), (S, u) => (y(), _("div", $e, [
-      F(T(je), {
+    }), (S, c) => (y(), _("div", Le, [
+      F(T(Te), {
         id: "searchInput",
         ref_key: "searchInput",
-        ref: d,
-        placeholder: l.searchPlaceholderLabel,
-        "model-value": l.modelValue,
-        "onUpdate:modelValue": u[0] || (u[0] = (s) => S.$emit("update:modelValue", s)),
+        ref: u,
+        placeholder: o.searchPlaceholderLabel,
+        "model-value": o.modelValue,
+        "onUpdate:modelValue": c[0] || (c[0] = (s) => S.$emit("update:modelValue", s)),
         onKeydown: [
-          u[1] || (u[1] = U((s) => S.$emit("focus-tabset"), ["up"])),
-          u[2] || (u[2] = U(ue((s) => S.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          u[3] || (u[3] = U((s) => S.$emit("select-first-emoji"), ["enter"]))
+          c[1] || (c[1] = U((s) => S.$emit("focus-tabset"), ["up"])),
+          c[2] || (c[2] = U(ue((s) => S.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+          c[3] || (c[3] = U((s) => S.$emit("select-first-emoji"), ["enter"]))
         ]
-      }, ye({
+      }, Se({
         leftIcon: H(() => [
           F(T(ne), { name: "search" })
         ]),
         _: 2
       }, [
-        l.modelValue.length > 0 ? {
+        o.modelValue.length > 0 ? {
           name: "rightIcon",
           fn: H(() => [
             w("button", {
@@ -54,14 +54,14 @@ const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = [
               onKeydown: U(j, ["enter"])
             }, [
               F(T(ne), { name: "close" })
-            ], 40, Le)
+            ], 40, Ae)
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["placeholder", "model-value"])
     ]));
   }
-}, Ie = { class: "d-emoji-picker__tabset" }, Fe = {
+}, Fe = { class: "d-emoji-picker__tabset" }, De = {
   __name: "emoji_tabset",
   props: {
     /**
@@ -102,10 +102,11 @@ const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = [
      * @param {String} tabId - The name of the tab that was selected
      */
     "selected-tabset",
-    "focus-search-input"
+    "focus-search-input",
+    "focus-skin-selector"
   ],
-  setup(l, { expose: g, emit: L }) {
-    const i = l, d = L, j = [
+  setup(o, { expose: k, emit: L }) {
+    const i = o, u = L, j = [
       { label: K.MOST_RECENTLY_USED, icon: "clock" },
       { label: K.SMILEYS_AND_PEOPLE, icon: "satisfied" },
       { label: K.NATURE, icon: "living-thing" },
@@ -120,39 +121,39 @@ const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = [
       label: i.tabsetLabels[a],
       id: (a + 1).toString(),
       panelId: (a + 1).toString()
-    }))), S = P(() => i.emojiFilter.length > 0), u = h("1"), { isScrolling: s } = Se(i), k = h([]);
+    }))), S = P(() => i.emojiFilter.length > 0), c = h("1"), { isScrolling: s } = _e(i), g = h([]);
     W(
       () => i.scrollIntoTab,
       () => {
-        !s.value && !S.value && (u.value = (i.scrollIntoTab + 1).toString());
+        !s.value && !S.value && (c.value = (i.scrollIntoTab + 1).toString());
       }
     ), W(
       S,
       () => {
-        S.value && (u.value = null);
+        S.value && (c.value = null);
       }
     );
     function D(e) {
-      s.value || (u.value = e), d("selected-tabset", e);
+      s.value || (c.value = e), u("selected-tabset", e);
     }
     function O(e) {
-      k.value.push(e.$el);
+      g.value.push(e.$el);
     }
     function A() {
-      k.value[0].focus();
+      g.value[0].focus();
     }
-    function o(e, t) {
-      e.key === "Enter" && (D(t), k.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), d("focus-search-input")), e.key === "ArrowDown" && d("focus-search-input");
+    function l(e, t) {
+      e.key === "Enter" && (D(t), g.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), e.shiftKey ? u("focus-skin-selector") : u("focus-search-input")), e.key === "ArrowDown" && u("focus-search-input");
     }
-    return g({
+    return k({
       focusTabset: A
-    }), (e, t) => (y(), _("div", Ie, [
-      F(T(Te), {
+    }), (e, t) => (y(), _("div", Fe, [
+      F(T(we), {
         "tab-list-class": "d-emoji-picker__tabset-list",
-        selected: u.value
+        selected: c.value
       }, {
         tabs: H(() => [
-          (y(!0), _(z, null, Y(p.value, (a, c) => (y(), _e(T(we), {
+          (y(!0), _(z, null, Y(p.value, (a, f) => (y(), Re(T(Ee), {
             id: a.id,
             ref_for: !0,
             ref: (b) => {
@@ -162,9 +163,9 @@ const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = [
             "panel-id": a.panelId,
             label: a.label,
             "aria-controls": "d-emoji-picker-list",
-            tabindex: c + 1,
+            tabindex: f + 1,
             onClickCapture: ue((b) => D(a.id), ["stop"]),
-            onKeydown: (b) => o(b, a.id)
+            onKeydown: (b) => l(b, a.id)
           }, {
             default: H(() => [
               F(T(ne), {
@@ -202,90 +203,90 @@ const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Le = [
   SYMBOLS: "Symbols",
   FLAGS: "Flags"
 };
-function De() {
-  const l = h([]), g = h([]), L = h(!1), i = h(!0);
-  function d(o, e) {
-    s(o, e - 1) || (l.value[o - 1] ? s(o - 1, l.value[o - 1].length - 1) : s(l.value.length - 1, l.value[l.value.length - 1].length - 1));
+function Oe() {
+  const o = h([]), k = h([]), L = h(!1), i = h(!0);
+  function u(l, e) {
+    s(l, e - 1) || (o.value[l - 1] ? s(l - 1, o.value[l - 1].length - 1) : s(o.value.length - 1, o.value[o.value.length - 1].length - 1));
   }
-  function j(o, e) {
-    s(o, e + 1) || s(o + 1, 0) || s(0, 0);
+  function j(l, e) {
+    s(l, e + 1) || s(l + 1, 0) || s(0, 0);
   }
-  function p(o, e) {
-    s(0, e - 1) || s(0, g.value.length - 1);
+  function p(l, e) {
+    s(0, e - 1) || s(0, k.value.length - 1);
   }
-  function S(o, e) {
+  function S(l, e) {
     s(0, e + 1) || s(0, 0);
   }
-  function u(o, e, t) {
-    L.value ? o === "left" ? p(e, t) : o === "right" && S(e, t) : o === "left" ? d(e, t) : o === "right" && j(e, t);
+  function c(l, e, t) {
+    L.value ? l === "left" ? p(e, t) : l === "right" && S(e, t) : l === "left" ? u(e, t) : l === "right" && j(e, t);
   }
-  function s(o, e) {
-    var a, c, b;
-    const t = L.value ? (a = g.value) == null ? void 0 : a[e] : (b = (c = l.value) == null ? void 0 : c[o]) == null ? void 0 : b[e];
+  function s(l, e) {
+    var a, f, b;
+    const t = L.value ? (a = k.value) == null ? void 0 : a[e] : (b = (f = o.value) == null ? void 0 : f[l]) == null ? void 0 : b[e];
     return t ? (t.focus(), !0) : !1;
   }
-  function k(o, e, t) {
-    l.value[e] || (l.value[e] = []), l.value[e][t] = o;
+  function g(l, e, t) {
+    o.value[e] || (o.value[e] = []), o.value[e][t] = l;
   }
-  function D(o, e) {
-    g.value[e] = o;
+  function D(l, e) {
+    k.value[e] = l;
   }
-  function O(o, e) {
+  function O(l, e) {
     var t;
-    if (i.value = !1, o === G.ARROW_UP) {
+    if (i.value = !1, l === G.ARROW_UP) {
       const a = e % $;
       if (!s(0, e - $)) {
-        const c = g.value.length - g.value.length % $ + a;
-        s(0, c), s(0, c) || s(0, g.value.length - 1);
+        const f = k.value.length - k.value.length % $ + a;
+        s(0, f), s(0, f) || s(0, k.value.length - 1);
       }
     }
-    if (o === G.ARROW_DOWN && !s(0, e + $)) {
+    if (l === G.ARROW_DOWN && !s(0, e + $)) {
       const a = e % $;
-      (t = g.value) != null && t[e + ($ - a)] ? s(0, g.value.length - 1) : s(0, a);
+      (t = k.value) != null && t[e + ($ - a)] ? s(0, k.value.length - 1) : s(0, a);
     }
-    o === G.ARROW_LEFT && u("left", 0, e), o === G.ARROW_RIGHT && u("right", 0, e);
+    l === G.ARROW_LEFT && c("left", 0, e), l === G.ARROW_RIGHT && c("right", 0, e);
   }
-  function A(o, e, t) {
-    var a, c;
-    if (o === "ArrowUp") {
+  function A(l, e, t) {
+    var a, f;
+    if (l === "ArrowUp") {
       const b = t % $;
       if (e === 0) {
-        const R = $ - l.value[l.value.length - 1].length % $, C = l.value[l.value.length - 1].length + R - ($ - b);
-        s(l.value.length - 1, C) || s(l.value.length - 1, l.value[l.value.length - 1].length - 1);
+        const R = $ - o.value[o.value.length - 1].length % $, C = o.value[o.value.length - 1].length + R - ($ - b);
+        s(o.value.length - 1, C) || s(o.value.length - 1, o.value[o.value.length - 1].length - 1);
         return;
       }
       if (!s(e, t - $)) {
-        const R = e - 1 < 0 ? 0 : e - 1, C = l.value[R].length, ee = C - C % $ + b;
-        s(R, ee) || s(e - 1, l.value[e - 1].length - 1);
+        const R = e - 1 < 0 ? 0 : e - 1, C = o.value[R].length, ee = C - C % $ + b;
+        s(R, ee) || s(e - 1, o.value[e - 1].length - 1);
       }
     }
-    if (o === "ArrowDown" && !s(e, t + $)) {
+    if (l === "ArrowDown" && !s(e, t + $)) {
       const b = t % $;
-      (c = (a = l.value) == null ? void 0 : a[e]) != null && c[t + ($ - b)] ? s(e, l.value[e].length - 1) : s(e + 1, b) || s(0, b) || s(0, l.value[0].length - 1);
+      (f = (a = o.value) == null ? void 0 : a[e]) != null && f[t + ($ - b)] ? s(e, o.value[e].length - 1) : s(e + 1, b) || s(0, b) || s(0, o.value[0].length - 1);
     }
-    o === "ArrowLeft" && u("left", e, t), o === "ArrowRight" && u("right", e, t);
+    l === "ArrowLeft" && c("left", e, t), l === "ArrowRight" && c("right", e, t);
   }
   return {
-    emojiFilteredRefs: g,
+    emojiFilteredRefs: k,
     isFiltering: L,
     hoverFirstEmoji: i,
-    setEmojiRef: k,
+    setEmojiRef: g,
     setFilteredRef: D,
     focusEmoji: s,
     handleArrowNavigationFiltered: O,
     handleArrowNavigation: A
   };
 }
-const Oe = { class: "d-emoji-picker__selector" }, Ce = {
+const Ce = { class: "d-emoji-picker__selector" }, Me = {
   key: 0,
   class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, Me = { key: 0 }, Ke = { class: "d-emoji-picker__tab" }, Ne = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Ue = ["alt", "aria-label", "title", "src"], Be = {
+}, Ke = { key: 0 }, Ne = { class: "d-emoji-picker__tab" }, Ue = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Be = ["alt", "aria-label", "title", "src"], Pe = {
   key: 2,
   class: "d-emoji-picker__alignment"
-}, Pe = {
+}, Ve = {
   class: "d-emoji-picker__tab",
   "data-qa": "filtered-emojis"
-}, Ve = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], qe = ["alt", "aria-label", "title", "src"], We = {
+}, qe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], We = ["alt", "aria-label", "title", "src"], Ge = {
   __name: "emoji_selector",
   props: {
     /**
@@ -377,17 +378,17 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       */
     "focus-search-input"
   ],
-  setup(l, { expose: g, emit: L }) {
-    const i = l, d = L, {
+  setup(o, { expose: k, emit: L }) {
+    const i = o, u = L, {
       emojiFilteredRefs: j,
       isFiltering: p,
       hoverFirstEmoji: S,
-      setEmojiRef: u,
+      setEmojiRef: c,
       setFilteredRef: s,
-      focusEmoji: k,
+      focusEmoji: g,
       handleArrowNavigationFiltered: D,
       handleArrowNavigation: O
-    } = De(), A = h(null), o = h(null), e = h(null), t = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], a = P(() => i.recentlyUsedEmojis.length ? i.tabsetLabels.map((n) => ({ label: n, ref: h(null) })) : i.tabsetLabels.slice(1).map((n) => ({ label: n, ref: h(null) }))), c = h(a.value[0].label), b = P(() => i.recentlyUsedEmojis.length ? t : t.slice(1)), R = h([]), C = P(() => [
+    } = Oe(), A = h(null), l = h(null), e = h(null), t = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], a = P(() => i.recentlyUsedEmojis.length ? i.tabsetLabels.map((n) => ({ label: n, ref: h(null) })) : i.tabsetLabels.slice(1).map((n) => ({ label: n, ref: h(null) }))), f = h(a.value[0].label), b = P(() => i.recentlyUsedEmojis.length ? t : t.slice(1)), R = h([]), C = P(() => [
       ...I[`People${i.skinTone}`],
       ...I.Nature,
       ...I.Food,
@@ -417,12 +418,12 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       { deep: !0 }
     );
     function te(n, r = !1) {
-      S.value = r, d("highlighted-emoji", n);
+      S.value = r, u("highlighted-emoji", n);
     }
     function ie() {
       const n = i.emojiFilter.toLowerCase();
       R.value = C.value.filter((r) => {
-        const m = r.name.toLowerCase().includes(n), v = r.keywords.some((f) => f.toLowerCase().includes(n));
+        const m = r.name.toLowerCase().includes(n), v = r.keywords.some((d) => d.toLowerCase().includes(n));
         return m || v;
       }), x(() => {
         n && te(R.value[0], !0);
@@ -443,28 +444,28 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
     function X(n, r = !0) {
       const v = a.value[n - 1].ref.value[0];
       x(() => {
-        const f = o.value, M = n === "1" ? 0 : v.offsetTop - 20;
-        let E = !0, V = f.scrollTop;
-        d("is-scrolling", !0), f.addEventListener("scroll", () => {
+        const d = l.value, M = n === "1" ? 0 : v.offsetTop - 20;
+        let E = !0, V = d.scrollTop;
+        u("is-scrolling", !0), d.addEventListener("scroll", () => {
           if (E) {
-            const N = f.scrollTop;
-            (V < N && N >= M || V > N && N <= M) && (E = !1, d("is-scrolling", !1)), V = N;
+            const N = d.scrollTop;
+            (V < N && N >= M || V > N && N <= M) && (E = !1, u("is-scrolling", !1)), V = N;
           }
-        }), f.scrollTop = M, r && k(n - 1, 0);
+        }), d.scrollTop = M, r && g(n - 1, 0);
       });
     }
     function be() {
-      const n = o.value;
+      const n = l.value;
       n.scrollTop = 0;
     }
     function he() {
       e.value = new IntersectionObserver((n) => {
         n.forEach((r) => {
-          var f, M, E, V, N;
+          var d, M, E, V, N;
           const { target: m } = r, v = parseInt(m.dataset.index);
-          r.isIntersecting && m.offsetTop <= A.value.offsetTop + 50 ? (c.value = ((f = a.value[v - 1]) == null ? void 0 : f.label) ?? ((M = a.value[0]) == null ? void 0 : M.label), d("scroll-into-tab", v - 1)) : r.boundingClientRect.bottom <= ((E = A.value) == null ? void 0 : E.getBoundingClientRect().bottom) ? (d("scroll-into-tab", v), c.value = (V = a.value[v]) == null ? void 0 : V.label) : v === 1 && (d("scroll-into-tab", v), c.value = (N = a.value[0]) == null ? void 0 : N.label);
+          r.isIntersecting && m.offsetTop <= A.value.offsetTop + 50 ? (f.value = ((d = a.value[v - 1]) == null ? void 0 : d.label) ?? ((M = a.value[0]) == null ? void 0 : M.label), u("scroll-into-tab", v - 1)) : r.boundingClientRect.bottom <= ((E = A.value) == null ? void 0 : E.getBoundingClientRect().bottom) ? (u("scroll-into-tab", v), f.value = (V = a.value[v]) == null ? void 0 : V.label) : v === 1 && (u("scroll-into-tab", v), f.value = (N = a.value[0]) == null ? void 0 : N.label);
         });
-      }), e.value.observe(A.value), Array.from(o.value.children).forEach((n, r) => {
+      }), e.value.observe(A.value), Array.from(l.value.children).forEach((n, r) => {
         e.value.observe(n), n.dataset.index = r;
       });
     }
@@ -475,7 +476,7 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       }
       switch (n.key) {
         case "Tab":
-          d("focus-skin-selector");
+          u("focus-skin-selector");
           break;
         case "Enter":
           Z(m);
@@ -488,7 +489,7 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       }
       switch (n.key) {
         case "Tab":
-          n.shiftKey ? k(r, 0) && r > 0 ? X(r, !0) : (X(1, !1), d("focus-search-input")) : k(r + 1, 0) ? X(r + 1 + 1, !1) : d("focus-skin-selector");
+          n.shiftKey ? g(r, 0) && r > 0 ? X(r, !0) : (X(1, !1), u("focus-search-input")) : g(r + 1, 0) ? X(r + 1 + 1, !1) : u("focus-skin-selector");
           break;
         case "Enter":
           Z(v);
@@ -496,90 +497,94 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       }
     };
     function Z(n) {
-      d("selected-emoji", n);
+      u("selected-emoji", n);
     }
     function B(n) {
-      d("highlighted-emoji", n);
+      u("highlighted-emoji", n);
     }
     function ke() {
-      k(0, 0);
+      g(0, 0);
+    }
+    function ye() {
+      g(b.value.length - 1, 0);
     }
     return re(() => {
       he();
-    }), Re(() => {
+    }), je(() => {
       e.value.disconnect();
-    }), g({
-      focusEmojiSelector: ke
-    }), (n, r) => (y(), _("div", Oe, [
+    }), k({
+      focusEmojiSelector: ke,
+      focusLastEmoji: ye
+    }), (n, r) => (y(), _("div", Ce, [
       w("div", {
         id: "d-emoji-picker-list",
         ref_key: "listRef",
-        ref: o,
+        ref: l,
         class: "d-emoji-picker__list"
       }, [
-        l.emojiFilter ? (y(), _("p", Ce, J(R.value.length > 0 ? l.searchResultsLabel : l.searchNoResultsLabel), 1)) : (y(), _("div", {
+        o.emojiFilter ? (y(), _("p", Me, J(R.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (y(), _("div", {
           key: 1,
           ref_key: "tabCategoryRef",
           ref: A,
           class: "d-emoji-picker__category d-emoji-picker__alignment"
         }, [
-          w("p", null, J(c.value), 1)
+          w("p", null, J(f.value), 1)
         ], 512)),
-        (y(!0), _(z, null, Y(a.value, (m, v) => le((y(), _("div", {
+        (y(!0), _(z, null, Y(a.value, (m, v) => oe((y(), _("div", {
           key: v,
           ref_for: !0,
           ref: m.ref,
           class: "d-emoji-picker__alignment"
         }, [
-          v ? (y(), _("p", Me, J(m.label), 1)) : oe("", !0),
-          w("div", Ke, [
-            (y(!0), _(z, null, Y(T(I)[b.value[v] + l.skinTone] ? T(I)[b.value[v] + l.skinTone] : T(I)[b.value[v]], (f, M) => (y(), _("button", {
-              key: f.shortname,
+          v ? (y(), _("p", Ke, J(m.label), 1)) : le("", !0),
+          w("div", Ne, [
+            (y(!0), _(z, null, Y(T(I)[b.value[v] + o.skinTone] ? T(I)[b.value[v] + o.skinTone] : T(I)[b.value[v]], (d, M) => (y(), _("button", {
+              key: d.shortname,
               ref_for: !0,
               ref: (E) => {
-                E && T(u)(E, v, M);
+                E && T(c)(E, v, M);
               },
               type: "button",
-              "aria-label": f.name,
-              onClick: (E) => Z(f),
-              onFocusin: (E) => B(f),
+              "aria-label": d.name,
+              onClick: (E) => Z(d),
+              onFocusin: (E) => B(d),
               onFocusout: r[0] || (r[0] = (E) => B(null)),
-              onMouseover: (E) => B(f),
+              onMouseover: (E) => B(d),
               onMouseleave: r[1] || (r[1] = (E) => B(null)),
-              onKeydown: (E) => ge(E, v, M, f)
+              onKeydown: (E) => ge(E, v, M, d)
             }, [
               w("img", {
                 class: "d-icon d-icon--size-500",
-                alt: f.name,
-                "aria-label": f.name,
-                title: f.name,
-                src: me(f.unicode_character),
+                alt: d.name,
+                "aria-label": d.name,
+                title: d.name,
+                src: me(d.unicode_character),
                 onError: ve
-              }, null, 40, Ue)
-            ], 40, Ne))), 128))
+              }, null, 40, Be)
+            ], 40, Ue))), 128))
           ])
         ])), [
-          [se, !l.emojiFilter]
+          [se, !o.emojiFilter]
         ])), 128)),
-        l.emojiFilter ? (y(), _("div", Be, [
-          w("div", Pe, [
+        o.emojiFilter ? (y(), _("div", Pe, [
+          w("div", Ve, [
             (y(!0), _(z, null, Y(R.value, (m, v) => (y(), _("button", {
               key: m.shortname,
               ref_for: !0,
-              ref: (f) => {
-                f && T(s)(f, v);
+              ref: (d) => {
+                d && T(s)(d, v);
               },
               type: "button",
               "aria-label": m.name,
               class: ce({
                 "hover-emoji": v === 0 && T(S)
               }),
-              onClick: (f) => Z(m),
-              onFocusin: (f) => B(m),
-              onFocusout: r[2] || (r[2] = (f) => B(null)),
-              onMouseover: (f) => te(m),
-              onMouseleave: r[3] || (r[3] = (f) => te(null)),
-              onKeydown: (f) => pe(f, v, m)
+              onClick: (d) => Z(m),
+              onFocusin: (d) => B(m),
+              onFocusout: r[2] || (r[2] = (d) => B(null)),
+              onMouseover: (d) => te(m),
+              onMouseleave: r[3] || (r[3] = (d) => te(null)),
+              onKeydown: (d) => pe(d, v, m)
             }, [
               w("img", {
                 class: "d-icon d-icon--size-500",
@@ -587,14 +592,14 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
                 "aria-label": m.name,
                 title: m.name,
                 src: `${T(Q) + m.unicode_character}.png`
-              }, null, 8, qe)
-            ], 42, Ve))), 128))
+              }, null, 8, We)
+            ], 42, qe))), 128))
           ])
-        ])) : oe("", !0)
+        ])) : le("", !0)
       ], 512)
     ]));
   }
-}, Ge = { "data-qa": "skin-selector" }, He = { class: "d-emoji-picker__skin-list" }, ze = ["onKeydown", "onClick"], Ye = ["alt", "aria-label", "title", "src"], Je = { class: "d-emoji-picker__skin-selected" }, Qe = ["aria-label"], Xe = ["alt", "aria-label", "title", "src"], Ze = {
+}, He = { "data-qa": "skin-selector" }, ze = { class: "d-emoji-picker__skin-list" }, Ye = ["onKeydown", "onClick"], Je = ["alt", "aria-label", "title", "src"], Qe = { class: "d-emoji-picker__skin-selected" }, Xe = ["aria-label"], Ze = ["alt", "aria-label", "title", "src"], xe = {
   __name: "emoji_skin_selector",
   props: {
     /**
@@ -622,10 +627,11 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
      * @type {Number}
      */
     "skin-tone",
-    "focus-tabset"
+    "focus-tabset",
+    "focus-last-emoji"
   ],
-  setup(l, { expose: g, emit: L }) {
-    const i = l, d = L, j = [
+  setup(o, { expose: k, emit: L }) {
+    const i = o, u = L, j = [
       {
         name: ":wave_tone1:",
         unicode_output: "1f44b-1f3fb",
@@ -662,77 +668,77 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
         skinTone: q.DEFAULT,
         skinCode: ""
       }
-    ], p = h(!1), S = h(null), u = h([]);
+    ], p = h(!1), S = h(null), c = h([]);
     ae(
       () => i.isHovering && (p.value = !1)
     );
-    const s = P(() => j.find((t) => t.skinTone === i.skinTone)), k = h(s.value);
-    ae(() => s.value && (k.value = s.value));
+    const s = P(() => j.find((t) => t.skinTone === i.skinTone)), g = h(s.value);
+    ae(() => s.value && (g.value = s.value));
     function D(t) {
-      u.value.push(t);
+      c.value.push(t);
     }
     function O() {
       S.value.focus();
     }
     function A(t) {
-      k.value = t, p.value = !1, d("skin-tone", t.skinTone), x(() => O());
+      g.value = t, p.value = !1, u("skin-tone", t.skinTone), x(() => O());
     }
-    const o = (t, a, c) => {
+    const l = (t, a, f) => {
       var b, R, C;
-      t.preventDefault(), t.key === "ArrowLeft" && (c === 0 && ((b = u.value[u.value.length - 1]) == null || b.focus()), (R = u.value[c - 1]) == null || R.focus()), t.key === "ArrowRight" && ((C = u.value[c + 1]) == null || C.focus()), t.key === "Enter" && (a ? A(a) : e()), t.key === "Tab" && d("focus-tabset");
+      t.preventDefault(), t.key === "ArrowLeft" && (f === 0 && ((b = c.value[c.value.length - 1]) == null || b.focus()), (R = c.value[f - 1]) == null || R.focus()), t.key === "ArrowRight" && ((C = c.value[f + 1]) == null || C.focus()), t.key === "Enter" && (a ? A(a) : e()), t.key === "Tab" && (t.shiftKey ? u("focus-last-emoji") : u("focus-tabset"));
     };
     function e() {
-      p.value = !p.value, x(() => u.value[0].focus());
+      p.value = !p.value, x(() => c.value[0].focus());
     }
-    return g({
+    return k({
       focusSkinSelector: O
-    }), (t, a) => (y(), _("div", Ge, [
-      le(w("div", He, [
-        (y(), _(z, null, Y(j, (c, b) => w("button", {
+    }), (t, a) => (y(), _("div", He, [
+      oe(w("div", ze, [
+        (y(), _(z, null, Y(j, (f, b) => w("button", {
           ref_for: !0,
           ref: (R) => {
             R && D(R);
           },
-          key: c.name,
+          key: f.name,
           class: ce({
-            selected: k.value.skinCode === c.skinCode
+            selected: g.value.skinCode === f.skinCode
           }),
-          onKeydown: (R) => o(R, c, b),
-          onClick: (R) => A(c)
+          onKeydown: (R) => l(R, f, b),
+          onClick: (R) => A(f)
         }, [
           w("img", {
             class: "d-icon d-icon--size-500",
-            alt: c.name,
-            "aria-label": c.name,
-            title: c.name,
-            src: `${T(Q) + c.unicode_output}.png`
-          }, null, 8, Ye)
-        ], 42, ze)), 64))
+            alt: f.name,
+            "aria-label": f.name,
+            title: f.name,
+            src: `${T(Q) + f.unicode_output}.png`
+          }, null, 8, Je)
+        ], 42, Ye)), 64))
       ], 512), [
         [se, p.value]
       ]),
-      le(w("div", Je, [
-        F(T(Ee), { placement: "top-end" }, {
+      oe(w("div", Qe, [
+        F(T($e), { placement: "top-end" }, {
           anchor: H(() => [
             w("button", {
               ref_key: "skinSelectorRef",
               ref: S,
-              "aria-label": l.skinSelectorButtonTooltipLabel,
+              "aria-label": o.skinSelectorButtonTooltipLabel,
               tabindex: "-1",
               onClick: e,
-              onKeydown: a[0] || (a[0] = (c) => o(c))
+              onKeydown: a[0] || (a[0] = (f) => l(f))
             }, [
               w("img", {
                 class: "d-icon d-icon--size-500",
-                alt: k.value.name,
-                "aria-label": k.value.name,
-                title: k.value.name,
-                src: `${T(Q) + k.value.unicode_output}.png`
-              }, null, 8, Xe)
-            ], 40, Qe)
+                alt: g.value.name,
+                "aria-label": g.value.name,
+                title: g.value.name,
+                src: `${T(Q) + g.value.unicode_output}.png`
+              }, null, 8, Ze)
+            ], 40, Xe)
           ]),
           default: H(() => [
-            fe(J(l.skinSelectorButtonTooltipLabel) + " ", 1)
+            fe(J(o.skinSelectorButtonTooltipLabel) + " ", 1)
           ]),
           _: 1
         })
@@ -741,7 +747,7 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       ])
     ]));
   }
-}, xe = { class: "d-emoji-picker__data" }, et = ["alt", "aria-label", "title", "src"], tt = {
+}, et = { class: "d-emoji-picker__data" }, tt = ["alt", "aria-label", "title", "src"], ot = {
   __name: "emoji_description",
   props: {
     /**
@@ -754,23 +760,23 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
       default: null
     }
   },
-  setup(l) {
-    return (g, L) => {
+  setup(o) {
+    return (k, L) => {
       var i;
-      return y(), _("div", xe, [
-        l.emoji ? (y(), _("img", {
+      return y(), _("div", et, [
+        o.emoji ? (y(), _("img", {
           key: 0,
           class: "d-icon d-icon--size-500",
-          alt: l.emoji.name,
-          "aria-label": l.emoji.name,
-          title: l.emoji.name,
-          src: `${T(Q) + l.emoji.unicode_character}.png`
-        }, null, 8, et)) : oe("", !0),
-        fe(" " + J((i = l.emoji) == null ? void 0 : i.name), 1)
+          alt: o.emoji.name,
+          "aria-label": o.emoji.name,
+          title: o.emoji.name,
+          src: `${T(Q) + o.emoji.unicode_character}.png`
+        }, null, 8, tt)) : le("", !0),
+        fe(" " + J((i = o.emoji) == null ? void 0 : i.name), 1)
       ]);
     };
   }
-}, lt = { class: "d-emoji-picker" }, ot = { class: "d-emoji-picker--header" }, st = { class: "d-emoji-picker--body" }, nt = { class: "d-emoji-picker--footer" }, ut = {
+}, lt = { class: "d-emoji-picker" }, st = { class: "d-emoji-picker--header" }, nt = { class: "d-emoji-picker--body" }, it = { class: "d-emoji-picker--footer" }, ct = {
   __name: "emoji_picker",
   props: {
     /**
@@ -877,73 +883,75 @@ const Oe = { class: "d-emoji-picker__selector" }, Ce = {
      */
     "close"
   ],
-  setup(l, { emit: g }) {
-    const L = l, i = g, d = h(""), j = h(null), p = h({}), S = h(0), u = h(!1), s = P(() => L.recentlyUsedEmojis.length > 0);
-    function k(o) {
-      d.value = "", p.value = o, p.value = { ...p.value, tabId: o };
+  setup(o, { emit: k }) {
+    const L = o, i = k, u = h(""), j = h(null), p = h({}), S = h(0), c = h(!1), s = P(() => L.recentlyUsedEmojis.length > 0);
+    function g(l) {
+      u.value = "", p.value = l, p.value = { ...p.value, tabId: l };
     }
-    function D(o) {
-      S.value = o;
+    function D(l) {
+      S.value = l;
     }
-    function O(o) {
-      u.value = o;
+    function O(l) {
+      c.value = l;
     }
-    function A(o) {
-      j.value = o;
+    function A(l) {
+      j.value = l;
     }
-    return (o, e) => (y(), _("div", lt, [
-      w("div", ot, [
-        F(Fe, {
+    return (l, e) => (y(), _("div", lt, [
+      w("div", st, [
+        F(De, {
           ref: "tabsetRef",
-          "emoji-filter": d.value,
+          "emoji-filter": u.value,
           "show-recently-used-tab": s.value,
           "scroll-into-tab": S.value,
-          "tabset-labels": l.tabSetLabels,
-          "is-scrolling": u.value,
-          onFocusSearchInput: e[0] || (e[0] = (t) => o.$refs.searchInputRef.focusSearchInput()),
-          onSelectedTabset: k,
-          onKeydown: e[1] || (e[1] = U((t) => i("close"), ["esc"]))
+          "tabset-labels": o.tabSetLabels,
+          "is-scrolling": c.value,
+          onFocusSearchInput: e[0] || (e[0] = (t) => l.$refs.searchInputRef.focusSearchInput()),
+          onFocusSkinSelector: e[1] || (e[1] = (t) => l.$refs.skinSelectorRef.focusSkinSelector()),
+          onSelectedTabset: g,
+          onKeydown: e[2] || (e[2] = U((t) => i("close"), ["esc"]))
         }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
       ]),
-      w("div", st, [
-        F(Ae, {
+      w("div", nt, [
+        F(Ie, {
           ref: "searchInputRef",
-          modelValue: d.value,
-          "onUpdate:modelValue": e[2] || (e[2] = (t) => d.value = t),
-          "search-placeholder-label": l.searchPlaceholderLabel,
-          onSelectFirstEmoji: e[3] || (e[3] = (t) => i("selected-emoji", j.value)),
-          onFocusTabset: e[4] || (e[4] = (t) => o.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: e[5] || (e[5] = (t) => o.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: e[6] || (e[6] = U((t) => i("close"), ["esc"]))
+          modelValue: u.value,
+          "onUpdate:modelValue": e[3] || (e[3] = (t) => u.value = t),
+          "search-placeholder-label": o.searchPlaceholderLabel,
+          onSelectFirstEmoji: e[4] || (e[4] = (t) => i("selected-emoji", j.value)),
+          onFocusTabset: e[5] || (e[5] = (t) => l.$refs.tabsetRef.focusTabset()),
+          onFocusEmojiSelector: e[6] || (e[6] = (t) => l.$refs.emojiSelectorRef.focusEmojiSelector()),
+          onKeydown: e[7] || (e[7] = U((t) => i("close"), ["esc"]))
         }, null, 8, ["modelValue", "search-placeholder-label"]),
-        F(We, {
+        F(Ge, {
           ref: "emojiSelectorRef",
-          "emoji-filter": d.value,
-          "skin-tone": l.skinTone,
-          "tabset-labels": l.tabSetLabels,
-          "search-results-label": l.searchResultsLabel,
-          "search-no-results-label": l.searchNoResultsLabel,
-          "recently-used-emojis": l.recentlyUsedEmojis,
+          "emoji-filter": u.value,
+          "skin-tone": o.skinTone,
+          "tabset-labels": o.tabSetLabels,
+          "search-results-label": o.searchResultsLabel,
+          "search-no-results-label": o.searchNoResultsLabel,
+          "recently-used-emojis": o.recentlyUsedEmojis,
           "selected-tabset": p.value,
           onScrollIntoTab: D,
           onIsScrolling: O,
           onHighlightedEmoji: A,
-          onSelectedEmoji: e[7] || (e[7] = (t) => i("selected-emoji", t)),
-          onFocusSkinSelector: e[8] || (e[8] = (t) => o.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: e[9] || (e[9] = (t) => o.$refs.searchInputRef.focusSearchInput()),
-          onKeydown: e[10] || (e[10] = U((t) => i("close"), ["esc"]))
+          onSelectedEmoji: e[8] || (e[8] = (t) => i("selected-emoji", t)),
+          onFocusSkinSelector: e[9] || (e[9] = (t) => l.$refs.skinSelectorRef.focusSkinSelector()),
+          onFocusSearchInput: e[10] || (e[10] = (t) => l.$refs.searchInputRef.focusSearchInput()),
+          onKeydown: e[11] || (e[11] = U((t) => i("close"), ["esc"]))
         }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
       ]),
-      w("div", nt, [
-        F(tt, { emoji: j.value }, null, 8, ["emoji"]),
-        F(Ze, {
+      w("div", it, [
+        F(ot, { emoji: j.value }, null, 8, ["emoji"]),
+        F(xe, {
           ref: "skinSelectorRef",
           "is-hovering": !!j.value,
-          "skin-selector-button-tooltip-label": l.skinSelectorButtonTooltipLabel,
-          "skin-tone": l.skinTone,
-          onSkinTone: e[11] || (e[11] = (t) => i("skin-tone", t)),
-          onFocusTabset: e[12] || (e[12] = (t) => o.$refs.tabsetRef.focusTabset()),
-          onKeydown: e[13] || (e[13] = U((t) => i("close"), ["esc"]))
+          "skin-selector-button-tooltip-label": o.skinSelectorButtonTooltipLabel,
+          "skin-tone": o.skinTone,
+          onSkinTone: e[12] || (e[12] = (t) => i("skin-tone", t)),
+          onFocusTabset: e[13] || (e[13] = (t) => l.$refs.tabsetRef.focusTabset()),
+          onFocusLastEmoji: e[14] || (e[14] = (t) => l.$refs.emojiSelectorRef.focusLastEmoji()),
+          onKeydown: e[15] || (e[15] = U((t) => i("close"), ["esc"]))
         }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
       ])
     ]));
@@ -953,7 +961,7 @@ export {
   G as A,
   Q as C,
   $ as E,
-  ut as _,
+  ct as _,
   q as a,
   K as b
 };