@nextcloud/vue 9.0.0 → 9.1.0

package/dist/chunks/{NcAppSettingsDialog-CAVz10A2.mjs → NcAppSettingsDialog-BZzj8jNU.mjs}

@@ -1,10 +1,10 @@
-import '../assets/NcAppSettingsDialog-Csh7L4r1.css';
-import { defineComponent, mergeModels, useModel, useSlots, provide, useTemplateRef, ref, computed, warn, createBlock, createCommentVNode, openBlock, unref, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList, withKeys, withModifiers, normalizeClass, toDisplayString } from "vue";
+import '../assets/NcAppSettingsDialog-Dcv235GW.css';
+import { defineComponent, mergeModels, useModel, provide, useTemplateRef, ref, computed, onBeforeUnmount, warn, createBlock, createCommentVNode, openBlock, unref, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList, withKeys, withModifiers, normalizeClass, toDisplayString } from "vue";
 import debounce from "debounce";
-import { N as NcDialog } from "./NcDialog-CdAQQLxt.mjs";
+import { N as NcDialog } from "./NcDialog-BgzJN2XT.mjs";
 import { _ as _sfc_main$1 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { useIsMobile } from "../composables/useIsMobile/index.mjs";
-import { r as register, a as t } from "./_l10n-DbErv0fW.mjs";
+import { r as register, a as t } from "./_l10n-YZMLsK4O.mjs";
 import { A as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-Dn48dw1k.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
 register();
@@ -33,7 +33,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const open = useModel(__props, "open");
     const props = __props;
-    const slots = useSlots();
     provide(APP_SETTINGS_REGISTRATION_KEY, {
       registerSection,
       unregisterSection
@@ -51,6 +50,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         document.activeElement.blur();
       }
     }, 300);
+    const sectionsOrderMap = /* @__PURE__ */ new Map();
+    onBeforeUnmount(() => {
+      sectionsOrderMap.clear();
+    });
     function handleSettingsNavigationClick(item) {
       linkClicked.value = true;
       document.getElementById("settings-section_" + item).scrollIntoView({
@@ -74,17 +77,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         unfocusNavigationItem();
       }
     }
-    function registerSection(id, name, icon) {
+    function registerSection(id, name, order, icon) {
       if (registeredSections.value.some(({ id: otherId }) => id === otherId)) {
         throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
       }
       if (registeredSections.value.some(({ name: otherName }) => name === otherName)) {
         warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
       }
-      const newSections = [...registeredSections.value, { id, name, icon }];
-      registeredSections.value = newSections.sort(({ id: idA }, { id: idB }) => {
-        const indexOf = (id2) => slots.default?.().findIndex((vnode) => vnode?.props?.id === id2) ?? -1;
-        return indexOf(idA) - indexOf(idB);
+      if (order !== void 0) {
+        sectionsOrderMap.set(id, order);
+      } else if (sectionsOrderMap.has(id)) {
+        order = sectionsOrderMap.get(id);
+      } else {
+        order = Math.max(0, ...sectionsOrderMap.values()) + 1;
+        sectionsOrderMap.set(id, order);
+      }
+      registeredSections.value = [...registeredSections.value, { id, name, order, icon }].sort(({ order: orderA }, { order: orderB }) => {
+        return orderA - orderB;
       });
       if (registeredSections.value.length === 1) {
         selectedSection.value = id;
@@ -157,8 +166,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5f3b5743"]]);
+const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-69d0fb0e"]]);
 export {
   NcAppSettingsDialog as N
 };
-//# sourceMappingURL=NcAppSettingsDialog-CAVz10A2.mjs.map
+//# sourceMappingURL=NcAppSettingsDialog-BZzj8jNU.mjs.map

package/dist/chunks/NcAppSettingsDialog-BZzj8jNU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-BZzj8jNU.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot, VNode } from 'vue'\n\nimport debounce from 'debounce'\nimport { computed, onBeforeUnmount, provide, ref, useTemplateRef, warn } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport { APP_SETTINGS_REGISTRATION_KEY } from './useAppSettingsDialog.ts'\n\nexport interface IAppSettingsSection {\n\tid: string\n\tname: string\n\torder?: number\n\ticon?: VNode[]\n}\n\n/**\n * Determines the open / closed state of the modal\n */\nconst open = defineModel<boolean>('open', { required: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Shows the navigation on desktop if true\n\t */\n\tshowNavigation?: boolean\n\n\t/**\n\t * Selector for the popover container\n\t */\n\tcontainer?: string\n\n\t/**\n\t * Name of the settings\n\t */\n\tname?: string\n\n\t/**\n\t * Additional elements to add to the focus trap\n\t */\n\tadditionalTrapElements?: (string | HTMLElement)[]\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n})\n\ndefineSlots<{\n\t/**\n\t * The NcAppSettingsSections\n\t */\n\tdefault?: Slot\n}>()\n\nprovide(APP_SETTINGS_REGISTRATION_KEY, {\n\tregisterSection,\n\tunregisterSection,\n})\n\nconst settingsScrollerElement = useTemplateRef('settingsScroller')\n\nconst isMobile = useIsMobile()\n\nconst selectedSection = ref('')\nconst linkClicked = ref(false)\nconst registeredSections = ref<IAppSettingsSection[]>([])\n\nconst hasNavigation = computed(() => !isMobile.value && props.showNavigation)\n\n/**\n * Check if one or more navigation entries provide icons\n */\nconst hasNavigationIcons = computed(() => registeredSections.value.some(({ icon }) => !!icon))\n\n/**\n * Remove selected section once the user starts scrolling\n */\nconst unfocusNavigationItem = debounce(() => {\n\tselectedSection.value = ''\n\tif (document.activeElement?.className.includes('navigation-list__link')) {\n\t\t(document.activeElement as HTMLElement).blur()\n\t}\n}, 300)\n\n/**\n * Fallback order map to keep track of section orders if not provided by child components\n */\nconst sectionsOrderMap = new Map()\nonBeforeUnmount(() => {\n\tsectionsOrderMap.clear()\n})\n\n/**\n * Scrolls the content to the selected settings section.absolute\n *\n * @param item - the ID of the section\n */\nfunction handleSettingsNavigationClick(item: string) {\n\tlinkClicked.value = true\n\tdocument.getElementById('settings-section_' + item)!.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tinline: 'nearest',\n\t})\n\tselectedSection.value = item\n\tsetTimeout(() => {\n\t\tlinkClicked.value = false\n\t}, 1000)\n}\n\n/**\n * Reset the dialog state when closed to have a clean state if re-opened.\n *\n * @param isOpen - The new modal open state\n */\nfunction handleCloseModal(isOpen: boolean) {\n\tif (isOpen) {\n\t\treturn\n\t}\n\n\topen.value = false\n\t// reset the scrolling state if the modal is just hidden\n\tsettingsScrollerElement.value!.scrollTop = 0\n}\n\n/**\n * When scrolled manually we remove the focus from the navigation item.\n */\nfunction handleScroll() {\n\tif (open.value && !linkClicked.value) {\n\t\tunfocusNavigationItem()\n\t}\n}\n\n/**\n * Called when a new section is registered\n *\n * @param id - The section ID\n * @param name - The section name\n * @param order - Optional section order in navigation list\n * @param icon - Optional icon component\n */\nfunction registerSection(id: string, name: string, order?: number, icon?: VNode[]) {\n\t// Check for the uniqueness of section names\n\tif (registeredSections.value.some(({ id: otherId }) => id === otherId)) {\n\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t}\n\tif (registeredSections.value.some(({ name: otherName }) => name === otherName)) {\n\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t}\n\n\t// Ensure tab order is set\n\tif (order !== undefined) {\n\t\tsectionsOrderMap.set(id, order)\n\t} else if (sectionsOrderMap.has(id)) {\n\t\torder = sectionsOrderMap.get(id)\n\t} else {\n\t\t// Fallback to the closest positive number that isn't already taken\n\t\torder = Math.max(0, ...sectionsOrderMap.values()) + 1\n\t\tsectionsOrderMap.set(id, order)\n\t}\n\n\t// Sort sections by order in slots\n\tregisteredSections.value = [...registeredSections.value, { id, name, order, icon }]\n\t\t.sort(({ order: orderA }, { order: orderB }) => {\n\t\t\treturn orderA! - orderB!\n\t\t})\n\n\t// If this is the first section registered, set it as selected\n\tif (registeredSections.value.length === 1) {\n\t\tselectedSection.value = id\n\t}\n}\n\n/**\n * Called when a section is unregistered to remove it from dialog\n *\n * @param id - The section ID\n */\nfunction unregisterSection(id: string) {\n\tregisteredSections.value = registeredSections.value\n\t\t.filter(({ id: otherId }) => id !== otherId)\n\n\t// If the current section is unregistered, set the first section as selected\n\tif (selectedSection.value === id) {\n\t\tselectedSection.value = registeredSections.value[0]?.id ?? ''\n\t}\n}\n</script>\n\n<template>\n\t<NcDialog\n\t\tv-if=\"open\"\n\t\tclass=\"app-settings\"\n\t\tcontent-classes=\"app-settings__content\"\n\t\tnavigation-classes=\"app-settings__navigation\"\n\t\t:additional-trap-elements\n\t\t:container\n\t\tclose-on-click-outside\n\t\t:navigation-aria-label=\"t('Settings navigation')\"\n\t\tsize=\"large\"\n\t\t:name\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul\n\t\t\t\tv-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in registeredSections\" :key=\"section.id\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t:aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\tclass=\"navigation-list__link\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\" @scroll=\"handleScroll\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: calc(4 * var(--default-grid-baseline));\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\toverflow-y: auto;\n\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: var(--default-clickable-area);\n\t\tmargin: 4px 0;\n\t\tline-height: var(--default-clickable-area);\n\t\tborder-radius: var(--border-radius-element);\n\t\tfont-weight: bold;\n\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\tgap: var(--default-grid-baseline);\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nSections order in navigation list is defined during initial rendering.\nIn case of dynamic/conditional sections rendering explicit `order` prop must be used for ordering.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\" :order=\"1\">\n\t\t\t\tSome example content\n\t\t\t\t<NcCheckboxRadioSwitch v-model=\"showExtraSections\">Show section 3</NcCheckboxRadioSwitch>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\" :order=\"2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<template v-if=\"showExtraSections\">\n\t\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\" :order=\"3\">\n\t\t\t\t\tSome example content\n\t\t\t\t</NcAppSettingsSection>\n\t\t\t</template>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\" :order=\"4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsettingsOpen: false,\n\t\t\t\tshowExtraSections: true,\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n</docs>\n"],"names":["_useModel","_createBlock","additionalTrapElements","container","_unref","name","_createElementVNode","_renderSlot","_withCtx","_openBlock","_createElementBlock","_Fragment","_renderList","_withModifiers","_withKeys","NcVNodes","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcAppSettingsSection-urZiy9aH.mjs

@@ -0,0 +1,54 @@
+import '../assets/NcAppSettingsSection-DIVdlb0g.css';
+import { defineComponent, useSlots, computed, watch, onMounted, onBeforeUnmount, createElementBlock, openBlock, createElementVNode, renderSlot, toDisplayString } from "vue";
+import { l as logger } from "./logger-D3RVzcfQ.mjs";
+import { u as useAppSettingsDialog } from "./useAppSettingsDialog-Dn48dw1k.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _hoisted_1 = ["id", "aria-labelledby"];
+const _hoisted_2 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSettingsSection",
+  props: {
+    name: {},
+    id: {},
+    order: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const { registerSection, unregisterSection } = useAppSettingsDialog();
+    const htmlId = computed(() => "settings-section_" + props.id);
+    watch(() => props.id, () => {
+      if (!/^[a-z0-9\-_]+$/.test(props.id)) {
+        logger.warn(`Invalid id prop: ${props.id}. Only alphanumeric, dash and underscore are allowed.`);
+      }
+    }, { immediate: true });
+    watch([() => props.id, () => props.name, () => props.order], ([newId, newName, newOrder], [oldId, ,]) => {
+      unregisterSection(oldId);
+      registerSection(newId, newName, newOrder, slots?.icon?.());
+    });
+    onMounted(() => {
+      registerSection(props.id, props.name, props.order, slots?.icon?.());
+    });
+    onBeforeUnmount(() => {
+      unregisterSection(props.id);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("section", {
+        id: htmlId.value,
+        "aria-labelledby": `${htmlId.value}--label`,
+        class: "app-settings-section"
+      }, [
+        createElementVNode("h3", {
+          id: `${htmlId.value}--label`,
+          class: "app-settings-section__name"
+        }, toDisplayString(_ctx.name), 9, _hoisted_2),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78ad5bf4"]]);
+export {
+  NcAppSettingsSection as N
+};
+//# sourceMappingURL=NcAppSettingsSection-urZiy9aH.mjs.map

package/dist/chunks/NcAppSettingsSection-urZiy9aH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-urZiy9aH.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nconst props = defineProps<{\n\t/** Name of the section */\n\tname: string\n\t/** The id of the section */\n\tid: string\n\t/** The id of the section */\n\torder?: number\n}>()\n\nconst slots = defineSlots<{\n\t/** Section content */\n\tdefault?: Slot\n\t/** Optional icon for the section in the navigation */\n\ticon?: Slot\n}>()\n\nconst { registerSection, unregisterSection } = useAppSettingsDialog()\n\nconst htmlId = computed(() => 'settings-section_' + props.id)\n\n// Validate id prop - only alphanumeric, dash and underscore\nwatch(() => props.id, () => {\n\tif (!/^[a-z0-9\\-_]+$/.test(props.id)) {\n\t\tlogger.warn(`Invalid id prop: ${props.id}. Only alphanumeric, dash and underscore are allowed.`)\n\t}\n}, { immediate: true })\n\n// Reactive changes for section navigation\nwatch([() => props.id, () => props.name, () => props.order], (\n\t[newId, newName, newOrder],\n\t[oldId, ,],\n) => {\n\tunregisterSection(oldId)\n\tregisterSection(newId, newName, newOrder, slots?.icon?.())\n})\n\nonMounted(() => {\n\tregisterSection(props.id, props.name, props.order, slots?.icon?.())\n})\n\nonBeforeUnmount(() => {\n\tunregisterSection(props.id)\n})\n</script>\n\n<template>\n\t<section :id=\"htmlId\" :aria-labelledby=\"`${htmlId}--label`\" class=\"app-settings-section\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t</section>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 1.6em;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","_createElementVNode","name","_renderSlot"],"mappings":";;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AASd,UAAM,QAAQA,SAAA;AAOd,UAAM,EAAE,iBAAiB,kBAAA,IAAsB,qBAAA;AAE/C,UAAM,SAAS,SAAS,MAAM,sBAAsB,MAAM,EAAE;AAG5D,UAAM,MAAM,MAAM,IAAI,MAAM;AAC3B,UAAI,CAAC,iBAAiB,KAAK,MAAM,EAAE,GAAG;AACrC,eAAO,KAAK,oBAAoB,MAAM,EAAE,uDAAuD;AAAA,MAChG;AAAA,IACD,GAAG,EAAE,WAAW,MAAM;AAGtB,UAAM,CAAC,MAAM,MAAM,IAAI,MAAM,MAAM,MAAM,MAAM,MAAM,KAAK,GAAG,CAC5D,CAAC,OAAO,SAAS,QAAQ,GACzB,CAAC,cACG;AACJ,wBAAkB,KAAK;AACvB,sBAAgB,OAAO,SAAS,UAAU,OAAO,QAAQ;AAAA,IAC1D,CAAC;AAED,cAAU,MAAM;AACf,sBAAgB,MAAM,IAAI,MAAM,MAAM,MAAM,OAAO,OAAO,QAAQ;AAAA,IACnE,CAAC;AAED,oBAAgB,MAAM;AACrB,wBAAkB,MAAM,EAAE;AAAA,IAC3B,CAAC;;0BAIAC,mBAKU,WAAA;AAAA,QALA,IAAI,OAAA;AAAA,QAAS,sBAAoB,OAAA,KAAM;AAAA,QAAW,OAAM;AAAA,MAAA;QACjEC,mBAEK,MAAA;AAAA,UAFA,OAAO,OAAA,KAAM;AAAA,UAAW,OAAM;AAAA,QAAA,mBAC/BC,KAAAA,IAAI,GAAA,GAAA,UAAA;AAAA,QAERC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,MAAA;;;;;"}

package/dist/chunks/NcAppSettingsSectionShortcuts-CK8lXUxx.mjs

@@ -0,0 +1,38 @@
+import '../assets/NcAppSettingsSectionShortcuts-CRO4RakN.css';
+import { defineComponent, createBlock, openBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
+import { N as NcAppSettingsSection } from "./NcAppSettingsSection-urZiy9aH.mjs";
+import { r as register, a as t } from "./_l10n-YZMLsK4O.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSettingsSectionShortcuts",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NcAppSettingsSection, {
+        id: "keyboard-shortcuts",
+        name: unref(t)("Keyboard shortcuts")
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(_ctx.$style.appSettingsSectionShortcuts)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["name"]);
+    };
+  }
+});
+const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_1trvh_2";
+const style0 = {
+  appSettingsSectionShortcuts
+};
+const cssModules = {
+  "$style": style0
+};
+const NcAppSettingsSectionShortcuts = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  NcAppSettingsSectionShortcuts as N
+};
+//# sourceMappingURL=NcAppSettingsSectionShortcuts-CK8lXUxx.mjs.map

package/dist/chunks/NcAppSettingsSectionShortcuts-CK8lXUxx.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSectionShortcuts-CK8lXUxx.mjs","sources":["../../src/components/NcAppSettingsSectionShortcuts/NcAppSettingsSectionShortcuts.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport NcAppSettingsSection from '../NcAppSettingsSection/NcAppSettingsSection.vue'\nimport { t } from '../../l10n.ts'\n\ndefineSlots<{\n\t/**\n\t * Shortcuts described via <NcHotkeyList> components\n\t */\n\tdefault?: Slot\n}>()\n</script>\n\n<template>\n\t<NcAppSettingsSection id=\"keyboard-shortcuts\" :name=\"t('Keyboard shortcuts')\">\n\t\t<div :class=\"$style.appSettingsSectionShortcuts\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcAppSettingsSection>\n</template>\n\n<style module>\n.appSettingsSectionShortcuts {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(4 * var(--default-grid-baseline));\n}\n</style>\n\n<docs>\nA special `NcAppSettingsSection` for listing keyboard shortcuts using `<NcHotkeyList>` and `<NcHotkey>` components with predefined heading and gap between hotkey lists.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\topen: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"open = true\">App Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"open\" name=\"Application settings\" show-navigation>\n\t\t\t<NcAppSettingsSectionShortcuts>\n\t\t\t\t<NcHotkeyList label=\"Actions\">\n\t\t\t\t\t<NcHotkey label=\"File actions\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Rename\" hotkey=\"F2\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Add or remove favorite\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Manage tags\" hotkey=\"T\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Selection\">\n\t\t\t\t\t<NcHotkey label=\"Select all files\" hotkey=\"Control A\" />\n\t\t\t\t\t<NcHotkey label=\"Deselect all\" hotkey=\"Escape\" />\n\t\t\t\t\t<NcHotkey label=\"Select or deselect\" hotkey=\"Control Space\" />\n\t\t\t\t\t<NcHotkey label=\"Select a range\" hotkey=\"Control Shift Space\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"Navigation\">\n\t\t\t\t\t<NcHotkey label=\"Go to parent folder\" hotkey=\"Alt ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file above\" hotkey=\"ArrowUp\" />\n\t\t\t\t\t<NcHotkey label=\"Go to file below\" hotkey=\"ArrowDown\" />\n\t\t\t\t\t<NcHotkey label=\"Go left in grid\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Go right in grid\" hotkey=\"ArrowRight\" />\n\t\t\t\t</NcHotkeyList>\n\n\t\t\t\t<NcHotkeyList label=\"View\">\n\t\t\t\t\t<NcHotkey label=\"Toggle grid view\" hotkey=\"V\" />\n\t\t\t\t\t<NcHotkey label=\"Open file sidebar\" hotkey=\"D\" />\n\t\t\t\t\t<NcHotkey label=\"Show those shortcuts\" hotkey=\"?\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsSectionShortcuts>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createBlock","_unref","_createElementVNode","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;0BAoBCA,YAIuB,sBAAA;AAAA,QAJD,IAAG;AAAA,QAAsB,MAAMC,MAAA,CAAA,EAAC,oBAAA;AAAA,MAAA;yBACrD,MAEM;AAAA,UAFNC,mBAEM,OAAA;AAAA,YAFA,OAAKC,eAAEC,KAAAA,OAAO,2BAA2B;AAAA,UAAA;YAC9CC,WAAQ,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSidebar-DhIHNv38.mjs → NcAppSidebar-Du9lcG-G.mjs}

@@ -1,25 +1,25 @@
-import '../assets/NcAppSidebar-RFBRejzg.css';
+import '../assets/NcAppSidebar-aGrIJ9f6.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
-import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, resolveComponent, withKeys, withModifiers, Fragment, renderList, createBlock, normalizeClass, withCtx, createVNode, renderSlot, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, vShow, createTextVNode, warn, ref, provide } from "vue";
+import { createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, toDisplayString, defineComponent, mergeModels, useModel, normalizeClass, createVNode, withCtx, resolveComponent, withKeys, withModifiers, Fragment, renderList, createBlock, renderSlot, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, vShow, createTextVNode, warn, ref, provide } from "vue";
 import { I as IconArrowRight } from "./ArrowRight-DRKHUZMH.mjs";
 import { I as IconClose } from "./Close-D6ngJ4t9.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-CrehrqO8.mjs";
-import { _ as _sfc_main$5 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
+import { getCanonicalLocale } from "@nextcloud/l10n";
+import { _ as _sfc_main$6 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { useIsSmallMobile } from "../composables/useIsMobile/index.mjs";
 import directive from "../directives/Focus/index.mjs";
-import { r as register, z as t15, a as t } from "./_l10n-DbErv0fW.mjs";
+import { r as register, D as t15, a as t } from "./_l10n-YZMLsK4O.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { g as getTrapStack } from "./focusTrap-HJQ4pqHV.mjs";
-import { i as isSlotPopulated, N as NcActions } from "./NcActions-DSYz-dfd.mjs";
+import { i as isSlotPopulated, N as NcActions } from "./NcActions-C-E6BGfZ.mjs";
 import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { _ as _sfc_main$6 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
+import { _ as _sfc_main$7 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
 import { N as NcButton } from "./NcButton-DkC5k3Lb.mjs";
 import { C as CONTENT_SELECTOR_KEY } from "./constants-DrSznhwy.mjs";
-import { N as NcEmptyContent } from "./NcEmptyContent-BdOezubv.mjs";
+import { N as NcEmptyContent } from "./NcEmptyContent-B8-90BSI.mjs";
 import { N as NcLoadingIcon } from "./NcLoadingIcon-b_ajZ_nQ.mjs";
-const _sfc_main$4 = {
+const _sfc_main$5 = {
   name: "DockRightIcon",
   emits: ["click"],
   props: {
@@ -36,8 +36,8 @@ const _sfc_main$4 = {
     }
   }
 };
-const _hoisted_1$4 = ["aria-hidden", "aria-label"];
-const _hoisted_2$4 = ["fill", "width", "height"];
+const _hoisted_1$5 = ["aria-hidden", "aria-label"];
+const _hoisted_2$3 = ["fill", "width", "height"];
 const _hoisted_3$3 = { d: "M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z" };
 const _hoisted_4$3 = { key: 0 };
 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
@@ -58,11 +58,11 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("path", _hoisted_3$3, [
         $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$4))
-  ], 16, _hoisted_1$4);
+    ], 8, _hoisted_2$3))
+  ], 16, _hoisted_1$5);
 }
-const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
-const _sfc_main$3 = {
+const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$4]]);
+const _sfc_main$4 = {
   name: "StarIcon",
   emits: ["click"],
   props: {
@@ -79,8 +79,8 @@ const _sfc_main$3 = {
     }
   }
 };
