@nextcloud/vue 9.9.0 → 9.11.0

package/dist/chunks/{NcAppSettingsDialog-BPcEYLjP.mjs → NcAppSettingsDialog.mjs}

@@ -1,14 +1,14 @@
-import '../assets/NcAppSettingsDialog-Dh_scIK4.css';
+import '../assets/NcAppSettingsDialog.css';
 import { defineComponent, inject, openBlock, createElementBlock, normalizeClass, unref, toDisplayString, useModel, provide, toRef, useTemplateRef, ref, computed, onBeforeUnmount, warn, createBlock, createSlots, withCtx, createElementVNode, renderSlot, createCommentVNode, Fragment, renderList, withKeys, withModifiers, mergeModels } from "vue";
 import debounce from "debounce";
-import { N as NcDialog } from "./NcDialog-D617YI0t.mjs";
-import { _ as _sfc_main$2 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
-import { u as useLocalizedAppName, A as APP_VERSION } from "./appName-DyNMVZpX.mjs";
-import { A as APP_SETTINGS_LEGACY_DESIGN_KEY, a as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog-C73Wx6iQ.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { N as NcDialog } from "./NcDialog.mjs";
+import { _ as _sfc_main$2 } from "./NcVNodes.vue_vue_type_script_lang.mjs";
+import { u as useLocalizedAppName, A as APP_VERSION } from "./appName.mjs";
+import { A as APP_SETTINGS_LEGACY_DESIGN_KEY, a as APP_SETTINGS_REGISTRATION_KEY } from "./useAppSettingsDialog.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 import { useIsMobile } from "../composables/useIsMobile/index.mjs";
-import { r as register, I as t48, a as t } from "./_l10n-wdIzZwir.mjs";
-import { i as isLegacy34 } from "./legacy-BoqDmOCa.mjs";
+import { r as register, I as t49, a as t } from "./_l10n.mjs";
+import { i as isLegacy34 } from "./legacy.mjs";
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "NcAppSettingsDialogVersion",
   setup(__props) {
@@ -21,10 +21,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const appSettingsDialogVersion = "_appSettingsDialogVersion_Y2viq";
-const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_I-lpS";
+const appSettingsDialogVersion = "_appSettingsDialogVersion_e4tNO";
+const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_AeUZg";
 const style0 = {
-  "material-design-icon": "_material-design-icon_1zyjw",
+  "material-design-icon": "_material-design-icon_MFxpL",
   appSettingsDialogVersion,
   appSettingsDialogVersion__legacy
 };
@@ -32,7 +32,7 @@ const cssModules = {
   "$style": style0
 };
 const NcAppSettingsDialogVersion = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__cssModules", cssModules]]);
-register(t48);
+register(t49);
 const _hoisted_1 = {
   key: 0,
   class: "app-settings__title"
@@ -204,4 +204,4 @@ const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId"
 export {
   NcAppSettingsDialog as N
 };
-//# sourceMappingURL=NcAppSettingsDialog-BPcEYLjP.mjs.map
+//# sourceMappingURL=NcAppSettingsDialog.mjs.map

package/dist/chunks/NcAppSettingsDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialogVersion.vue","../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.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 { inject } from 'vue'\nimport { APP_VERSION, useLocalizedAppName } from '../../utils/appName.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY } from './useAppSettingsDialog.ts'\n\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\n\nconst localizedAppName = useLocalizedAppName()\n</script>\n\n<template>\n\t<div :class=\"[$style.appSettingsDialogVersion, { [$style.appSettingsDialogVersion__legacy]: legacy }]\">\n\t\t{{ localizedAppName }} {{ APP_VERSION }}\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.appSettingsDialogVersion {\n    --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n    color: var(--color-text-maxcontrast);\n    margin-block-end: calc(8 * var(--default-grid-baseline));\n    margin-inline: var(--form-element-label-offset);\n}\n\n.appSettingsDialogVersion__legacy {\n    margin-inline: 0;\n}\n</style>\n","<!--\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, toRef, useTemplateRef, warn } from 'vue'\nimport NcDialog from '../NcDialog/NcDialog.vue'\nimport NcVNodes from '../NcVNodes/NcVNodes.vue'\nimport NcAppSettingsDialogVersion from './NcAppSettingsDialogVersion.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, 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\t/**\n\t * Use legacy design without any requirements for the section content\n\t *\n\t * @deprecated The legacy design will be removed\n\t */\n\tlegacy?: boolean\n\n\t/**\n\t * Do not add the application version at the bottom of the dialog\n\t */\n\tnoVersion?: boolean\n}>(), {\n\tcontainer: 'body',\n\tname: '',\n\tadditionalTrapElements: () => [],\n\tlegacy: false,\n\tnoVersion: false,\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\nprovide(APP_SETTINGS_LEGACY_DESIGN_KEY, toRef(() => props.legacy))\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\t:class=\"{ 'app-settings--legacy': isLegacy34 }\"\n\t\tcontentClasses=\"app-settings__content\"\n\t\tnavigationClasses=\"app-settings__navigation\"\n\t\t:additionalTrapElements\n\t\t:container\n\t\tcloseOnClickOutside\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<div v-if=\"!isLegacy34\" class=\"app-settings__title\">\n\t\t\t\t{{ name }}\n\t\t\t</div>\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\t<NcAppSettingsDialogVersion v-if=\"!noVersion\" />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<style lang=\"scss\" scoped>\n$navigation-width: 200px;\n$content-inset: calc(3 * var(--default-grid-baseline));\n\n.app-settings:not(.app-settings--legacy) {\n\t--nav-tint: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--nav-tint-strong: var(--color-primary-element-light);\n\n\t// Apply styles to parent dialog, do not affect nested ones\n\t& > :deep(.modal-wrapper > .modal-container) {\n\t\tpadding-inline-start: 0 !important;\n\t\tpadding-block-start: 0 !important;\n\t\tbackground-color: var(--nav-tint);\n\t\toverflow: hidden;\n\t\tmax-width: 900px;\n\n\t\t// Title is rendered inside the navigation slot; hide the native h2 but\n\t\t// keep it in the a11y tree so the modal still has its accessible name.\n\t\t& > .modal-container__content > .dialog__name {\n\t\t\tposition: absolute;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\tmargin: -1px;\n\t\t\tpadding: 0;\n\t\t\toverflow: hidden;\n\t\t\tclip-path: inset(100%);\n\t\t\twhite-space: nowrap;\n\t\t\tborder: 0;\n\t\t}\n\t}\n\n\t:deep(.app-settings__navigation) {\n\t\tmin-width: $navigation-width;\n\t\tmax-width: $navigation-width;\n\t\tflex: 0 0 $navigation-width;\n\t\t// Beat NcDialog's default 20px end-margin so the tint meets the content.\n\t\tmargin-inline-end: 0 !important;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\n\t:deep(.app-settings__content) {\n\t\tpadding: $content-inset;\n\t\tbackground-color: var(--color-main-background);\n\t\tborder-inline-start: 1px solid var(--color-border-dark);\n\t\tborder-start-start-radius: var(--border-radius-element);\n\t\tborder-end-start-radius: var(--border-radius-element);\n\t}\n\n\t.app-settings__title {\n\t\tbox-sizing: border-box;\n\t\tpadding: $content-inset;\n\t\tmargin: 0;\n\t\tfont-size: 20px;\n\t\tfont-weight: 700;\n\t}\n\n\t.navigation-list {\n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t\tpadding: var(--default-grid-baseline);\n\n\t\t&__link {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tfont-size: var(--default-font-size);\n\t\t\tfont-weight: 500;\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin: 2px 0;\n\t\t\tline-height: var(--default-clickable-area);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tpadding-inline: calc(2 * var(--default-grid-baseline));\n\t\t\tcursor: pointer;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\tcolor: var(--color-main-text);\n\n\t\t\t&:hover,\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: color-mix(in srgb, var(--color-primary-element) 8%, transparent);\n\t\t\t}\n\n\t\t\t&:focus-visible {\n\t\t\t\toutline: 2px solid var(--color-main-text);\n\t\t\t\toutline-offset: -2px;\n\t\t\t}\n\n\t\t\t&--active {\n\t\t\t\tbackground-color: var(--nav-tint-strong);\n\n\t\t\t\t&:hover,\n\t\t\t\t&:focus-visible {\n\t\t\t\t\tbackground-color: var(--color-primary-element-light-hover);\n\t\t\t\t}\n\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: '';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tinset-block: var(--default-grid-baseline);\n\t\t\t\t\tinset-inline-start: 0;\n\t\t\t\t\twidth: 3px;\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tborder-radius: 999px;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--icon {\n\t\t\t\tgap: var(--default-grid-baseline);\n\t\t\t}\n\n\t\t\t&-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-content: center;\n\t\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t}\n\t\t}\n\t}\n\n}\n\n@media only screen and (width < $breakpoint-mobile) {\n\t.app-settings:not(.app-settings--legacy) {\n\t\t// Apply styles to parent dialog, do not affect nested ones\n\t\t& > :deep(.modal-wrapper > .modal-container) {\n\t\t\tpadding-inline-start: 12px !important;\n\t\t\tpadding-block-start: 4px !important;\n\t\t\tbackground-color: var(--color-main-background);\n\n\t\t\t& > .modal-container__content > .dialog__name {\n\t\t\t\tposition: static;\n\t\t\t\twidth: auto;\n\t\t\t\theight: auto;\n\t\t\t\tmargin: 0 0 12px 0;\n\t\t\t\tpadding-inline-end: var(--default-clickable-area);\n\t\t\t\toverflow: visible;\n\t\t\t\tclip-path: none;\n\t\t\t\twhite-space: normal;\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t\t:deep(.app-settings__content) {\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t}\n\t}\n}\n\n// Legacy design (NC < 34): keep the original centered-title layout.\n.app-settings.app-settings--legacy {\n\t:deep(.app-settings__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\n\t:deep(.app-settings__content) {\n\t\tpadding-inline: calc(4 * var(--default-grid-baseline));\n\t}\n\n\t.navigation-list {\n\t\theight: 100%;\n\t\toverflow-y: auto;\n\t\tpadding: calc(3 * var(--default-grid-baseline));\n\n\t\t&__link {\n\t\t\tdisplay: flex;\n\t\t\talign-content: center;\n\t\t\tfont-size: 16px;\n\t\t\theight: var(--default-clickable-area);\n\t\t\tmargin: 4px 0;\n\t\t\tline-height: var(--default-clickable-area);\n\t\t\tborder-radius: var(--border-radius-element);\n\t\t\tfont-weight: var(--font-weight-element, bold);\n\t\t\tpadding: 0 calc(4 * var(--default-grid-baseline));\n\t\t\tcursor: pointer;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\toverflow: hidden;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\n\t\t\t&:hover,\n\t\t\t&:focus {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t}\n\n\t\t\t&--active {\n\t\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t\t}\n\n\t\t\t&--icon {\n\t\t\t\tpadding-inline-start: calc(2 * var(--default-grid-baseline));\n\t\t\t\tgap: var(--default-grid-baseline);\n\t\t\t}\n\n\t\t\t&-icon {\n\t\t\t\tdisplay: flex;\n\t\t\t\tjustify-content: center;\n\t\t\t\talign-content: center;\n\t\t\t\twidth: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t\tmax-width: calc(var(--default-clickable-area) - 2 * var(--default-grid-baseline));\n\t\t\t}\n\t\t}\n\t}\n\n\t@media only screen and (max-width: $breakpoint-small-mobile) {\n\t\t.app-settings:not(.app-settings--legacy) {\n\t\t\t// Apply styles to parent dialog, do not affect nested ones\n\t\t\t& > :deep(.modal-wrapper > .modal-container) {\n\t\t\t\t& > .modal-container__content > .dialog__name {\n\t\t\t\t\tpadding-inline-start: 16px;\n\t\t\t\t}\n\t\t\t}\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\" legacy>\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\" legacy>\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\" legacy>\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\n### New design\n\n```vue\n<script>\nimport { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline } from '@mdi/js'\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiPlus, mdiDomain, mdiDockLeft, mdiDockBottom, mdiListBoxOutline, mdiPencilOutline, mdiTrashCanOutline, mdiMedalOutline, mdiEmailOutline }\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t\tswitchValue: true,\n\t\t\tlayout: 'vertical',\n\t\t\tsorting: 'asc',\n\t\t\treply: 'top',\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Mail Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"general\" name=\"General\">\n\t\t\t\t<NcButton wide>Set as default mail app</NcButton>\n\n\t\t\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tAdd mail account\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"appearance\" name=\"Appearance\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Show all messages in thread\"\n\t\t\t\t\t\tdescription=\"When off, only the selected messages will be shown\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"layout\" label=\"Layout\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Vertical\" value=\"vertical\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockLeft\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"Horizontal\" value=\"horizontal\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDockBottom\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t\t<NcRadioGroupButton label=\"List\" value=\"list\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiListBoxOutline\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcRadioGroupButton>\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcRadioGroup v-model=\"sorting\" label=\"Sorting\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Newest first\" value=\"asc\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Oldest first\" value=\"desc\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"messages\" name=\"Messages\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Avatars from Gravatar and favicons\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Determine importance using machine learning\" />\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Search the body of messages in Priority inbox\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcRadioGroup v-model=\"reply\" label=\"Reply position\">\n\t\t\t\t\t<NcRadioGroupButton label=\"Top\" value=\"top\" />\n\t\t\t\t\t<NcRadioGroupButton label=\"Bottom\" value=\"bottom\" />\n\t\t\t\t</NcRadioGroup>\n\t\t\t\t<NcFormGroup\n\t\t\t\t\tlabel=\"Text blocks\"\n\t\t\t\t\tdescription=\"Reusable pieces of text that can be inserted in messages\">\n\t\t\t\t\t<NcListItem name=\"Title\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tContent\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"Reply\">\n\t\t\t\t\t\t<template #subname>\n\t\t\t\t\t\t\tThank you for contacting us!\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPencilOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"privacy\" name=\"Privacy\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\t\tlabel=\"Data collection\"\n\t\t\t\t\t\tdescription=\"Allow the app to collect and process data locally to adapt to your preferences\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Always show images from\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"mail@example.org\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"security\" name=\"Security\">\n\t\t\t\t<NcFormBox>\n\t\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Highlight external addresses\" />\n\t\t\t\t</NcFormBox>\n\t\t\t\t<NcFormGroup label=\"Internal addresses\">\n\t\t\t\t\t<NcListItem name=\"example.com\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcListItem name=\"example.company@example.net\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiEmailOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #extra-actions>\n\t\t\t\t\t\t\t<NcButton variant=\"tertiary\" #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiTrashCanOutline\" inline />\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcListItem>\n\t\t\t\t\t<NcButton wide>Add internal address</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"S/MIME\">\n\t\t\t\t\t<NcButton wide>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiMedalOutline\" inline />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tManage certificates\n\t\t\t\t\t</NcButton>\n\t\t\t\t</NcFormGroup>\n\t\t\t\t<NcFormGroup label=\"Mailvelope\">\n\t\t\t\t\t<NcFormBox>\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\tinverted-accent />\n\t\t\t\t\t\t<NcFormBoxButton\n\t\t\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\t\t\tinverted-accent>\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcFormBoxButton>\n\t\t\t\t\t</NcFormBox>\n\t\t\t\t</NcFormGroup>\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsSection id=\"about\" name=\"About\">\n\t\t\t\t<NcFormGroup label=\"Acknowledgements\" description=\"This application includes CKEditor, an open-source editor. Copyright (C) CKEditor contributors. Licensed under GPLv2.\" />\n\t\t\t</NcAppSettingsSection>\n\n\t\t\t<NcAppSettingsShortcutsSection>\n\t\t\t\t<NcHotkeyList>\n\t\t\t\t\t<NcHotkey label=\"Compose new message\" hotkey=\"C\" />\n\t\t\t\t\t<NcHotkey label=\"Newer message\" hotkey=\"ArrowLeft\" />\n\t\t\t\t\t<NcHotkey label=\"Older message\" hotkey=\"ArrowRight\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle star\" hotkey=\"S\" />\n\t\t\t\t\t<NcHotkey label=\"Toggle unread\" hotkey=\"U\" />\n\t\t\t\t\t<NcHotkey label=\"Archive\" hotkey=\"A\" />\n\t\t\t\t\t<NcHotkey label=\"Delete\" hotkey=\"Delete\" />\n\t\t\t\t\t<NcHotkey label=\"Search\" hotkey=\"Control F\" />\n\t\t\t\t\t<NcHotkey label=\"Send\" hotkey=\"Control Enter\" />\n\t\t\t\t\t<NcHotkey label=\"Refresh\" hotkey=\"R\" />\n\t\t\t\t</NcHotkeyList>\n\t\t\t</NcAppSettingsShortcutsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_unref","_toDisplayString","_useModel","_createBlock","_createElementVNode","_renderSlot","_withCtx","_openBlock","_Fragment","_renderList","_withModifiers","_withKeys","NcVNodes"],"mappings":";;;;;;;;;;;;;AAUA,UAAM,SAAS,OAAO,8BAA8B;AAEpD,UAAM,mBAAmB,oBAAA;;0BAIxBA,mBAEM,OAAA;AAAA,QAFA,OAAKC,eAAA,CAAGC,YAAO,6BAA6BA,KAAAA,OAAO,gCAAgC,GAAGC,MAAA,MAAA,EAAA,CAAM,CAAA;AAAA,MAAA,mBAC9FA,MAAA,gBAAA,CAAgB,IAAG,MAACC,gBAAGD,MAAA,WAAA,CAAW,GAAA,CAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACWvC,UAAM,OAAOE,SAAoB,SAAC,MAA0B;AAE5D,UAAM,QAAQ;AA+Cd,YAAQ,+BAA+B;AAAA,MACtC;AAAA,MACA;AAAA,IAAA,CACA;AAED,YAAQ,gCAAgC,MAAM,MAAM,MAAM,MAAM,CAAC;AAEjE,UAAM,0BAA0B,eAAe,kBAAkB;AAEjE,UAAM,WAAW,YAAA;AAEjB,UAAM,kBAAkB,IAAI,EAAE;AAC9B,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,qBAAqB,IAA2B,EAAE;AAExD,UAAM,gBAAgB,SAAS,MAAM,CAAC,SAAS,SAAS,MAAM,cAAc;AAK5E,UAAM,qBAAqB,SAAS,MAAM,mBAAmB,MAAM,KAAK,CAAC,EAAE,KAAA,MAAW,CAAC,CAAC,IAAI,CAAC;AAK7F,UAAM,wBAAwB,SAAS,MAAM;AAC5C,sBAAgB,QAAQ;AACxB,UAAI,SAAS,eAAe,UAAU,SAAS,uBAAuB,GAAG;AACvE,iBAAS,cAA8B,KAAA;AAAA,MACzC;AAAA,IACD,GAAG,GAAG;AAKN,UAAM,uCAAuB,IAAA;AAC7B,oBAAgB,MAAM;AACrB,uBAAiB,MAAA;AAAA,IAClB,CAAC;AAOD,aAAS,8BAA8B,MAAc;AACpD,kBAAY,QAAQ;AACpB,eAAS,eAAe,sBAAsB,IAAI,EAAG,eAAe;AAAA,QACnE,UAAU;AAAA,QACV,QAAQ;AAAA,MAAA,CACR;AACD,sBAAgB,QAAQ;AACxB,iBAAW,MAAM;AAChB,oBAAY,QAAQ;AAAA,MACrB,GAAG,GAAI;AAAA,IACR;AAOA,aAAS,iBAAiB,QAAiB;AAC1C,UAAI,QAAQ;AACX;AAAA,MACD;AAEA,WAAK,QAAQ;AAEb,8BAAwB,MAAO,YAAY;AAAA,IAC5C;AAKA,aAAS,eAAe;AACvB,UAAI,KAAK,SAAS,CAAC,YAAY,OAAO;AACrC,8BAAA;AAAA,MACD;AAAA,IACD;AAUA,aAAS,gBAAgB,IAAY,MAAc,OAAgB,MAAgB;AAElF,UAAI,mBAAmB,MAAM,KAAK,CAAC,EAAE,IAAI,QAAA,MAAc,OAAO,OAAO,GAAG;AACvE,cAAM,IAAI,MAAM,+BAA+B,EAAE,8DAA8D;AAAA,MAChH;AACA,UAAI,mBAAmB,MAAM,KAAK,CAAC,EAAE,MAAM,UAAA,MAAgB,SAAS,SAAS,GAAG;AAC/E,aAAK,iCAAiC,IAAI,gEAAgE;AAAA,MAC3G;AAGA,UAAI,UAAU,QAAW;AACxB,yBAAiB,IAAI,IAAI,KAAK;AAAA,MAC/B,WAAW,iBAAiB,IAAI,EAAE,GAAG;AACpC,gBAAQ,iBAAiB,IAAI,EAAE;AAAA,MAChC,OAAO;AAEN,gBAAQ,KAAK,IAAI,GAAG,GAAG,iBAAiB,OAAA,CAAQ,IAAI;AACpD,yBAAiB,IAAI,IAAI,KAAK;AAAA,MAC/B;AAGA,yBAAmB,QAAQ,CAAC,GAAG,mBAAmB,OAAO,EAAE,IAAI,MAAM,OAAO,KAAA,CAAM,EAChF,KAAK,CAAC,EAAE,OAAO,UAAU,EAAE,OAAO,aAAa;AAC/C,eAAO,SAAU;AAAA,MAClB,CAAC;AAGF,UAAI,mBAAmB,MAAM,WAAW,GAAG;AAC1C,wBAAgB,QAAQ;AAAA,MACzB;AAAA,IACD;AAOA,aAAS,kBAAkB,IAAY;AACtC,yBAAmB,QAAQ,mBAAmB,MAC5C,OAAO,CAAC,EAAE,IAAI,QAAA,MAAc,OAAO,OAAO;AAG5C,UAAI,gBAAgB,UAAU,IAAI;AACjC,wBAAgB,QAAQ,mBAAmB,MAAM,CAAC,GAAG,MAAM;AAAA,MAC5D;AAAA,IACD;;aAKQ,KAAA,sBADPC,YA8CW,UAAA;AAAA;QA5CV,OAAKL,eAAA,CAAC,gBAAc,EAAA,wBACcE,MAAA,UAAA,EAAA,CAAU,CAAA;AAAA,QAC5C,gBAAe;AAAA,QACf,mBAAkB;AAAA,QACjB,wBAAA,QAAA;AAAA,QACA,WAAA,QAAA;AAAA,QACD,qBAAA;AAAA,QACC,yBAAuBA,MAAA,CAAA,EAAC,qBAAA;AAAA,QACzB,MAAK;AAAA,QACJ,MAAA,QAAA;AAAA,QACA,iBAAa;AAAA,MAAA;yBA8Bd,MAGM;AAAA,UAHNI,mBAGM,OAAA;AAAA,YAHD,KAAI;AAAA,YAAoB,UAAQ;AAAA,UAAA;YACpCC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,aAC2B,QAAA,0BAAnCF,YAAgD,4BAAA,EAAA,KAAA,EAAA,CAAA;;;;;QA/BjC,cAAA;gBAAgB;AAAA,UAC/B,IAAAG,QAAA,CAEM,EAHuC,kBAAW;AAAA,aAC5CN,MAAA,UAAA,kBAAZH,mBAEM,OAFN,YAEMI,gBADF,QAAA,IAAI,GAAA,CAAA;aAGA,eADRM,UAAA,GAAAV,mBAuBK,MAvBL,YAuBK;AAAA,gCApBJA,mBAmBKW,UAAA,MAAAC,WAnBiB,mBAAA,OAAkB,CAA7B,YAAO;oCAAlBZ,mBAmBK,MAAA;AAAA,kBAnBsC,KAAK,QAAQ;AAAA,gBAAA;kBACvDO,mBAiBI,KAAA;AAAA,oBAhBF,gBAAY,GAAK,QAAQ,OAAO,gBAAA,KAAe;AAAA,oBAChD,uBAAM,yBAAuB;AAAA,uDACqB,QAAQ,OAAO,gBAAA;AAAA,qDAAuD,mBAAA;AAAA,oBAAA;oBAIvH,MAAI,qBAAuB,QAAQ,EAAE;AAAA,oBACtC,UAAS;AAAA,oBACR,SAAKM,cAAA,CAAA,WAAU,8BAA8B,QAAQ,EAAE,GAAA,CAAA,SAAA,CAAA;AAAA,oBACvD,WAAOC,SAAA,CAAA,WAAQ,8BAA8B,QAAQ,EAAE,GAAA,CAAA,OAAA,CAAA;AAAA,kBAAA;oBAC7C,mBAAA,SAAXJ,UAAA,GAAAV,mBAEM,OAFN,YAEM;AAAA,sBADW,QAAQ,qBAAxBM,YAAuDS,aAAA;AAAA;wBAAxB,QAAQ,QAAQ;AAAA,sBAAA;;oBAEhDR,mBAEO,QAFP,YAEOH,gBADH,QAAQ,IAAI,GAAA,CAAA;AAAA,kBAAA;;;;;;;;;;;;"}

package/dist/chunks/{NcAppSettingsSection-BosSmisT.mjs → NcAppSettingsSection.mjs}

@@ -1,8 +1,8 @@
-import '../assets/NcAppSettingsSection-DIw8GLHR.css';
+import '../assets/NcAppSettingsSection.css';
 import { defineComponent, useSlots, inject, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, renderSlot } from "vue";
-import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { u as useAppSettingsDialog, A as APP_SETTINGS_LEGACY_DESIGN_KEY } from "./useAppSettingsDialog-C73Wx6iQ.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { l as logger } from "./logger.mjs";
+import { u as useAppSettingsDialog, A as APP_SETTINGS_LEGACY_DESIGN_KEY } from "./useAppSettingsDialog.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 const _hoisted_1 = ["id", "aria-labelledby"];
 const _hoisted_2 = ["id"];
 const _hoisted_3 = { class: "app-settings-section__description" };
@@ -58,4 +58,4 @@ const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId
 export {
   NcAppSettingsSection as N
 };
-//# sourceMappingURL=NcAppSettingsSection-BosSmisT.mjs.map
+//# sourceMappingURL=NcAppSettingsSection.mjs.map

package/dist/chunks/NcAppSettingsSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection.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, inject, onBeforeUnmount, onMounted, watch } from 'vue'\nimport { logger } from '../../utils/logger.ts'\nimport { APP_SETTINGS_LEGACY_DESIGN_KEY, useAppSettingsDialog } from '../NcAppSettingsDialog/useAppSettingsDialog.ts'\n\nconst props = defineProps<{\n\t/** Name of the section */\n\tname: string\n\t/** Optional description of the section */\n\tdescription?: 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()\nconst legacy = inject(APP_SETTINGS_LEGACY_DESIGN_KEY)!\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\n\t\t:id=\"htmlId\"\n\t\t:aria-labelledby=\"`${htmlId}--label`\"\n\t\tclass=\"app-settings-section\"\n\t\t:class=\"{ 'app-settings-section__legacy': legacy }\">\n\t\t<h3 :id=\"`${htmlId}--label`\" class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<div class=\"app-settings-section__description\">\n\t\t\t{{ description }}\n\t\t</div>\n\t\t<div class=\"app-settings-section__content\">\n\t\t\t<slot />\n\t\t</div>\n\t</section>\n</template>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--app-settings-section-text-offset: var(--form-element-label-offset);\n\t--app-settings-section-content-gap: calc(6 * var(--default-grid-baseline));\n\tmargin-block-end: calc(8 * var(--default-grid-baseline));\n\n\t&__name {\n\t\tmargin: 0;\n\t\tpadding-inline: var(--app-settings-section-text-offset);\n\t\tpadding-block: 0;\n\t\tfont-size: 20px;\n\t\tfont-weight: var(--font-weight-heading, bold);\n\t}\n\n\t&__description {\n\t\tpadding-inline: var(--app-settings-section-text-offset);\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__content {\n\t\tmargin-block-start: calc(2 * var(--default-grid-baseline));\n\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: stretch;\n\t\tgap: var(--app-settings-section-content-gap);\n\t}\n}\n\n.app-settings-section__legacy {\n\t--app-settings-section-text-offset: 0;\n\t--app-settings-section-content-gap: 0;\n}\n</style>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AAWd,UAAM,QAAQA,SAAA;AAOd,UAAM,EAAE,iBAAiB,kBAAA,IAAsB,qBAAA;AAC/C,UAAM,SAAS,OAAO,8BAA8B;AAEpD,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,mBAcU,WAAA;AAAA,QAbR,IAAI,OAAA;AAAA,QACJ,sBAAoB,OAAA,KAAM;AAAA,QAC3B,OAAKC,eAAA,CAAC,wBAAsB,EAAA,gCACcC,MAAA,MAAA,GAAM,CAAA;AAAA,MAAA;QAChDC,mBAEK,MAAA;AAAA,UAFA,OAAO,OAAA,KAAM;AAAA,UAAW,OAAM;AAAA,QAAA,mBAC/B,QAAA,IAAI,GAAA,GAAA,UAAA;AAAA,QAERA,mBAEM,OAFN,YAEMC,gBADF,QAAA,WAAW,GAAA,CAAA;AAAA,QAEfD,mBAEM,OAFN,YAEM;AAAA,UADLE,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;;;;;;"}

package/dist/chunks/{NcAppSettingsShortcutsSection-DLwubKV9.mjs → NcAppSettingsShortcutsSection.mjs}

@@ -1,9 +1,9 @@
-import '../assets/NcAppSettingsShortcutsSection-BHxkQTg2.css';
+import '../assets/NcAppSettingsShortcutsSection.css';
 import { defineComponent, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, renderSlot } from "vue";
-import { N as NcAppSettingsSection } from "./NcAppSettingsSection-BosSmisT.mjs";
-import { r as register, p as t31, a as t } from "./_l10n-wdIzZwir.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t31);
+import { N as NcAppSettingsSection } from "./NcAppSettingsSection.mjs";
+import { r as register, q as t32, a as t } from "./_l10n.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
+register(t32);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "NcAppSettingsShortcutsSection",
   setup(__props) {
@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_Epzxx";
+const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_Flb3s";
 const style0 = {
   appSettingsSectionShortcuts
 };
@@ -35,4 +35,4 @@ const NcAppSettingsShortcutsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["
 export {
   NcAppSettingsShortcutsSection as N
 };
-//# sourceMappingURL=NcAppSettingsShortcutsSection-DLwubKV9.mjs.map
+//# sourceMappingURL=NcAppSettingsShortcutsSection.mjs.map

package/dist/chunks/NcAppSettingsShortcutsSection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsShortcutsSection.mjs","sources":["../../src/components/NcAppSettingsShortcutsSection/NcAppSettingsShortcutsSection.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<NcAppSettingsShortcutsSection>\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</NcAppSettingsShortcutsSection>\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-C8YzAzrZ.mjs → NcAppSidebar.mjs}

@@ -1,25 +1,25 @@
-import '../assets/NcAppSidebar-oJQ8kUb0.css';
+import '../assets/NcAppSidebar.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
-import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useModel, normalizeClass, unref, createVNode, withCtx, mergeModels, 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-B1ncAhus.mjs";
-import { I as IconClose } from "./Close-CuhcJnX2.mjs";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useModel, ref, normalizeClass, unref, createVNode, withCtx, mergeModels, resolveComponent, withKeys, withModifiers, normalizeStyle, Fragment, renderList, createBlock, renderSlot, resolveDirective, Transition, withDirectives, Teleport, vShow, createTextVNode, warn, provide } from "vue";
+import { I as IconArrowRight } from "./ArrowRight.mjs";
+import { I as IconClose } from "./Close.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
 import { getCanonicalLocale } from "@nextcloud/l10n";
-import { _ as _sfc_main$6 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
-import { i as isLegacy34 } from "./legacy-BoqDmOCa.mjs";
+import { _ as _sfc_main$6 } from "./NcVNodes.vue_vue_type_script_lang.mjs";
+import { i as isLegacy34 } from "./legacy.mjs";
 import { useIsSmallMobile } from "../composables/useIsMobile/index.mjs";
 import directive from "../directives/Focus/index.mjs";
-import { r as register, V as t15, a as t } from "./_l10n-wdIzZwir.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-C-wDqSrv.mjs";
-import { l as logger } from "./logger-D3RVzcfQ.mjs";
-import { _ as _sfc_main$7 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-C-QhdyiN.mjs";
-import { N as NcButton } from "./NcButton-jvoYS2my.mjs";
-import { C as CONTENT_SELECTOR_KEY } from "./constants-Ciwvl5xb.mjs";
-import { N as NcEmptyContent } from "./NcEmptyContent-CGAPqk4S.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-BOVpFVQz.mjs";
+import { r as register, W as t16, a as t } from "./_l10n.mjs";
+import { c as createElementId } from "./createElementId.mjs";
+import { g as getTrapStack } from "./focusTrap.mjs";
+import { i as isSlotPopulated, N as NcActions } from "./NcActions.mjs";
+import { l as logger } from "./logger.mjs";
+import { _ as _sfc_main$7 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang.mjs";
+import { N as NcButton } from "./NcButton.mjs";
+import { C as CONTENT_SELECTOR_KEY } from "./constants2.mjs";
+import { N as NcEmptyContent } from "./NcEmptyContent.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon.mjs";
 const _sfc_main$5 = {
   name: "DockRightIcon",
   emits: ["click"],
@@ -153,7 +153,8 @@ const _hoisted_1$2 = ["aria-selected", "tabindex"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "NcAppSidebarTabsButton",
   props: /* @__PURE__ */ mergeModels({
-    tab: {}
+    tab: {},
+    animatedHighlight: { type: Boolean }
   }, {
     "selected": { type: Boolean, ...{ required: true } },
     "selectedModifiers": {}
@@ -161,31 +162,59 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   emits: ["update:selected"],
   setup(__props) {
     const selected = useModel(__props, "selected");
+    const popping = ref(false);
+    function onClick() {
+      selected.value = true;
+      popping.value = false;
+      requestAnimationFrame(() => {
+        popping.value = true;
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         class: normalizeClass(["button-vue", [_ctx.$style.sidebarTabsButton, {
           [_ctx.$style.sidebarTabsButton_selected]: selected.value,
-          [_ctx.$style.sidebarTabsButton_legacy]: unref(isLegacy34)
+          [_ctx.$style.sidebarTabsButton_legacy]: unref(isLegacy34),
+          [_ctx.$style.sidebarTabsButton_animatedHighlight]: __props.animatedHighlight
         }]]),
         role: "tab",
         "aria-selected": selected.value,
         tabindex: selected.value ? 0 : -1,
-        onClick: _cache[0] || (_cache[0] = ($event) => selected.value = true)
+        onClick
       }, [
         createElementVNode("span", {
-          class: normalizeClass(_ctx.$style.sidebarTabsButton__icon)
+          class: normalizeClass([_ctx.$style.sidebarTabsButton__icon, { [_ctx.$style.sidebarTabsButton__icon_pop]: popping.value }]),
+          onAnimationend: _cache[0] || (_cache[0] = ($event) => popping.value = false)
         }, [
-          createVNode(_sfc_main$6, {
-            vnodes: __props.tab.renderIcon()
-          }, {
-            default: withCtx(() => [
-              createElementVNode("span", {
-                class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, __props.tab.icon])
-              }, null, 2)
-            ]),
-            _: 1
-          }, 8, ["vnodes"])
-        ], 2),
+          createElementVNode("span", {
+            class: normalizeClass([_ctx.$style.sidebarTabsButton__iconLayer, { [_ctx.$style.sidebarTabsButton__iconLayer_hidden]: selected.value }])
+          }, [
+            createVNode(_sfc_main$6, {
+              vnodes: __props.tab.renderIcon(false)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, __props.tab.icon])
+                }, null, 2)
+              ]),
+              _: 1
+            }, 8, ["vnodes"])
+          ], 2),
+          createElementVNode("span", {
+            class: normalizeClass([_ctx.$style.sidebarTabsButton__iconLayer, { [_ctx.$style.sidebarTabsButton__iconLayer_hidden]: !selected.value }])
+          }, [
+            createVNode(_sfc_main$6, {
+              vnodes: __props.tab.renderIcon(true)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, __props.tab.icon])
+                }, null, 2)
+              ]),
+              _: 1
+            }, 8, ["vnodes"])
+          ], 2)
+        ], 34),
         createElementVNode("span", {
           class: normalizeClass(_ctx.$style.sidebarTabsButton__name)
         }, toDisplayString(__props.tab.name), 3)
