@nextcloud/vue 9.0.0-alpha.6 → 9.0.0-alpha.7

package/dist/assets/{NcDialog-DG8bAh01.css → NcDialog-DL7A_udP.css}

@@ -38,14 +38,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-e7d7bfa7] {
+.material-design-icon[data-v-5728e3fd] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.dialog[data-v-e7d7bfa7] {
+.dialog[data-v-5728e3fd] {
   height: 100%;
   width: 100%;
   display: flex;
@@ -53,45 +53,45 @@
   justify-content: space-between;
   overflow: hidden;
 }
-.dialog__modal[data-v-e7d7bfa7] .modal-wrapper .modal-container {
+.dialog__modal[data-v-5728e3fd] .modal-wrapper .modal-container {
   display: flex !important;
   padding-block: 4px 0;
   padding-inline: 12px 0;
 }
-.dialog__modal[data-v-e7d7bfa7] .modal-wrapper .modal-container__content {
+.dialog__modal[data-v-5728e3fd] .modal-wrapper .modal-container__content {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.dialog__wrapper[data-v-e7d7bfa7] {
+.dialog__wrapper[data-v-5728e3fd] {
   display: flex;
   flex-direction: row;
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
-.dialog__wrapper--collapsed[data-v-e7d7bfa7] {
+.dialog__wrapper--collapsed[data-v-5728e3fd] {
   flex-direction: column;
 }
-.dialog__navigation[data-v-e7d7bfa7] {
+.dialog__navigation[data-v-5728e3fd] {
   display: flex;
   flex-shrink: 0;
 }
-.dialog__wrapper:not(.dialog__wrapper--collapsed) .dialog__navigation[data-v-e7d7bfa7] {
+.dialog__wrapper:not(.dialog__wrapper--collapsed) .dialog__navigation[data-v-5728e3fd] {
   flex-direction: column;
   overflow: hidden auto;
   height: 100%;
   min-width: 200px;
   margin-inline-end: 20px;
 }
-.dialog__wrapper.dialog__wrapper--collapsed .dialog__navigation[data-v-e7d7bfa7] {
+.dialog__wrapper.dialog__wrapper--collapsed .dialog__navigation[data-v-5728e3fd] {
   flex-direction: row;
   justify-content: space-between;
   overflow: auto hidden;
   width: 100%;
   min-width: 100%;
 }
-.dialog__name[data-v-e7d7bfa7] {
+.dialog__name[data-v-5728e3fd] {
   font-size: 21px;
   text-align: center;
   height: fit-content;
@@ -100,16 +100,16 @@
   overflow-wrap: break-word;
   margin-block: 0 12px;
 }
-.dialog__content[data-v-e7d7bfa7] {
+.dialog__content[data-v-5728e3fd] {
   flex: 1;
   min-height: 0;
   overflow: auto;
   padding-inline-end: 12px;
 }
-.dialog__text[data-v-e7d7bfa7] {
+.dialog__text[data-v-5728e3fd] {
   padding-block-end: 6px;
 }
-.dialog__actions[data-v-e7d7bfa7] {
+.dialog__actions[data-v-5728e3fd] {
   display: flex;
   gap: 6px;
   align-content: center;
@@ -120,11 +120,11 @@
   margin-inline: 0;
   margin-block: 0;
 }
-.dialog__actions[data-v-e7d7bfa7]:not(:empty) {
+.dialog__actions[data-v-5728e3fd]:not(:empty) {
   margin-block: 6px 12px;
 }
 @media only screen and (max-width: 512px) {
-.dialog__name[data-v-e7d7bfa7] {
+.dialog__name[data-v-5728e3fd] {
     text-align: start;
     margin-inline-end: var(--default-clickable-area);
 }

package/dist/assets/{NcEmojiPicker-BDp_Jc8K.css → NcEmojiPicker-Bfk2pnZE.css}

@@ -1,14 +1,3 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/**
- * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-/*
-* Ensure proper alignment of the vue material icons
-*/
 .emoji-mart,
 .emoji-mart * {
   box-sizing: border-box;
@@ -359,6 +348,7 @@
 .emoji-mart-skin-tone-6 {
   background-color: #594539;
 }
+
 /* vue-virtual-scroller/dist/vue-virtual-scroller.css */
 .emoji-mart .vue-recycle-scroller {
   position: relative;
@@ -436,6 +426,20 @@
   display: none;
   visibility: hidden;
 }
+
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon {
   display: flex;
   align-self: center;
@@ -443,82 +447,99 @@
   align-items: center;
   justify-content: center;
 }
-.emoji-mart {
+.nc-emoji-picker.emoji-mart {
   background-color: var(--color-main-background) !important;
   border: 0;
   color: var(--color-main-text) !important;
   display: flex !important;
+  /* Label element in the section grid */
+  /* An actual heading inside the element */
 }
-.emoji-mart button {
-  margin: 0;
-  padding: 0;
+.nc-emoji-picker.emoji-mart button {
   border: none;
   background: transparent;
   font-size: inherit;
-  height: 36px;
-  width: auto;
-}
-.emoji-mart button * {
-  cursor: pointer !important;
-}
-.emoji-mart .emoji-mart-bar,
-.emoji-mart .emoji-mart-anchors,
-.emoji-mart .emoji-mart-search,
-.emoji-mart .emoji-mart-search input,
-.emoji-mart .emoji-mart-category,
-.emoji-mart .emoji-mart-category-label,
-.emoji-mart .emoji-mart-category-label span,
-.emoji-mart .emoji-mart-skin-swatches {
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-bar,
+.nc-emoji-picker.emoji-mart .emoji-mart-anchors,
+.nc-emoji-picker.emoji-mart .emoji-mart-search,
+.nc-emoji-picker.emoji-mart .emoji-mart-search input,
+.nc-emoji-picker.emoji-mart .emoji-mart-category,
+.nc-emoji-picker.emoji-mart .emoji-mart-category-label,
+.nc-emoji-picker.emoji-mart .emoji-mart-category-label span,
+.nc-emoji-picker.emoji-mart .emoji-mart-skin-swatches {
   background-color: transparent !important;
   border-color: var(--color-border) !important;
   color: inherit !important;
 }
-.emoji-mart .emoji-mart-search input:focus-visible {
-  box-shadow: inset 0 0 0 2px var(--color-primary-element);
-  outline: none;
+.nc-emoji-picker.emoji-mart .emoji-mart-anchors {
+  padding-block: 0;
+  padding-inline: calc(2 * var(--default-grid-baseline));
 }
-.emoji-mart .emoji-mart-bar:first-child {
-  border-top-left-radius: var(--border-radius) !important;
-  border-top-right-radius: var(--border-radius) !important;
-}
-.emoji-mart .emoji-mart-anchors button {
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor {
   border-radius: 0;
-  padding: 12px 4px;
-  height: auto;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: var(--clickable-area-small);
+  min-width: var(--clickable-area-small);
 }
-.emoji-mart .emoji-mart-anchors button:focus-visible {
-  /* box-shadow: inset 0 0 0 2px var(--color-primary-element); */
-  outline: 2px solid var(--color-primary-element);
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor:hover {
+  background-color: var(--color-background-hover);
 }
-.emoji-mart .emoji-mart-category {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: start;
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor:focus-visible {
+  outline: 2px solid var(--color-primary-element) !important;
+  outline-offset: -2px;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-category-label,
-.emoji-mart .emoji-mart-category .emoji-mart-emoji {
-  user-select: none;
-  flex-grow: 0;
-  flex-shrink: 0;
+.nc-emoji-picker.emoji-mart .emoji-mart-anchor div {
+  display: grid;
+  place-content: center;
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-scroll {
+  padding-inline: calc(2 * var(--default-grid-baseline));
+  padding-block: 0 calc(2 * var(--default-grid-baseline));
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-category {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  justify-items: stretch;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-category-label {
-  flex-basis: 100%;
+.nc-emoji-picker.emoji-mart .emoji-mart-category.emoji-mart-no-results {
+  grid-template-columns: 1fr;
+  font-size: inherit;
+  color: var(--color-text-maxcontrast) !important;
+}
+.nc-emoji-picker.emoji-mart div.emoji-mart-category-label {
+  grid-column: span 8;
+  justify-self: stretch;
+}
+.nc-emoji-picker.emoji-mart h3.emoji-mart-category-label {
+  display: flex;
+  align-items: center;
+  height: var(--default-clickable-area);
   margin: 0;
+  padding-inline: calc(2 * var(--default-grid-baseline));
+  padding-block: 0;
+  user-select: none;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-emoji {
-  flex-basis: 12.5%;
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji {
+  aspect-ratio: 1/1;
   text-align: center;
+  margin: 0 !important;
+  padding: 0 !important;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-emoji:hover::before, .emoji-mart .emoji-mart-category .emoji-mart-emoji.emoji-mart-emoji-selected::before {
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji:hover, .nc-emoji-picker.emoji-mart .emoji-mart-emoji:focus-visible, .nc-emoji-picker.emoji-mart .emoji-mart-emoji.emoji-mart-emoji-selected {
   background-color: var(--color-background-hover) !important;
-  outline: 2px solid var(--color-primary-element);
+  border: none;
   border-radius: var(--border-radius-element, var(--border-radius-pill));
+  box-shadow: none !important;
+  outline: 2px solid var(--color-primary-element) !important;
+  outline-offset: -2px;
 }
-.emoji-mart .emoji-mart-category button:focus-visible {
-  background-color: var(--color-background-hover);
-  border: 2px solid var(--color-primary-element) !important;
-  border-radius: var(--border-radius-element, var(--border-radius-pill));
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji::before {
+  display: none;
+}
+.nc-emoji-picker.emoji-mart .emoji-mart-emoji span {
+  cursor: pointer;
 }/**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
@@ -530,24 +551,25 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-4aa55a23] {
+.material-design-icon[data-v-58b82814] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.search__wrapper[data-v-4aa55a23] {
+.search__wrapper[data-v-58b82814] {
   display: flex;
   flex-direction: row;
-  gap: 4px;
+  gap: var(--default-grid-baseline);
   align-items: end;
-  padding: 4px 8px;
+  padding-block: var(--default-grid-baseline);
+  padding-inline: calc(2 * var(--default-grid-baseline));
 }
-.row-selected button[data-v-4aa55a23], .row-selected span[data-v-4aa55a23] {
+.row-selected button[data-v-58b82814], .row-selected span[data-v-58b82814] {
   vertical-align: middle;
 }
-.emoji-delete[data-v-4aa55a23] {
+.emoji-delete[data-v-58b82814] {
   vertical-align: top;
   margin-left: -21px;
   margin-top: -3px;

package/dist/assets/{NcHeaderButton-8c2zDKtV.css → NcHeaderButton-cVjCMSVn.css}

@@ -9,41 +9,42 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-b1f7869e] {
+.material-design-icon[data-v-b3c529ab] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
+
 /*!
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-.header-menu[data-v-b1f7869e] {
+.header-menu[data-v-b3c529ab] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
 }
-.header-menu .header-menu__trigger[data-v-b1f7869e] {
+.header-menu .header-menu__trigger[data-v-b3c529ab] {
   --button-size: var(--header-height) !important;
   height: var(--header-height);
   opacity: 0.85;
   filter: none !important;
   color: var(--color-background-plain-text, var(--color-primary-text)) !important;
 }
-.header-menu .header-menu__trigger[data-v-b1f7869e]:focus-visible {
+.header-menu .header-menu__trigger[data-v-b3c529ab]:focus-visible {
   outline: none !important;
   box-shadow: none !important;
 }
-.header-menu--opened .header-menu__trigger[data-v-b1f7869e], .header-menu__trigger[data-v-b1f7869e]:hover, .header-menu__trigger[data-v-b1f7869e]:focus, .header-menu__trigger[data-v-b1f7869e]:active {
+.header-menu--opened .header-menu__trigger[data-v-b3c529ab], .header-menu__trigger[data-v-b3c529ab]:hover, .header-menu__trigger[data-v-b3c529ab]:focus, .header-menu__trigger[data-v-b3c529ab]:active {
   opacity: 1;
 }
 @media only screen and (max-width: 512px) {
-.header-menu[data-v-b1f7869e] {
+.header-menu[data-v-b3c529ab] {
     width: var(--default-clickable-area);
 }
-.header-menu .header-menu__trigger[data-v-b1f7869e] {
+.header-menu .header-menu__trigger[data-v-b3c529ab] {
     --button-size: var(--default-clickable-area) !important;
 }
 }

package/dist/assets/{NcHeaderMenu-CDlSXB2d.css → NcHeaderMenu-QJK2rMK3.css}

@@ -9,45 +9,46 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-7bfb0e6f] {
+.material-design-icon[data-v-e7026f07] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
+
 /*!
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-.header-menu[data-v-7bfb0e6f] {
+.header-menu[data-v-e7026f07] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
 }
-.header-menu .header-menu__trigger[data-v-7bfb0e6f] {
+.header-menu .header-menu__trigger[data-v-e7026f07] {
   --button-size: var(--header-height) !important;
   height: var(--header-height);
   opacity: 0.85;
   filter: none !important;
   color: var(--color-background-plain-text, var(--color-primary-text)) !important;
 }
-.header-menu .header-menu__trigger[data-v-7bfb0e6f]:focus-visible {
+.header-menu .header-menu__trigger[data-v-e7026f07]:focus-visible {
   outline: none !important;
   box-shadow: none !important;
 }
-.header-menu--opened .header-menu__trigger[data-v-7bfb0e6f], .header-menu__trigger[data-v-7bfb0e6f]:hover, .header-menu__trigger[data-v-7bfb0e6f]:focus, .header-menu__trigger[data-v-7bfb0e6f]:active {
+.header-menu--opened .header-menu__trigger[data-v-e7026f07], .header-menu__trigger[data-v-e7026f07]:hover, .header-menu__trigger[data-v-e7026f07]:focus, .header-menu__trigger[data-v-e7026f07]:active {
   opacity: 1;
 }
 @media only screen and (max-width: 512px) {
-.header-menu[data-v-7bfb0e6f] {
+.header-menu[data-v-e7026f07] {
     width: var(--default-clickable-area);
 }
-.header-menu .header-menu__trigger[data-v-7bfb0e6f] {
+.header-menu .header-menu__trigger[data-v-e7026f07] {
     --button-size: var(--default-clickable-area) !important;
 }
 }
-.header-menu__wrapper[data-v-7bfb0e6f] {
+.header-menu__wrapper[data-v-e7026f07] {
   position: fixed;
   z-index: 2000;
   top: var(--header-height);
@@ -59,7 +60,7 @@
   background-color: var(--color-main-background);
   filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 }
-.header-menu__carret[data-v-7bfb0e6f] {
+.header-menu__carret[data-v-e7026f07] {
   position: absolute;
   z-index: 2001;
   bottom: 0;
@@ -71,13 +72,13 @@
   border: 10px solid transparent;
   border-bottom-color: var(--color-main-background);
 }
-.header-menu__content[data-v-7bfb0e6f] {
+.header-menu__content[data-v-e7026f07] {
   overflow: auto;
   width: 350px;
   max-width: calc(100vw - 16px);
   min-height: calc(var(--default-clickable-area) * 1.5);
   max-height: calc(100vh - var(--header-height) * 2);
 }
-.header-menu__content[data-v-7bfb0e6f] .empty-content {
+.header-menu__content[data-v-e7026f07] .empty-content {
   margin: 12vh 10px;
 }

package/dist/assets/{NcMentionBubble-C6t8od-_.css → NcMentionBubble-BL05HUeF.css}

@@ -9,25 +9,25 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-a519576f] {
+.material-design-icon[data-v-6c8d0da9] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.mention-bubble--primary .mention-bubble__content[data-v-a519576f] {
+.mention-bubble--primary .mention-bubble__content[data-v-6c8d0da9] {
   color: var(--color-primary-element-text);
   background-color: var(--color-primary-element);
 }
-.mention-bubble__wrapper[data-v-a519576f] {
+.mention-bubble__wrapper[data-v-6c8d0da9] {
   max-width: 150px;
   height: 18px;
   vertical-align: text-bottom;
   display: inline-flex;
   align-items: center;
 }
-.mention-bubble__content[data-v-a519576f] {
+.mention-bubble__content[data-v-6c8d0da9] {
   display: inline-flex;
   overflow: hidden;
   align-items: center;
@@ -35,12 +35,11 @@
   height: 20px;
   -webkit-user-select: none;
   user-select: none;
-  padding-right: 6px;
-  padding-left: 2px;
+  padding-inline: 2px 6px;
   border-radius: 10px;
   background-color: var(--color-background-dark);
 }
-.mention-bubble__icon[data-v-a519576f] {
+.mention-bubble__icon[data-v-6c8d0da9] {
   position: relative;
   width: 16px;
   height: 16px;
@@ -50,23 +49,23 @@
   background-position: center;
   background-size: 12px;
 }
-.mention-bubble__icon--with-avatar[data-v-a519576f] {
+.mention-bubble__icon--with-avatar[data-v-6c8d0da9] {
   color: inherit;
   background-size: cover;
 }
-.mention-bubble__title[data-v-a519576f] {
+.mention-bubble__title[data-v-6c8d0da9] {
   overflow: hidden;
-  margin-left: 2px;
+  margin-inline-start: 2px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.mention-bubble__title[data-v-a519576f]::before {
+.mention-bubble__title[data-v-6c8d0da9]::before {
   content: attr(title);
 }
-.mention-bubble__select[data-v-a519576f] {
+.mention-bubble__select[data-v-6c8d0da9] {
   position: absolute;
   z-index: -1;
-  left: -100vw;
+  inset-inline-start: -100vw;
   width: 1px;
   height: 1px;
   overflow: hidden;

package/dist/assets/{NcPasswordField-By-kPRJC.css → NcPasswordField-Bl9fhgy-.css}

@@ -9,13 +9,13 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-f55bae1d] {
+.material-design-icon[data-v-76f08b32] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-[data-v-f55bae1d] .password-field__input--secure-text {
+[data-v-76f08b32] .password-field__input--secure-text {
   -webkit-text-security: disc;
 }

package/dist/assets/{NcPopover-BGWT8K0v.css → NcPopover-ChETNAVH.css}

@@ -49,7 +49,18 @@
   top: 0;
   left: 0;
   display: block !important;
-  filter: drop-shadow(0 1px 10px var(--color-box-shadow));
+}
+.v-popper--theme-dropdown.v-popper__popper .v-popper__wrapper {
+  /*
+   * In theory, "filter: drop-shadow" would look better here with arrow shadow.
+   * In fact, in results in a blurry popover in Chromium on scaling.
+   * The hypothesis is that "filter" creates a new composition layer,
+   * and with GPU acceleration requires the previous layers content to be rasterized.
+   * In combination with translate3d from floating-vue, it makes Chromium to first render and rasterize the popover
+   * and then apply scaling, which results in a blurry popover.
+   */
+  box-shadow: 0 1px 10px var(--color-box-shadow);
+  border-radius: var(--border-radius-large);
 }
 .v-popper--theme-dropdown.v-popper__popper .v-popper__inner {
   padding: 0;
@@ -68,22 +79,22 @@
   border-width: 10px;
 }
 .v-popper--theme-dropdown.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-container {
-  bottom: -10px;
+  bottom: -9px;
   border-bottom-width: 0;
   border-top-color: var(--color-main-background);
 }
 .v-popper--theme-dropdown.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container {
-  top: -10px;
+  top: -9px;
   border-top-width: 0;
   border-bottom-color: var(--color-main-background);
 }
 .v-popper--theme-dropdown.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-container {
-  left: -10px;
+  left: -9px;
   border-left-width: 0;
   border-right-color: var(--color-main-background);
 }
 .v-popper--theme-dropdown.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container {
-  right: -10px;
+  right: -9px;
   border-right-width: 0;
   border-left-color: var(--color-main-background);
 }