-const _hoisted_1$3 = ["aria-hidden", "aria-label"];
-const _hoisted_2$3 = ["fill", "width", "height"];
+const _hoisted_1$4 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["fill", "width", "height"];
 const _hoisted_3$2 = { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" };
 const _hoisted_4$2 = { key: 0 };
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
@@ -101,11 +101,11 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("path", _hoisted_3$2, [
         $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$3))
-  ], 16, _hoisted_1$3);
+    ], 8, _hoisted_2$2))
+  ], 16, _hoisted_1$4);
 }
-const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-const _sfc_main$2 = {
+const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$3]]);
+const _sfc_main$3 = {
   name: "StarOutlineIcon",
   emits: ["click"],
   props: {
@@ -122,8 +122,8 @@ const _sfc_main$2 = {
     }
   }
 };
-const _hoisted_1$2 = ["aria-hidden", "aria-label"];
-const _hoisted_2$2 = ["fill", "width", "height"];
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
 const _hoisted_3$1 = { d: "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" };
 const _hoisted_4$1 = { key: 0 };
 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
@@ -144,15 +144,74 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("path", _hoisted_3$1, [
         $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
       ])
-    ], 8, _hoisted_2$2))
-  ], 16, _hoisted_1$2);
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$3);
 }
-const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$2]]);
+const _hoisted_1$2 = ["aria-selected", "tabindex"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "NcAppSidebarTabsButton",
+  props: /* @__PURE__ */ mergeModels({
+    tab: {}
+  }, {
+    "selected": { type: Boolean, ...{ required: true } },
+    "selectedModifiers": {}
+  }),
+  emits: ["update:selected"],
+  setup(__props) {
+    const selected = useModel(__props, "selected");
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        class: normalizeClass(["button-vue", [_ctx.$style.sidebarTabsButton, {
+          [_ctx.$style.sidebarTabsButton_selected]: selected.value
+        }]]),
+        role: "tab",
+        "aria-selected": selected.value,
+        tabindex: selected.value ? 0 : -1,
+        onClick: _cache[0] || (_cache[0] = ($event) => selected.value = true)
+      }, [
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.sidebarTabsButton__icon)
+        }, [
+          createVNode(_sfc_main$6, {
+            vnodes: _ctx.tab.renderIcon()
+          }, {
+            default: withCtx(() => [
+              createElementVNode("span", {
+                class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, _ctx.tab.icon])
+              }, null, 2)
+            ]),
+            _: 1
+          }, 8, ["vnodes"])
+        ], 2),
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.$style.sidebarTabsButton__name)
+        }, toDisplayString(_ctx.tab.name), 3)
+      ], 10, _hoisted_1$2);
+    };
+  }
+});
+const sidebarTabsButton = "_sidebarTabsButton_1y2dv_20";
+const sidebarTabsButton_selected = "_sidebarTabsButton_selected_1y2dv_45";
+const sidebarTabsButton__name = "_sidebarTabsButton__name_1y2dv_59";
+const sidebarTabsButton__icon = "_sidebarTabsButton__icon_1y2dv_70";
+const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_1y2dv_76";
+const style0 = {
+  "material-design-icon": "_material-design-icon_1y2dv_12",
+  sidebarTabsButton,
+  sidebarTabsButton_selected,
+  sidebarTabsButton__name,
+  sidebarTabsButton__icon,
+  sidebarTabsButton__legacyIcon
+};
+const cssModules = {
+  "$style": style0
+};
+const NcAppSidebarTabsButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__cssModules", cssModules]]);
 const _sfc_main$1 = {
   name: "NcAppSidebarTabs",
   components: {
-    NcCheckboxRadioSwitch,
-    NcVNodes: _sfc_main$5
+    NcAppSidebarTabsButton
   },
   provide() {
     return {
@@ -181,7 +240,7 @@ const _sfc_main$1 = {
     }
   },
   emits: ["update:active"],
-  data() {
+  data(props) {
     return {
       /**
        * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.
@@ -190,7 +249,7 @@ const _sfc_main$1 = {
       /**
        * Local active (open) tab's ID. It allows to use component without v-model:active
        */
-      activeTab: ""
+      activeTab: props.active
     };
   },
   computed: {
@@ -210,6 +269,11 @@ const _sfc_main$1 = {
     }
   },
   watch: {
+    tabs() {
+      if (this.active) {
+        this.updateActive();
+      }
+    },
     active(active) {
       if (active !== this.activeTab) {
         this.updateActive();
@@ -279,7 +343,7 @@ const _sfc_main$1 = {
      * Update the current active tab
      */
     updateActive() {
-      this.activeTab = this.active && this.tabs.some((tab) => tab.id === this.active) ? this.active : this.tabs.length > 0 ? this.tabs[0].id : "";
+      this.activeTab = this.active && this.tabs.some(({ id }) => id === this.active) ? this.active : this.tabs[0]?.id ?? "";
     },
     /**
      * Register child tab in the tabs
@@ -290,7 +354,7 @@ const _sfc_main$1 = {
       this.tabs.push(tab);
       this.tabs.sort((a, b) => {
         if (a.order === b.order) {
-          return OC.Util.naturalSortCompare(a.name, b.name);
+          return a.name.localeCompare(b.name, [getCanonicalLocale()]);
         }
         return a.order - b.order;
       });
@@ -313,10 +377,8 @@ const _sfc_main$1 = {
   }
 };
 const _hoisted_1$1 = { class: "app-sidebar-tabs" };
-const _hoisted_2$1 = { class: "app-sidebar-tabs__tab-caption" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcVNodes = resolveComponent("NcVNodes");
-  const _component_NcCheckboxRadioSwitch = resolveComponent("NcCheckboxRadioSwitch");
+  const _component_NcAppSidebarTabsButton = resolveComponent("NcAppSidebarTabsButton");
   return openBlock(), createElementBlock("div", _hoisted_1$1, [
     $options.hasMultipleTabs || $options.showForSingleTab ? (openBlock(), createElementBlock("div", {
       key: 0,
@@ -333,37 +395,15 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]
     }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.tabs, (tab) => {
-        return openBlock(), createBlock(_component_NcCheckboxRadioSwitch, {
+        return openBlock(), createBlock(_component_NcAppSidebarTabsButton, {
+          id: `tab-button-${tab.id}`,
           key: tab.id,
+          class: "app-sidebar-tabs__tab",
           "aria-controls": `tab-${tab.id}`,
-          "aria-selected": String($data.activeTab === tab.id),
-          "button-variant": true,
-          "model-value": $data.activeTab === tab.id,
-          "wrapper-id": `tab-button-${tab.id}`,
-          tabindex: $data.activeTab === tab.id ? 0 : -1,
-          "button-variant-grouped": "horizontal",
-          class: normalizeClass(["app-sidebar-tabs__tab", { active: tab.id === $data.activeTab }]),
-          role: "tab",
-          type: "button",
-          "onUpdate:modelValue": ($event) => $options.setActive(tab.id)
-        }, {
-          icon: withCtx(() => [
-            createVNode(_component_NcVNodes, {
-              vnodes: tab.renderIcon()
-            }, {
-              default: withCtx(() => [
-                createElementVNode("span", {
-                  class: normalizeClass(["app-sidebar-tabs__tab-icon", tab.icon])
-                }, null, 2)
-              ]),
-              _: 2
-            }, 1032, ["vnodes"])
-          ]),
-          default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$1, toDisplayString(tab.name), 1)
-          ]),
-          _: 2
-        }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]);
+          selected: $data.activeTab === tab.id,
+          tab,
+          "onUpdate:selected": ($event) => $options.setActive(tab.id)
+        }, null, 8, ["id", "aria-controls", "selected", "tab", "onUpdate:selected"]);
       }), 128))
     ], 32)) : createCommentVNode("", true),
     createElementVNode("div", {
@@ -373,13 +413,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ]);
 }
-const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-e06df142"]]);
+const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-1e2d5bfb"]]);
 register(t15);
 const _sfc_main = {
   name: "NcAppSidebar",
   components: {
     NcActions,
-    NcAppSidebarHeader: _sfc_main$6,
+    NcAppSidebarHeader: _sfc_main$7,
     NcAppSidebarTabs,
     NcButton,
     NcLoadingIcon,
@@ -999,8 +1039,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onAfterEnter", "onAfterLeave"]);
 }
-const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-3243b41e"]]);
+const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7d816760"]]);
 export {
   NcAppSidebar as N
 };
-//# sourceMappingURL=NcAppSidebar-DhIHNv38.mjs.map
+//# sourceMappingURL=NcAppSidebar-Du9lcG-G.mjs.map