@@ -193,19 +222,28 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sidebarTabsButton = "_sidebarTabsButton_OCROY";
-const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_e9-y9";
-const sidebarTabsButton_selected = "_sidebarTabsButton_selected_S48M1";
-const sidebarTabsButton__name = "_sidebarTabsButton__name_GZRY8";
-const sidebarTabsButton__icon = "_sidebarTabsButton__icon_ZDmkU";
-const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_y6cLW";
+const sidebarTabsButton = "_sidebarTabsButton_q3kBA";
+const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_KQ4d1";
+const sidebarTabsButton_selected = "_sidebarTabsButton_selected_Pjayf";
+const sidebarTabsButton_animatedHighlight = "_sidebarTabsButton_animatedHighlight_uvp-0";
+const sidebarTabsButton__name = "_sidebarTabsButton__name_rlQsL";
+const sidebarTabsButton__icon = "_sidebarTabsButton__icon_QzZg4";
+const sidebarTabsButton__iconLayer = "_sidebarTabsButton__iconLayer_ZkZan";
+const sidebarTabsButton__iconLayer_hidden = "_sidebarTabsButton__iconLayer_hidden_c7Cpv";
+const sidebarTabsButton__icon_pop = "_sidebarTabsButton__icon_pop_IA0By";
+const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_QhcNW";
 const style0 = {
-  "material-design-icon": "_material-design-icon_v9SPG",
+  "material-design-icon": "_material-design-icon_GQ9O0",
   sidebarTabsButton,
   sidebarTabsButton_legacy,
   sidebarTabsButton_selected,
+  sidebarTabsButton_animatedHighlight,
   sidebarTabsButton__name,
   sidebarTabsButton__icon,
+  sidebarTabsButton__iconLayer,
+  sidebarTabsButton__iconLayer_hidden,
+  sidebarTabsButton__icon_pop,
+  "sidebar-tab-icon-pop": "_sidebar-tab-icon-pop_mqaHb",
   sidebarTabsButton__legacyIcon
 };
 const cssModules = {
@@ -254,7 +292,20 @@ const _sfc_main$1 = {
        * Local active (open) tab's ID. It allows to use component without v-model:active
        */
       activeTab: props.active,
-      isLegacy34
+      isLegacy34,
+      /** Whether the sliding highlight runs (JS mounted, non-legacy design) */
+      highlightEnabled: false,
+      /** Whether the highlight is currently shown */
+      highlightVisible: false,
+      /** Whether position changes should transition (slide) or snap */
+      highlightAnimated: false,
+      /** Whether the highlight sits on the active tab (turns transparent) */
+      highlightOverActive: false,
+      /** Highlight geometry inside the tablist, in pixels */
+      highlightLeft: 0,
+      highlightTop: 0,
+      highlightWidth: 0,
+      highlightHeight: 0
     };
   },
   computed: {
@@ -271,6 +322,13 @@ const _sfc_main$1 = {
     },
     currentTabIndex() {
       return this.tabs.findIndex((tab) => tab.id === this.activeTab);
+    },
+    highlightStyle() {
+      return {
+        transform: `translate(${this.highlightLeft}px, ${this.highlightTop}px)`,
+        width: `${this.highlightWidth}px`,
+        height: `${this.highlightHeight}px`
+      };
     }
   },
   watch: {
@@ -285,6 +343,10 @@ const _sfc_main$1 = {
       }
     }
   },
