@nextcloud/vue 8.0.1 → 8.2.0

package/dist/Components/NcActionText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionText.cjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<li class=\"action\">\n\t\t<span class=\"action-text\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span v-if=\"icon !== ''\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\t:aria-hidden=\"ariaHidden\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-text__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_sfc_main","actionText"],"mappings":";;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,EAAA,eAAA;AAEA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionText.cjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-text\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span v-if=\"icon !== ''\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-text__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_sfc_main","actionText"],"mappings":";;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,EAAA,eAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionText.mjs

@@ -1,26 +1,32 @@
-import "../assets/index-d3702c91.css";
-import { A as s } from "../chunks/actionText-a64be267.mjs";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const e = {
+import "../assets/index-00012a4c.css";
+import { A as e } from "../chunks/actionText-60ff01d1.mjs";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const a = {
   name: "NcActionText",
-  mixins: [s]
+  mixins: [e],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: !1
+    }
+  }
 };
-var o = function() {
+var c = function() {
   var t = this, n = t._self._c;
-  return n("li", { staticClass: "action" }, [n("span", { staticClass: "action-text", on: { click: t.onClick } }, [t._t("icon", function() {
-    return [t.icon !== "" ? n("span", { staticClass: "action-text__icon", class: [t.isIconUrl ? "action-text__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": t.ariaHidden } }) : t._e()];
+  return n("li", { staticClass: "action", attrs: { role: t.isInSemanticMenu && "presentation" } }, [n("span", { staticClass: "action-text", on: { click: t.onClick } }, [t._t("icon", function() {
+    return [t.icon !== "" ? n("span", { staticClass: "action-text__icon", class: [t.isIconUrl ? "action-text__icon--url" : t.icon], style: { backgroundImage: t.isIconUrl ? `url(${t.icon})` : null }, attrs: { "aria-hidden": "true" } }) : t._e()];
   }), t.name ? n("span", { staticClass: "action-text__longtext-wrapper" }, [n("strong", { staticClass: "action-text__name" }, [t._v(" " + t._s(t.name) + " ")]), n("br"), n("span", { staticClass: "action-text__longtext", domProps: { textContent: t._s(t.text) } })]) : t.isLongText ? n("span", { staticClass: "action-text__longtext", domProps: { textContent: t._s(t.text) } }) : n("span", { staticClass: "action-text__text" }, [t._v(t._s(t.text))]), t._e()], 2)]);
-}, c = [], i = /* @__PURE__ */ a(
-  e,
-  o,
+}, i = [], o = /* @__PURE__ */ s(
+  a,
   c,
+  i,
   !1,
   null,
-  "c788d299",
+  "34d9a49c",
   null,
   null
 );
-const p = i.exports;
+const m = o.exports;
 export {
-  p as default
+  m as default
 };

package/dist/Components/NcActionText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActionText.mjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<li class=\"action\">\n\t\t<span class=\"action-text\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span v-if=\"icon !== ''\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\t:aria-hidden=\"ariaHidden\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-text__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_sfc_main","ActionTextMixin"],"mappings":";;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAEA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActionText.mjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-text\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span v-if=\"icon !== ''\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-text__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_sfc_main","ActionTextMixin"],"mappings":";;;AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,QAAA;AAAA,IACA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcActionTextEditable.cjs

@@ -1,5 +1,5 @@
 var b = require("../assets/index-93ad846c.css");
-const n = require("../chunks/actionText-54bc24a6.cjs"), i = require("../chunks/GenRandomId-c214d235.cjs"), o = require("../chunks/ArrowRight-7315f6c1.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const n = require("../chunks/actionText-9582810f.cjs"), i = require("../chunks/GenRandomId-c214d235.cjs"), o = require("../chunks/ArrowRight-7315f6c1.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 const r = {
   name: "NcActionTextEditable",
   components: {

package/dist/Components/NcActionTextEditable.mjs

@@ -1,5 +1,5 @@
 import "../assets/index-93ad846c.css";
-import { A as n } from "../chunks/actionText-a64be267.mjs";
+import { A as n } from "../chunks/actionText-60ff01d1.mjs";
 import { G as i } from "../chunks/GenRandomId-cb9ccebe.mjs";
 import { A as l } from "../chunks/ArrowRight-74a9fcb2.mjs";
 import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";

package/dist/Components/NcActions.cjs

@@ -1,11 +1,25 @@
-var ee = require("../assets/index-55600948.css");
-const T = require("./NcButton.cjs"), P = require("./NcPopover.cjs"), R = require("../chunks/GenRandomId-c214d235.cjs"), V = require("../chunks/l10n-f491109d.cjs"), K = require("vue"), G = require("../chunks/DotsHorizontal-ac96129a.cjs"), j = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), U = (e) => e && e.__esModule ? e : { default: e }, W = /* @__PURE__ */ U(K);
-const d = ".focusable", J = {
+var oe = require("../assets/index-d1c0876d.css");
+const U = require("./NcButton.cjs"), j = require("./NcPopover.cjs"), J = require("../chunks/GenRandomId-c214d235.cjs"), Q = require("../chunks/l10n-e9ffbe5e.cjs"), V = require("vue"), W = require("../chunks/DotsHorizontal-ac96129a.cjs"), X = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), Y = (e) => e && e.__esModule ? e : { default: e }, Z = /* @__PURE__ */ Y(V);
+const a = ".focusable", ee = {
   name: "NcActions",
   components: {
-    NcButton: T,
-    DotsHorizontal: G.DotsHorizontal,
-    NcPopover: P
+    NcButton: U,
+    DotsHorizontal: W.DotsHorizontal,
+    NcPopover: j
+  },
+  provide() {
+    return {
+      /**
+       * NcActions can be used as:
+       * - Application menu (has menu role)
+       * - Navigation (has no specific role, should be used an element with navigation role)
+       * - Popover with plain text or text inputs (has no specific role)
+       * Depending on the usage (used items), the menu and its items should have different roles for a11y.
+       * Provide the role for NcAction* components in the NcActions content.
+       * @type {import('vue').ComputedRef<boolean>}
+       */
+      "NcActions:isSemanticMenu": V.computed(() => this.isSemanticMenu)
+    };
   },
   props: {
     /**
@@ -83,10 +97,12 @@ const d = ".focusable", J = {
      */
     ariaLabel: {
       type: String,
-      default: V.t("Actions")
+      default: Q.t("Actions")
     },
     /**
-     * aria-hidden attribute for the icon slot
+     * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
+     * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
+     * otherwise root element will inherit incorrect aria-hidden.
      */
     ariaHidden: {
       type: Boolean,
@@ -140,7 +156,10 @@ const d = ".focusable", J = {
     return {
       opened: this.open,
       focusIndex: 0,
-      randomId: `menu-${R.GenRandomId()}`
+      randomId: `menu-${J.GenRandomId()}`,
+      isSemanticMenu: !1,
+      isSemanticNavigation: !1,
+      isSemanticPopoverLike: !1
     };
   },
   computed: {
@@ -163,8 +182,8 @@ const d = ".focusable", J = {
      * @return {boolean}
      */
     isValidSingleAction(e) {
-      var u, c, o, a, f;
-      const s = (f = (o = (c = (u = e == null ? void 0 : e.componentOptions) == null ? void 0 : u.Ctor) == null ? void 0 : c.extendOptions) == null ? void 0 : o.name) != null ? f : (a = e == null ? void 0 : e.componentOptions) == null ? void 0 : a.tag;
+      var r, p, u, f, d;
+      const s = (d = (u = (p = (r = e == null ? void 0 : e.componentOptions) == null ? void 0 : r.Ctor) == null ? void 0 : p.extendOptions) == null ? void 0 : u.name) != null ? d : (f = e == null ? void 0 : e.componentOptions) == null ? void 0 : f.tag;
       return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(s);
     },
     // MENU STATE MANAGEMENT
@@ -188,11 +207,11 @@ const d = ".focusable", J = {
       if (document.activeElement === e.target)
         return;
       const s = e.target.closest("li");
-      if (s) {
-        const u = s.querySelector(d);
-        if (u) {
-          const o = [...this.$refs.menu.querySelectorAll(d)].indexOf(u);
-          o > -1 && (this.focusIndex = o, this.focusAction());
+      if (s && this.$refs.menu.contains(s)) {
+        const r = s.querySelector(a);
+        if (r) {
+          const u = [...this.$refs.menu.querySelectorAll(a)].indexOf(r);
+          u > -1 && (this.focusIndex = u, this.focusAction());
         }
       }
     },
@@ -202,14 +221,14 @@ const d = ".focusable", J = {
      * @param {object} event The keydown event
      */
     onKeydown(e) {
-      (e.keyCode === 38 || e.keyCode === 9 && e.shiftKey) && this.focusPreviousAction(e), (e.keyCode === 40 || e.keyCode === 9 && !e.shiftKey) && this.focusNextAction(e), e.keyCode === 33 && this.focusFirstAction(e), e.keyCode === 34 && this.focusLastAction(e), e.keyCode === 27 && (this.closeMenu(), e.preventDefault());
+      e.key === "Tab" && !this.isSemanticPopoverLike && this.closeMenu(!1), e.key === "ArrowUp" && this.focusPreviousAction(e), e.key === "ArrowDown" && this.focusNextAction(e), e.key === "PageUp" && this.focusFirstAction(e), e.key === "PageDown" && this.focusLastAction(e), e.key === "Escape" && (this.closeMenu(), e.preventDefault());
     },
     removeCurrentActive() {
       const e = this.$refs.menu.querySelector("li.active");
       e && e.classList.remove("active");
     },
     focusAction() {
-      const e = this.$refs.menu.querySelectorAll(d)[this.focusIndex];
+      const e = this.$refs.menu.querySelectorAll(a)[this.focusIndex];
       if (e) {
         this.removeCurrentActive();
         const s = e.closest("li.action");
@@ -217,23 +236,23 @@ const d = ".focusable", J = {
       }
     },
     focusPreviousAction(e) {
-      this.opened && (this.focusIndex === 0 ? this.closeMenu() : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
+      this.opened && (this.focusIndex === 0 ? this.focusLastAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex - 1), this.focusAction());
     },
     focusNextAction(e) {
       if (this.opened) {
-        const s = this.$refs.menu.querySelectorAll(d).length - 1;
-        this.focusIndex === s ? this.closeMenu() : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
+        const s = this.$refs.menu.querySelectorAll(a).length - 1;
+        this.focusIndex === s ? this.focusFirstAction(e) : (this.preventIfEvent(e), this.focusIndex = this.focusIndex + 1), this.focusAction();
       }
     },
     focusFirstAction(e) {
       if (this.opened) {
         this.preventIfEvent(e);
-        const s = [...this.$refs.menu.querySelectorAll(d)].findIndex((u) => u.parentElement.getAttribute("aria-selected"));
+        const s = [...this.$refs.menu.querySelectorAll(a)].findIndex((r) => r.parentElement.getAttribute("aria-selected"));
         this.focusIndex = s > -1 ? s : 0, this.focusAction();
       }
     },
     focusLastAction(e) {
-      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(d).length - 1, this.focusAction());
+      this.opened && (this.preventIfEvent(e), this.focusIndex = this.$refs.menu.querySelectorAll(a).length - 1, this.focusAction());
     },
     preventIfEvent(e) {
       e && (e.preventDefault(), e.stopPropagation());
@@ -254,66 +273,65 @@ const d = ".focusable", J = {
   render(e) {
     const s = (this.$slots.default || []).filter(
       (t) => {
-        var l, n, i, r;
-        return ((l = t == null ? void 0 : t.componentOptions) == null ? void 0 : l.tag) || ((r = (i = (n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : r.name);
+        var n, i, o, c;
+        return ((n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.tag) || ((c = (o = (i = t == null ? void 0 : t.componentOptions) == null ? void 0 : i.Ctor) == null ? void 0 : o.extendOptions) == null ? void 0 : c.name);
       }
-    ), u = (t) => {
-      var i, r, g, h, p, m, y;
-      const l = (p = (g = (r = (i = t == null ? void 0 : t.componentOptions) == null ? void 0 : i.Ctor) == null ? void 0 : r.extendOptions) == null ? void 0 : g.name) != null ? p : (h = t == null ? void 0 : t.componentOptions) == null ? void 0 : h.tag, n = (y = (m = t == null ? void 0 : t.componentOptions) == null ? void 0 : m.propsData) == null ? void 0 : y.href;
-      return l === "NcActionLink" && !(n != null && n.startsWith("#")) && new URL(n, window.location.origin).origin === window.location.origin;
-    }, c = s.every(u);
-    let o = s.filter(this.isValidSingleAction);
-    if (this.forceMenu && o.length > 0 && this.inline > 0 && (W.default.util.warn("Specifying forceMenu will ignore any inline actions rendering."), o = []), s.length === 0)
+    ), r = (t) => {
+      var n, i, o, c, m;
+      return (m = (o = (i = (n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : o.name) != null ? m : (c = t == null ? void 0 : t.componentOptions) == null ? void 0 : c.tag;
+    }, p = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], u = ["NcActionInput", "NcActionTextEditable"], f = ["NcActionLink", "NcActionRouter"], d = s.some((t) => u.includes(r(t))), A = s.some((t) => p.includes(r(t))), G = s.some((t) => f.includes(r(t)));
+    this.isSemanticMenu = A && !d, this.isSemanticNavigation = G && !A && !d, this.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation;
+    let l = s.filter(this.isValidSingleAction);
+    if (this.forceMenu && l.length > 0 && this.inline > 0 && (Z.default.util.warn("Specifying forceMenu will ignore any inline actions rendering."), l = []), s.length === 0)
       return;
-    const a = (t) => {
-      var m, y, _, x, b, v, I, N, $, B, O, A, S, k, C, q, w, L, E, M, D, F, z;
-      const l = ((_ = (y = (m = t == null ? void 0 : t.data) == null ? void 0 : m.scopedSlots) == null ? void 0 : y.icon()) == null ? void 0 : _[0]) || e("span", { class: ["icon", (b = (x = t == null ? void 0 : t.componentOptions) == null ? void 0 : x.propsData) == null ? void 0 : b.icon] }), n = ((v = t == null ? void 0 : t.data) == null ? void 0 : v.attrs) || {}, i = (N = (I = t == null ? void 0 : t.componentOptions) == null ? void 0 : I.listeners) == null ? void 0 : N.click, r = (S = (A = (O = (B = ($ = t == null ? void 0 : t.componentOptions) == null ? void 0 : $.children) == null ? void 0 : B[0]) == null ? void 0 : O.text) == null ? void 0 : A.trim) == null ? void 0 : S.call(A), g = ((C = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.propsData) == null ? void 0 : C.ariaLabel) || r, h = this.forceName ? r : "";
-      let p = (w = (q = t == null ? void 0 : t.componentOptions) == null ? void 0 : q.propsData) == null ? void 0 : w.title;
-      return this.forceName || p || (p = r), e(
+    const g = (t) => {
+      var x, _, I, N, S, $, B, k, O, M, L, h, q, E, w, P, D, F, T, C, z, R, H;
+      const n = ((I = (_ = (x = t == null ? void 0 : t.data) == null ? void 0 : x.scopedSlots) == null ? void 0 : _.icon()) == null ? void 0 : I[0]) || e("span", { class: ["icon", (S = (N = t == null ? void 0 : t.componentOptions) == null ? void 0 : N.propsData) == null ? void 0 : S.icon] }), i = (($ = t == null ? void 0 : t.data) == null ? void 0 : $.attrs) || {}, o = (k = (B = t == null ? void 0 : t.componentOptions) == null ? void 0 : B.listeners) == null ? void 0 : k.click, c = (q = (h = (L = (M = (O = t == null ? void 0 : t.componentOptions) == null ? void 0 : O.children) == null ? void 0 : M[0]) == null ? void 0 : L.text) == null ? void 0 : h.trim) == null ? void 0 : q.call(h), m = ((w = (E = t == null ? void 0 : t.componentOptions) == null ? void 0 : E.propsData) == null ? void 0 : w.ariaLabel) || c, b = this.forceName ? c : "";
+      let y = (D = (P = t == null ? void 0 : t.componentOptions) == null ? void 0 : P.propsData) == null ? void 0 : D.title;
+      return this.forceName || y || (y = c), e(
         "NcButton",
         {
           class: [
             "action-item action-item--single",
-            (L = t == null ? void 0 : t.data) == null ? void 0 : L.staticClass,
-            (E = t == null ? void 0 : t.data) == null ? void 0 : E.class
+            (F = t == null ? void 0 : t.data) == null ? void 0 : F.staticClass,
+            (T = t == null ? void 0 : t.data) == null ? void 0 : T.class
           ],
           attrs: {
-            ...n,
-            "aria-label": g,
-            title: p
+            ...i,
+            "aria-label": m,
+            title: y
           },
-          ref: (M = t == null ? void 0 : t.data) == null ? void 0 : M.ref,
+          ref: (C = t == null ? void 0 : t.data) == null ? void 0 : C.ref,
           props: {
             // If it has a menuName, we use a secondary button
-            type: this.type || (h ? "secondary" : "tertiary"),
-            disabled: this.disabled || ((F = (D = t == null ? void 0 : t.componentOptions) == null ? void 0 : D.propsData) == null ? void 0 : F.disabled),
-            ariaHidden: this.ariaHidden,
-            ...(z = t == null ? void 0 : t.componentOptions) == null ? void 0 : z.propsData
+            type: this.type || (b ? "secondary" : "tertiary"),
+            disabled: this.disabled || ((R = (z = t == null ? void 0 : t.componentOptions) == null ? void 0 : z.propsData) == null ? void 0 : R.disabled),
+            ...(H = t == null ? void 0 : t.componentOptions) == null ? void 0 : H.propsData
           },
           on: {
             focus: this.onFocus,
             blur: this.onBlur,
             // If we have a click listener,
             // we bind it to execute on click and forward the click event
-            ...!!i && {
-              click: (H) => {
-                i && i(H);
+            ...!!o && {
+              click: (K) => {
+                o && o(K);
               }
             }
           }
         },
         [
-          e("template", { slot: "icon" }, [l]),
-          h
+          e("template", { slot: "icon" }, [n]),
+          b
         ]
       );
-    }, f = (t) => {
-      var i, r;
-      const l = ((i = this.$slots.icon) == null ? void 0 : i[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
+    }, v = (t) => {
+      var i, o;
+      const n = ((i = this.$slots.icon) == null ? void 0 : i[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
         props: {
           size: 20
         }
-      })), n = () => c || this.opened ? this.opened.toString() : null;
+      }));
       return e(
         "NcPopover",
         {
@@ -326,7 +344,10 @@ const d = ".focusable", J = {
             boundary: this.boundariesElement,
             container: this.container,
             popoverBaseClass: "action-item__popper",
-            setReturnFocus: (r = this.$refs.menuButton) == null ? void 0 : r.$el
+            // Menu and navigation should not have focus trap
+            // Tab should close the menu and move focus to the next UI element
+            setReturnFocus: this.isSemanticPopoverLike ? (o = this.$refs.menuButton) == null ? void 0 : o.$el : null,
+            focusTrap: this.isSemanticPopoverLike
           },
           // For some reason the popover component
           // does not react to props given under the 'props' key,
@@ -351,23 +372,23 @@ const d = ".focusable", J = {
             class: "action-item__menutoggle",
             props: {
               type: this.triggerBtnType,
-              disabled: this.disabled,
-              ariaHidden: this.ariaHidden
+              disabled: this.disabled
             },
             slot: "trigger",
             ref: "menuButton",
             attrs: {
-              "aria-haspopup": c ? null : "menu",
+              "aria-haspopup": this.isSemanticMenu ? null : "menu",
               "aria-label": this.menuName ? null : this.ariaLabel,
               "aria-controls": this.opened ? this.randomId : null,
-              "aria-expanded": n()
+              // Do not add aria-expanded="true" when it is closed
+              "aria-expanded": this.opened ? "true" : void 0
             },
             on: {
               focus: this.onFocus,
               blur: this.onBlur
             }
           }, [
-            e("template", { slot: "icon" }, [l]),
+            e("template", { slot: "icon" }, [n]),
             this.menuName
           ]),
           e("div", {
@@ -387,7 +408,7 @@ const d = ".focusable", J = {
               attrs: {
                 id: this.randomId,
                 tabindex: "-1",
-                role: c ? null : "menu"
+                role: this.isSemanticMenu ? "menu" : void 0
               }
             }, [
               t
@@ -396,12 +417,12 @@ const d = ".focusable", J = {
         ]
       );
     };
-    if (s.length === 1 && o.length === 1 && !this.forceMenu)
-      return a(o[0]);
+    if (s.length === 1 && l.length === 1 && !this.forceMenu)
+      return g(l[0]);
     if (this.$nextTick(() => {
       this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
-    }), o.length > 0 && this.inline > 0) {
-      const t = o.slice(0, this.inline), l = s.filter((n) => !t.includes(n));
+    }), l.length > 0 && this.inline > 0) {
+      const t = l.slice(0, this.inline), n = s.filter((i) => !t.includes(i));
       return e(
         "div",
         {
@@ -412,9 +433,9 @@ const d = ".focusable", J = {
         },
         [
           // Render inline actions
-          ...t.map(a),
+          ...t.map(g),
           // render the rest within the popover menu
-          l.length > 0 ? e(
+          n.length > 0 ? e(
             "div",
             {
               class: [
@@ -425,7 +446,7 @@ const d = ".focusable", J = {
               ]
             },
             [
-              f(l)
+              v(n)
             ]
           ) : null
         ]
@@ -443,20 +464,20 @@ const d = ".focusable", J = {
         ]
       },
       [
-        f(s)
+        v(s)
       ]
     );
   }
-}, Q = null, X = null;
-var Y = /* @__PURE__ */ j.normalizeComponent(
-  J,
-  Q,
-  X,
+}, te = null, se = null;
+var ne = /* @__PURE__ */ X.normalizeComponent(
+  ee,
+  te,
+  se,
   !1,
   null,
-  "f797c400",
+  "7baca6e4",
   null,
   null
 );
-const Z = Y.exports;
-module.exports = Z;
+const ie = ne.exports;
+module.exports = ie;