@nextcloud/vue 9.0.0-alpha.8 → 9.0.0-rc.1

package/dist/chunks/{NcAppSidebar-Dgwj8O_Z.mjs → NcAppSidebar-Dnb5U9gv.mjs}

@@ -1,23 +1,153 @@
-import '../assets/NcAppSidebar-GFQ62pY2.css';
-import _sfc_main$5 from "../components/NcVNodes/index.mjs";
-import { N as NcCheckboxRadioSwitch } from "./NcCheckboxRadioSwitch-CWU_M_ui.mjs";
-import { resolveComponent, createElementBlock, openBlock, createCommentVNode, createElementVNode, withKeys, withModifiers, Fragment, renderList, createBlock, normalizeClass, withCtx, toDisplayString, createVNode, renderSlot, mergeProps, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, createTextVNode, vShow } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import { N as NcActions } from "./NcActions-CgKHXNbF.mjs";
-import { i as isSlotPopulated, N as NcButton } from "./NcButton-BHLqKKYP.mjs";
-import { N as NcEmptyContent } from "./NcEmptyContent-BQnIrQQn.mjs";
-import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
-import { directive as directive$1 } from "../directives/Focus/index.mjs";
-import directive from "../directives/Linkify/index.mjs";
+import '../assets/NcAppSidebar-DejDBLy4.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 { useIsSmallMobile } from "../composables/useIsMobile/index.mjs";
 import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
 import { g as getTrapStack } from "./focusTrap-DmkaYJTC.mjs";
-import { r as register, K as t14, a as t } from "./_l10n-7kR7gXFc.mjs";
+import { i as isSlotPopulated, N as NcActions } from "./NcActions-2UedVnLW.mjs";
+import { r as register, J as t14, a as t } from "./_l10n-dinIMiE_.mjs";
 import { A as ArrowRight } from "./ArrowRight-DQT24Cb-.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-BmzUQ-WN.mjs";
+import { _ as _sfc_main$5 } from "./NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
+import { N as NcButton } from "./NcButton-Byg8-ta1.mjs";
+import { N as NcEmptyContent } from "./NcEmptyContent-CBWBkBL8.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
+import { _ as _sfc_main$6 } from "./NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
+import directive from "../directives/Focus/index.mjs";
+register(t14);
 const _sfc_main$4 = {
+  name: "DockRightIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$4 = ["aria-hidden", "aria-label"];
+const _hoisted_2$4 = ["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) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon dock-right-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      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);
+}
+const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = {
+  name: "StarIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$3 = ["aria-hidden", "aria-label"];
+const _hoisted_2$3 = ["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) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon star-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      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);
+}
+const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const _sfc_main$2 = {
+  name: "StarOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$2 = ["aria-hidden", "aria-label"];
+const _hoisted_2$2 = ["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) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : "true",
+    "aria-label": $props.title,
+    class: "material-design-icon star-outline-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      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);
+}
+const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
   name: "NcAppSidebarTabs",
   components: {
     NcCheckboxRadioSwitch,
@@ -181,12 +311,12 @@ const _sfc_main$4 = {
     }
   }
 };
-const _hoisted_1$4 = { class: "app-sidebar-tabs" };
-const _hoisted_2$4 = { class: "app-sidebar-tabs__tab-caption" };
-function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+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");
-  return openBlock(), createElementBlock("div", _hoisted_1$4, [
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [
     $options.hasMultipleTabs || $options.showForSingleTab ? (openBlock(), createElementBlock("div", {
       key: 0,
       role: "tablist",
@@ -229,7 +359,7 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
             }, 1032, ["vnodes"])
           ]),
           default: withCtx(() => [
-            createElementVNode("span", _hoisted_2$4, toDisplayString(tab.name), 1)
+            createElementVNode("span", _hoisted_2$1, toDisplayString(tab.name), 1)
           ]),
           _: 2
         }, 1032, ["aria-controls", "aria-selected", "model-value", "wrapper-id", "tabindex", "class", "onUpdate:modelValue"]);
@@ -242,141 +372,12 @@ function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ]);
 }