+  mounted() {
+    this.highlightedButton = null;
+    this.highlightEnabled = !this.isLegacy34;
+  },
   methods: {
     /**
      * Set the current active tab
@@ -378,6 +440,62 @@ const _sfc_main$1 = {
       if (this.activeTab === id) {
         this.updateActive();
       }
+    },
+    /**
+     * Move the sliding highlight onto a tab button. It slides there if
+     * already visible, otherwise it snaps into place so it does not slide in
+     * from a previously hovered tab. Over the active tab it turns transparent
+     * so the active tab keeps its own static background.
+     *
+     * @param {HTMLElement} button the tab button element to cover
+     */
+    showHighlightOn(button) {
+      const buttonRect = button.getBoundingClientRect();
+      const navRect = this.$refs.nav.getBoundingClientRect();
+      const wasVisible = this.highlightVisible;
+      this.highlightAnimated = wasVisible;
+      this.highlightOverActive = button.getAttribute("aria-selected") === "true";
+      this.highlightLeft = buttonRect.left - navRect.left;
+      this.highlightTop = buttonRect.top - navRect.top;
+      this.highlightWidth = buttonRect.width;
+      this.highlightHeight = buttonRect.height;
+      if (!wasVisible) {
+        this.highlightVisible = true;
+        this.$nextTick(() => requestAnimationFrame(() => {
+          this.highlightAnimated = true;
+        }));
+      }
+    },
+    /** Hide the sliding highlight */
+    hideHighlight() {
+      this.highlightVisible = false;
+      this.highlightedButton = null;
+    },
+    /**
+     * Move the highlight to the tab button under the pointer or focus
+     *
+     * @param {Event} event the pointer or focus event
+     */
+    handleHighlight(event) {
+      if (!this.highlightEnabled) {
+        return;
+      }
+      const button = event.target?.closest?.(".app-sidebar-tabs__tab");
+      if (!button || button === this.highlightedButton || !this.$refs.nav.contains(button)) {
+        return;
+      }
+      this.highlightedButton = button;
+      this.showHighlightOn(button);
+    },
+    /**
+     * Hide the highlight once focus leaves the tablist entirely
+     *
+     * @param {FocusEvent} event the focusout event
+     */
+    onHighlightFocusOut(event) {
+      if (this.highlightEnabled && !this.$refs.nav.contains(event.relatedTarget)) {
+        this.hideHighlight();
+      }
     }
   }
 };