-const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__scopeId", "data-v-e48b94c8"]]);
-register(t14);
-const _sfc_main$3 = {
-  name: "DockRightIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-const _hoisted_1$3 = ["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$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
-    "aria-hidden": $props.title ? null : "true",
-    "aria-label": $props.title,
-    class: "material-design-icon dock-right-icon",
-    role: "img",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [
-    (openBlock(), createElementBlock("svg", {
-      fill: $props.fillColor,
-      class: "material-design-icon__svg",
-      width: $props.size,
-      height: $props.size,
-      viewBox: "0 0 24 24"
-    }, [
-      createElementVNode("path", _hoisted_3$3, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$3, toDisplayString($props.title), 1)) : createCommentVNode("", true)
-      ])
-    ], 8, _hoisted_2$3))
-  ], 16, _hoisted_1$3);
-}
-const IconDockRight = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
-const _sfc_main$2 = {
-  name: "StarIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-const _hoisted_1$2 = ["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$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
-    "aria-hidden": $props.title ? null : "true",
-    "aria-label": $props.title,
-    class: "material-design-icon star-icon",
-    role: "img",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [
-    (openBlock(), createElementBlock("svg", {
-      fill: $props.fillColor,
-      class: "material-design-icon__svg",
-      width: $props.size,
-      height: $props.size,
-      viewBox: "0 0 24 24"
-    }, [
-      createElementVNode("path", _hoisted_3$2, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$2, toDisplayString($props.title), 1)) : createCommentVNode("", true)
-      ])
-    ], 8, _hoisted_2$2))
-  ], 16, _hoisted_1$2);
-}
-const IconStar = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-const _sfc_main$1 = {
-  name: "StarOutlineIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-const _hoisted_1$1 = ["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$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
-    "aria-hidden": $props.title ? null : "true",
-    "aria-label": $props.title,
-    class: "material-design-icon star-outline-icon",
-    role: "img",
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
-  }), [
-    (openBlock(), createElementBlock("svg", {
-      fill: $props.fillColor,
-      class: "material-design-icon__svg",
-      width: $props.size,
-      height: $props.size,
-      viewBox: "0 0 24 24"
-    }, [
-      createElementVNode("path", _hoisted_3$1, [
-        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
-      ])
-    ], 8, _hoisted_2$1))
-  ], 16, _hoisted_1$1);
-}
-const IconStarOutline = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-9a713930"]]);
 const _sfc_main = {
   name: "NcAppSidebar",
   components: {
     NcActions,
+    NcAppSidebarHeader: _sfc_main$6,
     NcAppSidebarTabs,
     NcButton,
     NcLoadingIcon,
@@ -388,8 +389,7 @@ const _sfc_main = {
     IconStarOutline
   },
   directives: {
-    Focus: directive$1,
-    Linkify: directive,
+    Focus: directive,
     ClickOutside: vOnClickOutside
   },
   inject: {
@@ -554,9 +554,12 @@ const _sfc_main = {
     "dismiss-editing"
   ],
   setup() {
+    const headerRef = ref(null);
+    provide("NcAppSidebar:header:ref", headerRef);
     return {
       uid: createElementId(),
-      isMobile: useIsSmallMobile()
+      isMobile: useIsSmallMobile(),
+      headerRef
     };
   },
   data() {
@@ -699,7 +702,15 @@ const _sfc_main = {
      * @public
      */
     focus() {
-      (this.$refs.header ?? this.$refs.toggle)?.focus();
+      if (!this.open && !this.noToggle) {
+        this.$refs.toggle.$el.focus();
+        return;
+      }
+      try {
+        this.headerRef.focus();
+      } catch {
+        warn("NcAppSidebar should have focusable header for accessibility reasons. Use NcAppSidebarHeader component.");
+      }
     },
     /**
      * Focus the active tab
@@ -754,11 +765,10 @@ const _hoisted_3 = {
 };
 const _hoisted_4 = { class: "app-sidebar-header__name-container" };
 const _hoisted_5 = { class: "app-sidebar-header__mainname-container" };
-const _hoisted_6 = ["id", "aria-label", "title", "tabindex"];
-const _hoisted_7 = ["placeholder", "value"];
-const _hoisted_8 = ["title"];
-const _hoisted_9 = {
-  key: 0,
+const _hoisted_6 = ["placeholder", "value"];
+const _hoisted_7 = ["title"];
+const _hoisted_8 = {
+  key: 2,
   class: "app-sidebar-header__description"
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -767,12 +777,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_NcLoadingIcon = resolveComponent("NcLoadingIcon");
   const _component_IconStar = resolveComponent("IconStar");
   const _component_IconStarOutline = resolveComponent("IconStarOutline");
+  const _component_NcAppSidebarHeader = resolveComponent("NcAppSidebarHeader");
   const _component_IconArrowRight = resolveComponent("IconArrowRight");
   const _component_NcActions = resolveComponent("NcActions");
   const _component_IconClose = resolveComponent("IconClose");
   const _component_NcAppSidebarTabs = resolveComponent("NcAppSidebarTabs");
   const _component_NcEmptyContent = resolveComponent("NcEmptyContent");
-  const _directive_linkify = resolveDirective("linkify");
   const _directive_focus = resolveDirective("focus");
   const _directive_click_outside = resolveDirective("click-outside");
   return openBlock(), createBlock(Transition, {
@@ -787,13 +797,14 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ref: "sidebar",
         class: "app-sidebar",
         "aria-labelledby": `app-sidebar-vue-${$setup.uid}__header`,
-        onKeydown: _cache[7] || (_cache[7] = withKeys((...args) => $options.onKeydownEsc && $options.onKeydownEsc(...args), ["esc"]))
+        onKeydown: _cache[6] || (_cache[6] = withKeys((...args) => $options.onKeydownEsc && $options.onKeydownEsc(...args), ["esc"]))
       }, [
         $options.ncContentSelector && !$props.open && !$props.noToggle ? (openBlock(), createBlock(Teleport, {
           key: 0,
           to: $options.ncContentSelector
         }, [
           createVNode(_component_NcButton, mergeProps({
+            ref: "toggle",
             "aria-label": $options.t("Open sidebar"),
             class: ["app-sidebar__toggle", $props.toggleClasses],
             variant: "tertiary"
@@ -814,121 +825,123 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "app-sidebar-header--compact": $props.compact
           }, "app-sidebar-header"])
         }, [
-          createElementVNode("div", _hoisted_2, [
-            ($options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background) && !$props.empty ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass([{
-                "app-sidebar-header__figure--with-action": $options.hasFigureClickListener
-              }, "app-sidebar-header__figure"]),
-              style: normalizeStyle({
-                backgroundImage: `url(${$props.background})`
-              }),
-              tabindex: "0",
-              onClick: _cache[1] || (_cache[1] = (...args) => $options.onFigureClick && $options.onFigureClick(...args)),
-              onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => $options.onFigureClick && $options.onFigureClick(...args), ["enter"]))
-            }, [
-              renderSlot(_ctx.$slots, "header", { class: "app-sidebar-header__background" }, void 0, true)
-            ], 38)) : createCommentVNode("", true),
-            !$props.empty ? (openBlock(), createElementBlock("div", {
-              key: 1,
-              class: normalizeClass([{
-                "app-sidebar-header__desc--with-tertiary-action": $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()),
-                "app-sidebar-header__desc--editable": $props.nameEditable && !$props.subname,
-                "app-sidebar-header__desc--with-subname--editable": $props.nameEditable && $props.subname,
-                "app-sidebar-header__desc--without-actions": !$options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.())
-              }, "app-sidebar-header__desc"])
-            }, [
-              $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                renderSlot(_ctx.$slots, "tertiary-actions", {}, () => [
-                  $options.canStar ? (openBlock(), createBlock(_component_NcButton, {
-                    key: 0,
-                    "aria-label": $data.favoriteTranslated,
-                    pressed: $data.isStarred,
-                    class: "app-sidebar-header__star",
-                    variant: "secondary",
-                    onClick: withModifiers($options.toggleStarred, ["prevent"])
-                  }, {
-                    icon: withCtx(() => [
-                      $props.starLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : $data.isStarred ? (openBlock(), createBlock(_component_IconStar, {
-                        key: 1,
-                        size: 20
-                      })) : (openBlock(), createBlock(_component_IconStarOutline, {
-                        key: 2,
-                        size: 20
-                      }))
-                    ]),
-                    _: 1
-                  }, 8, ["aria-label", "pressed", "onClick"])) : createCommentVNode("", true)
-                ], true)
-              ])) : createCommentVNode("", true),
-              createElementVNode("div", _hoisted_4, [
-                createElementVNode("div", _hoisted_5, [
-                  withDirectives((openBlock(), createElementBlock("h2", {
-                    id: `app-sidebar-vue-${$setup.uid}__header`,
-                    ref: "header",
-                    "aria-label": $props.title,
-                    title: $props.title,
-                    class: "app-sidebar-header__mainname",
-                    tabindex: $props.nameEditable ? 0 : -1,
-                    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => $options.editName && $options.editName(...args), ["self"]))
-                  }, [
-                    createTextVNode(toDisplayString($props.name), 1)
-                  ], 8, _hoisted_6)), [
-                    [vShow, !$props.nameEditable],
-                    [_directive_linkify, { text: $props.name, linkify: $props.linkifyName }]
-                  ]),
-                  $props.nameEditable ? withDirectives((openBlock(), createElementBlock("form", {
-                    key: 0,
-                    class: "app-sidebar-header__mainname-form",
-                    onSubmit: _cache[6] || (_cache[6] = withModifiers((...args) => $options.onSubmitName && $options.onSubmitName(...args), ["prevent"]))
-                  }, [
-                    withDirectives(createElementVNode("input", {
-                      ref: "nameInput",
-                      class: "app-sidebar-header__mainname-input",
-                      type: "text",
-                      placeholder: $props.namePlaceholder,
-                      value: $props.name,
-                      onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.onDismissEditing && $options.onDismissEditing(...args), ["stop"]), ["esc"])),
-                      onInput: _cache[5] || (_cache[5] = (...args) => $options.onNameInput && $options.onNameInput(...args))
-                    }, null, 40, _hoisted_7), [
-                      [_directive_focus]
-                    ]),
-                    createVNode(_component_NcButton, {
-                      "aria-label": $data.changeNameTranslated,
-                      type: "submit",
-                      variant: "tertiary-no-background"
+          !$props.empty ? renderSlot(_ctx.$slots, "info", { key: 0 }, () => [
+            createElementVNode("div", _hoisted_2, [
+              $options.isSlotPopulated(_ctx.$slots.header?.()) || $props.background ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass([{
+                  "app-sidebar-header__figure--with-action": $options.hasFigureClickListener
+                }, "app-sidebar-header__figure"]),
+                style: normalizeStyle({
+                  backgroundImage: `url(${$props.background})`
+                }),
+                tabindex: "0",
+                onClick: _cache[1] || (_cache[1] = (...args) => $options.onFigureClick && $options.onFigureClick(...args)),
+                onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => $options.onFigureClick && $options.onFigureClick(...args), ["enter"]))
+              }, [
+                renderSlot(_ctx.$slots, "header", { class: "app-sidebar-header__background" }, void 0, true)
+              ], 38)) : createCommentVNode("", true),
+              createElementVNode("div", {
+                class: normalizeClass([{
+                  "app-sidebar-header__desc--with-tertiary-action": $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()),
+                  "app-sidebar-header__desc--editable": $props.nameEditable && !$props.subname,
+                  "app-sidebar-header__desc--with-subname--editable": $props.nameEditable && $props.subname,
+                  "app-sidebar-header__desc--without-actions": !$options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.())
+                }, "app-sidebar-header__desc"])
+              }, [
+                $options.canStar || $options.isSlotPopulated(_ctx.$slots["tertiary-actions"]?.()) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  renderSlot(_ctx.$slots, "tertiary-actions", {}, () => [
+                    $options.canStar ? (openBlock(), createBlock(_component_NcButton, {
+                      key: 0,
+                      "aria-label": $data.favoriteTranslated,
+                      pressed: $data.isStarred,
+                      class: "app-sidebar-header__star",
+                      variant: "secondary",
+                      onClick: withModifiers($options.toggleStarred, ["prevent"])
                     }, {
                       icon: withCtx(() => [
-                        createVNode(_component_IconArrowRight, { size: 20 })
+                        $props.starLoading ? (openBlock(), createBlock(_component_NcLoadingIcon, { key: 0 })) : $data.isStarred ? (openBlock(), createBlock(_component_IconStar, {
+                          key: 1,
+                          size: 20
+                        })) : (openBlock(), createBlock(_component_IconStarOutline, {
+                          key: 2,
+                          size: 20
+                        }))
                       ]),
                       _: 1
-                    }, 8, ["aria-label"])
-                  ], 32)), [
-                    [_directive_click_outside, () => $options.onSubmitName()]
-                  ]) : createCommentVNode("", true),
-                  $options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.()) ? (openBlock(), createBlock(_component_NcActions, {
-                    key: 1,
-                    class: "app-sidebar-header__menu",
-                    "force-menu": $props.forceMenu
-                  }, {
-                    default: withCtx(() => [
-                      renderSlot(_ctx.$slots, "secondary-actions", {}, void 0, true)
-                    ]),
-                    _: 3
-                  }, 8, ["force-menu"])) : createCommentVNode("", true)
-                ]),
-                $props.subname.trim() !== "" || _ctx.$slots["subname"] ? (openBlock(), createElementBlock("p", {
-                  key: 0,
-                  title: $props.subtitle || void 0,
-                  class: "app-sidebar-header__subname"
-                }, [
-                  renderSlot(_ctx.$slots, "subname", {}, () => [
-                    createTextVNode(toDisplayString($props.subname), 1)
+                    }, 8, ["aria-label", "pressed", "onClick"])) : createCommentVNode("", true)
                   ], true)
-                ], 8, _hoisted_8)) : createCommentVNode("", true)
-              ])
-            ], 2)) : createCommentVNode("", true)
-          ]),
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_4, [
+                  createElementVNode("div", _hoisted_5, [
+                    withDirectives(createVNode(_component_NcAppSidebarHeader, {
+                      class: "app-sidebar-header__mainname",
+                      name: $props.name,
+                      linkify: $props.linkifyName,
+                      title: $props.title,
+                      tabindex: $props.nameEditable ? 0 : -1,
+                      onClick: withModifiers($options.editName, ["self"])
+                    }, null, 8, ["name", "linkify", "title", "tabindex", "onClick"]), [
+                      [vShow, !$props.nameEditable]
+                    ]),
+                    $props.nameEditable ? withDirectives((openBlock(), createElementBlock("form", {
+                      key: 0,
+                      class: "app-sidebar-header__mainname-form",
+                      onSubmit: _cache[5] || (_cache[5] = withModifiers((...args) => $options.onSubmitName && $options.onSubmitName(...args), ["prevent"]))
+                    }, [
+                      withDirectives(createElementVNode("input", {
+                        ref: "nameInput",
+                        class: "app-sidebar-header__mainname-input",
+                        type: "text",
+                        placeholder: $props.namePlaceholder,
+                        value: $props.name,
+                        onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => $options.onDismissEditing && $options.onDismissEditing(...args), ["stop"]), ["esc"])),
+                        onInput: _cache[4] || (_cache[4] = (...args) => $options.onNameInput && $options.onNameInput(...args))
+                      }, null, 40, _hoisted_6), [
+                        [_directive_focus]
+                      ]),
+                      createVNode(_component_NcButton, {
+                        "aria-label": $data.changeNameTranslated,
+                        type: "submit",
+                        variant: "tertiary-no-background"
+                      }, {
+                        icon: withCtx(() => [
+                          createVNode(_component_IconArrowRight, { size: 20 })
+                        ]),
+                        _: 1
+                      }, 8, ["aria-label"])
+                    ], 32)), [
+                      [_directive_click_outside, () => $options.onSubmitName()]
+                    ]) : createCommentVNode("", true),
+                    $options.isSlotPopulated(_ctx.$slots["secondary-actions"]?.()) ? (openBlock(), createBlock(_component_NcActions, {
+                      key: 1,
+                      class: "app-sidebar-header__menu",
+                      "force-menu": $props.forceMenu
+                    }, {
+                      default: withCtx(() => [
+                        renderSlot(_ctx.$slots, "secondary-actions", {}, void 0, true)
+                      ]),
+                      _: 3
+                    }, 8, ["force-menu"])) : createCommentVNode("", true)
+                  ]),
+                  $props.subname.trim() !== "" || _ctx.$slots["subname"] ? (openBlock(), createElementBlock("p", {
+                    key: 0,
+                    title: $props.subtitle || void 0,
+                    class: "app-sidebar-header__subname"
+                  }, [
+                    renderSlot(_ctx.$slots, "subname", {}, () => [
+                      createTextVNode(toDisplayString($props.subname), 1)
+                    ], true)
+                  ], 8, _hoisted_7)) : createCommentVNode("", true)
+                ])
+              ], 2)
+            ])
+          ], true) : (openBlock(), createBlock(_component_NcAppSidebarHeader, {
+            key: 1,
+            class: "app-sidebar-header__mainname--hidden",
+            name: $props.name,
+            tabindex: "-1"
+          }, null, 8, ["name"])),
           createVNode(_component_NcButton, {
             ref: "closeButton",
             "aria-label": $data.closeTranslated,
@@ -942,7 +955,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           }, 8, ["aria-label", "title", "onClick"]),
-          $options.isSlotPopulated(_ctx.$slots.description?.()) && !$props.empty ? (openBlock(), createElementBlock("div", _hoisted_9, [
+          $options.isSlotPopulated(_ctx.$slots.description?.()) && !$props.empty ? (openBlock(), createElementBlock("div", _hoisted_8, [
             renderSlot(_ctx.$slots, "description", {}, void 0, true)
           ])) : createCommentVNode("", true)
         ], 2),
@@ -972,8 +985,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-9f54be10"]]);
+const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-86db874a"]]);
 export {
   NcAppSidebar as N
 };
-//# sourceMappingURL=NcAppSidebar-Dgwj8O_Z.mjs.map
+//# sourceMappingURL=NcAppSidebar-Dnb5U9gv.mjs.map