@@ -387,6 +505,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$1, [
     $options.hasMultipleTabs || $options.showForSingleTab ? (openBlock(), createElementBlock("div", {
       key: 0,
+      ref: "nav",
       role: "tablist",
       class: normalizeClass(["app-sidebar-tabs__nav", { "app-sidebar-tabs__nav--legacy": $data.isLegacy34 }]),
       onKeydown: [
@@ -397,8 +516,22 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.focusLastTab && $options.focusLastTab(...args), ["exact", "prevent", "stop"]), ["end"])),
         _cache[5] || (_cache[5] = withKeys(withModifiers((...args) => $options.focusFirstTab && $options.focusFirstTab(...args), ["exact", "prevent", "stop"]), ["page-up"])),
         _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => $options.focusLastTab && $options.focusLastTab(...args), ["exact", "prevent", "stop"]), ["page-down"]))
-      ]
+      ],
+      onPointerover: _cache[7] || (_cache[7] = (...args) => $options.handleHighlight && $options.handleHighlight(...args)),
+      onPointerleave: _cache[8] || (_cache[8] = (...args) => $options.hideHighlight && $options.hideHighlight(...args)),
+      onFocusin: _cache[9] || (_cache[9] = (...args) => $options.handleHighlight && $options.handleHighlight(...args)),
+      onFocusout: _cache[10] || (_cache[10] = (...args) => $options.onHighlightFocusOut && $options.onHighlightFocusOut(...args))
     }, [
+      $data.highlightEnabled ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["app-sidebar-tabs__highlight", {
+          "app-sidebar-tabs__highlight--visible": $data.highlightVisible,
+          "app-sidebar-tabs__highlight--animated": $data.highlightAnimated,
+          "app-sidebar-tabs__highlight--over-active": $data.highlightOverActive
+        }]),
+        style: normalizeStyle($options.highlightStyle),
+        "aria-hidden": "true"
+      }, null, 6)) : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.tabs, (tab) => {
         return openBlock(), createBlock(_component_NcAppSidebarTabsButton, {
           id: `tab-button-${tab.id}`,
@@ -406,9 +539,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           class: "app-sidebar-tabs__tab",
           "aria-controls": `tab-${tab.id}`,
           selected: $data.activeTab === tab.id,
+          animatedHighlight: $data.highlightEnabled,
           tab,
           "onUpdate:selected": ($event) => $options.setActive(tab.id)
-        }, null, 8, ["id", "aria-controls", "selected", "tab", "onUpdate:selected"]);
+        }, null, 8, ["id", "aria-controls", "selected", "animatedHighlight", "tab", "onUpdate:selected"]);
       }), 128))
     ], 34)) : createCommentVNode("", true),
     createElementVNode("div", {
@@ -418,8 +552,8 @@ 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-e74d1502"]]);
-register(t15);
+const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-74190d2a"]]);
+register(t16);
 const _sfc_main = {
   name: "NcAppSidebar",
   components: {
@@ -1044,8 +1178,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-e8979b7f"]]);
+const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c2c6820b"]]);
 export {
   NcAppSidebar as N
 };
-//# sourceMappingURL=NcAppSidebar-C8YzAzrZ.mjs.map
+//# sourceMappingURL=NcAppSidebar.mjs.map