@nextcloud/vue 8.32.0 → 8.33.0

package/dist/assets/{NcChip-Cc17FJEC.css → NcChip-ByvuZS2-.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-522528d5] {
+.material-design-icon[data-v-88e86387] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.nc-chip[data-v-522528d5] {
+.nc-chip[data-v-88e86387] {
   --chip-size: 24px;
   --chip-radius: calc(var(--chip-size) / 2);
   height: var(--chip-size);
@@ -27,27 +27,39 @@
   border-radius: var(--chip-radius);
   background-color: var(--color-background-hover);
 }
-.nc-chip--primary[data-v-522528d5] {
+.nc-chip--primary[data-v-88e86387] {
   background-color: var(--color-primary-element);
   color: var(--color-primary-element-text);
 }
-.nc-chip--secondary[data-v-522528d5] {
+.nc-chip--secondary[data-v-88e86387] {
   background-color: var(--color-primary-element-light);
   color: var(--color-primary-element-light-text);
 }
-.nc-chip--no-actions .nc-chip__text[data-v-522528d5] {
-  padding-inline-end: calc(1.5 * var(--default-grid-baseline));
+.nc-chip--error[data-v-88e86387] {
+  background-color: var(--color-error);
+  color: var(--color-error-text);
 }
-.nc-chip--no-icon .nc-chip__text[data-v-522528d5] {
-  padding-inline-start: calc(1.5 * var(--default-grid-baseline));
+.nc-chip--warning[data-v-88e86387] {
+  background-color: var(--color-warning);
+  color: var(--color-warning-text);
 }
-.nc-chip__text[data-v-522528d5] {
+.nc-chip--success[data-v-88e86387] {
+  background-color: var(--color-success);
+  color: var(--color-success-text);
+}
+.nc-chip--no-actions .nc-chip__text[data-v-88e86387] {
+  padding-inline-end: calc(2 * var(--default-grid-baseline));
+}
+.nc-chip--no-icon .nc-chip__text[data-v-88e86387] {
+  padding-inline-start: calc(2 * var(--default-grid-baseline));
+}
+.nc-chip__text[data-v-88e86387] {
   flex: 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
   text-wrap: nowrap;
 }
-.nc-chip__icon[data-v-522528d5] {
+.nc-chip__icon[data-v-88e86387] {
   flex: 0 0 var(--chip-size);
   margin-inline-end: var(--default-grid-baseline);
   line-height: 1;
@@ -58,7 +70,7 @@
   height: var(--chip-size);
   width: var(--chip-size);
 }
-.nc-chip__actions[data-v-522528d5] {
+.nc-chip__actions[data-v-88e86387] {
   flex: 0 0 var(--chip-size);
   --default-clickable-area: var(--chip-size);
   --border-radius-element: var(--chip-radius);

package/dist/assets/{NcDateTimePicker-C6sMtYzL.css → NcDateTimePicker-BmMuUpwr.css}

@@ -484,31 +484,31 @@
   background-color: #f3f3f3;
 }
 
-.mx-datepicker[data-v-488037d] {
+.mx-datepicker[data-v-f0bfd95] {
   user-select: none;
   color: var(--color-main-text);
 }
-.mx-datepicker[data-v-488037d] svg {
+.mx-datepicker[data-v-f0bfd95] svg {
   fill: var(--color-main-text);
 }
-.mx-datepicker[data-v-488037d] {
+.mx-datepicker[data-v-f0bfd95] {
   /* INPUT CONTAINER */
 }
-.mx-datepicker[data-v-488037d] .mx-input-wrapper .mx-input {
+.mx-datepicker[data-v-f0bfd95] .mx-input-wrapper .mx-input {
   width: 100%;
   border: 2px solid var(--color-border-maxcontrast);
   background-color: var(--color-main-background);
   background-clip: content-box;
 }
-.mx-datepicker[data-v-488037d] .mx-input-wrapper .mx-input:active:not(.disabled), .mx-datepicker[data-v-488037d] .mx-input-wrapper .mx-input:hover:not(.disabled), .mx-datepicker[data-v-488037d] .mx-input-wrapper .mx-input:focus:not(.disabled) {
+.mx-datepicker[data-v-f0bfd95] .mx-input-wrapper .mx-input:active:not(.disabled), .mx-datepicker[data-v-f0bfd95] .mx-input-wrapper .mx-input:hover:not(.disabled), .mx-datepicker[data-v-f0bfd95] .mx-input-wrapper .mx-input:focus:not(.disabled) {
   border-color: var(--color-primary-element);
 }
-.mx-datepicker[data-v-488037d] .mx-input-wrapper:disabled, .mx-datepicker[data-v-488037d] .mx-input-wrapper.disabled {
+.mx-datepicker[data-v-f0bfd95] .mx-input-wrapper:disabled, .mx-datepicker[data-v-f0bfd95] .mx-input-wrapper.disabled {
   cursor: not-allowed;
   opacity: 0.7;
 }
-.mx-datepicker[data-v-488037d] .mx-input-wrapper .mx-icon-calendar,
-.mx-datepicker[data-v-488037d] .mx-input-wrapper .mx-icon-clear {
+.mx-datepicker[data-v-f0bfd95] .mx-input-wrapper .mx-icon-calendar,
+.mx-datepicker[data-v-f0bfd95] .mx-input-wrapper .mx-icon-clear {
   color: var(--color-text-lighter);
 }
 
@@ -695,7 +695,7 @@
   color: var(--color-main-text);
   background-color: var(--color-background-darker);
 }
-.mx-datepicker-main .mx-calendar-header, .mx-datepicker-main .mx-time-header {
+.mx-datepicker-main .mx-calendar-header {
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
@@ -703,7 +703,7 @@
   height: var(--default-clickable-area);
   margin-bottom: 4px;
 }
-.mx-datepicker-main .mx-calendar-header button, .mx-datepicker-main .mx-time-header button {
+.mx-datepicker-main .mx-calendar-header button {
   min-width: 32px;
   min-height: 32px;
   margin: 0;
@@ -716,21 +716,21 @@
   background-color: transparent;
   line-height: 20px;
 }
-.mx-datepicker-main .mx-calendar-header button:hover, .mx-datepicker-main .mx-time-header button:hover, .mx-datepicker-main .mx-calendar-header button:focus, .mx-datepicker-main .mx-time-header button:focus {
+.mx-datepicker-main .mx-calendar-header button:hover, .mx-datepicker-main .mx-calendar-header button:focus {
   opacity: 1;
   color: var(--color-main-text);
   background-color: var(--color-background-darker);
 }
-.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right {
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right {
   align-items: center;
   justify-content: center;
   width: 32px;
   padding: 0;
 }
-.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i::after, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i::before, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right > i::before {
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i::before, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i::after, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i::before {
   content: none;
 }
-.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-left > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-left > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right > i {
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-left > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-left > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right > i, .mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right > i {
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: center;
@@ -739,29 +739,29 @@
   width: 32px;
   height: 32px;
 }
-.mx-datepicker-main .mx-calendar-header button.mx-btn-text, .mx-datepicker-main .mx-time-header button.mx-btn-text {
+.mx-datepicker-main .mx-calendar-header button.mx-btn-text {
   line-height: initial;
 }
-.mx-datepicker-main .mx-calendar-header .mx-calendar-header-label, .mx-datepicker-main .mx-time-header .mx-calendar-header-label {
+.mx-datepicker-main .mx-calendar-header .mx-calendar-header-label {
   display: flex;
   color: var(--color-main-text);
 }
-.mx-datepicker-main .mx-calendar-header .mx-btn-icon-double-left > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-double-left > i {
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-double-left > i {
   background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M18.4%207.4L17%206l-6%206%206%206%201.4-1.4-4.6-4.6%204.6-4.6m-6%200L11%206l-6%206%206%206%201.4-1.4L7.8%2012l4.6-4.6z'/%3e%3c/svg%3e");
 }
-.mx-datepicker-main .mx-calendar-header .mx-btn-icon-left > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-left > i {
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-left > i {
   background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M15.4%2016.6L10.8%2012l4.6-4.6L14%206l-6%206%206%206%201.4-1.4z'/%3e%3c/svg%3e");
 }
-.mx-datepicker-main .mx-calendar-header .mx-btn-icon-right > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-right > i {
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-right > i {
   background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M8.6%2016.6l4.6-4.6-4.6-4.6L10%206l6%206-6%206-1.4-1.4z'/%3e%3c/svg%3e");
 }
-.mx-datepicker-main .mx-calendar-header .mx-btn-icon-double-right > i, .mx-datepicker-main .mx-time-header .mx-btn-icon-double-right > i {
+.mx-datepicker-main .mx-calendar-header .mx-btn-icon-double-right > i {
   background-image: url("data:image/svg+xml,%3c!--%20-%20SPDX-FileCopyrightText:%202020%20Google%20Inc.%20-%20SPDX-License-Identifier:%20Apache-2.0%20--%3e%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20fill='%23222'%3e%3cpath%20d='M5.6%207.4L7%206l6%206-6%206-1.4-1.4%204.6-4.6-4.6-4.6m6%200L13%206l6%206-6%206-1.4-1.4%204.6-4.6-4.6-4.6z'/%3e%3c/svg%3e");
 }
-.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-right {
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-right {
   order: 2;
 }
-.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right, .mx-datepicker-main .mx-time-header button.mx-btn-icon-double-right {
+.mx-datepicker-main .mx-calendar-header button.mx-btn-icon-double-right {
   order: 3;
 }
 .mx-datepicker-main .mx-calendar-week-mode .mx-date-row .mx-week-number {

package/dist/assets/{NcEmptyContent-xdTcF0yQ.css → NcEmptyContent-CUFc_Dds.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-e5f606f7] {
+.material-design-icon[data-v-c3123941] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.empty-content[data-v-e5f606f7] {
+.empty-content[data-v-c3123941] {
   display: flex;
   align-items: center;
   flex-direction: column;
@@ -25,11 +25,11 @@
   flex-grow: 1;
   padding: var(--default-grid-baseline);
 }
-.modal-wrapper .empty-content[data-v-e5f606f7] {
+.modal-wrapper .empty-content[data-v-c3123941] {
   margin-top: 5vh;
   margin-bottom: 5vh;
 }
-.empty-content__icon[data-v-e5f606f7] {
+.empty-content__icon[data-v-c3123941] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -41,28 +41,28 @@
   background-position: center;
   background-size: 64px;
 }
-.empty-content__icon[data-v-e5f606f7] svg {
+.empty-content__icon[data-v-c3123941] svg {
   width: 64px !important;
   height: 64px !important;
   max-width: 64px !important;
   max-height: 64px !important;
 }
-.empty-content__name[data-v-e5f606f7] {
+.empty-content__name[data-v-c3123941] {
   margin-bottom: 10px;
   text-align: center;
   font-weight: bold;
   font-size: 20px;
   line-height: 30px;
 }
-.empty-content__description[data-v-e5f606f7] {
+.empty-content__description[data-v-c3123941] {
   color: var(--color-text-maxcontrast);
   text-align: center;
   text-wrap-style: balance;
 }
-.empty-content__action[data-v-e5f606f7] {
+.empty-content__action[data-v-c3123941] {
   margin-top: 8px;
 }
-.modal-wrapper .empty-content__action[data-v-e5f606f7] {
+.modal-wrapper .empty-content__action[data-v-c3123941] {
   margin-top: 20px;
   display: flex;
 }

package/dist/assets/{NcHeaderButton-CeT-dsLr.css → NcHeaderButton-DI-1Gsph.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-598aea0c] {
+.material-design-icon[data-v-f1ee5a71] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -21,34 +21,34 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-.header-menu[data-v-598aea0c] {
+.header-menu[data-v-f1ee5a71] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
 }
-.header-menu .header-menu__trigger[data-v-598aea0c] {
+.header-menu .header-menu__trigger[data-v-f1ee5a71] {
   --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-598aea0c]:focus-visible {
+.header-menu .header-menu__trigger[data-v-f1ee5a71]:focus-visible {
   outline: none !important;
   box-shadow: none !important;
 }
-.header-menu .header-menu__trigger[data-v-598aea0c] .button-vue__icon svg,
-.header-menu .header-menu__trigger[data-v-598aea0c] .button-vue__icon:not(:has(svg)) {
+.header-menu .header-menu__trigger[data-v-f1ee5a71] .button-vue__icon svg,
+.header-menu .header-menu__trigger[data-v-f1ee5a71] .button-vue__icon:not(:has(svg)) {
   mask: var(--header-menu-icon-mask, none);
 }
-.header-menu--opened .header-menu__trigger[data-v-598aea0c], .header-menu__trigger[data-v-598aea0c]:hover, .header-menu__trigger[data-v-598aea0c]:focus, .header-menu__trigger[data-v-598aea0c]:active {
+.header-menu--opened .header-menu__trigger[data-v-f1ee5a71], .header-menu__trigger[data-v-f1ee5a71]:hover, .header-menu__trigger[data-v-f1ee5a71]:focus, .header-menu__trigger[data-v-f1ee5a71]:active {
   opacity: 1;
 }
 @media only screen and (max-width: 512px) {
-.header-menu[data-v-598aea0c] {
+.header-menu[data-v-f1ee5a71] {
     width: var(--default-clickable-area);
 }
-.header-menu .header-menu__trigger[data-v-598aea0c] {
+.header-menu .header-menu__trigger[data-v-f1ee5a71] {
     --button-size: var(--default-clickable-area) !important;
 }
 }

package/dist/assets/{NcHeaderMenu-BXb9npZp.css → NcHeaderMenu-BkpmEa3M.css}

@@ -9,7 +9,7 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-80cd9705] {
+.material-design-icon[data-v-f00deac7] {
   display: flex;
   align-self: center;
   justify-self: center;
@@ -21,38 +21,38 @@
  * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-.header-menu[data-v-80cd9705] {
+.header-menu[data-v-f00deac7] {
   position: relative;
   width: var(--header-height);
   height: var(--header-height);
 }
-.header-menu .header-menu__trigger[data-v-80cd9705] {
+.header-menu .header-menu__trigger[data-v-f00deac7] {
   --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-80cd9705]:focus-visible {
+.header-menu .header-menu__trigger[data-v-f00deac7]:focus-visible {
   outline: none !important;
   box-shadow: none !important;
 }
-.header-menu .header-menu__trigger[data-v-80cd9705] .button-vue__icon svg,
-.header-menu .header-menu__trigger[data-v-80cd9705] .button-vue__icon:not(:has(svg)) {
+.header-menu .header-menu__trigger[data-v-f00deac7] .button-vue__icon svg,
+.header-menu .header-menu__trigger[data-v-f00deac7] .button-vue__icon:not(:has(svg)) {
   mask: var(--header-menu-icon-mask, none);
 }
-.header-menu--opened .header-menu__trigger[data-v-80cd9705], .header-menu__trigger[data-v-80cd9705]:hover, .header-menu__trigger[data-v-80cd9705]:focus, .header-menu__trigger[data-v-80cd9705]:active {
+.header-menu--opened .header-menu__trigger[data-v-f00deac7], .header-menu__trigger[data-v-f00deac7]:hover, .header-menu__trigger[data-v-f00deac7]:focus, .header-menu__trigger[data-v-f00deac7]:active {
   opacity: 1;
 }
 @media only screen and (max-width: 512px) {
-.header-menu[data-v-80cd9705] {
+.header-menu[data-v-f00deac7] {
     width: var(--default-clickable-area);
 }
-.header-menu .header-menu__trigger[data-v-80cd9705] {
+.header-menu .header-menu__trigger[data-v-f00deac7] {
     --button-size: var(--default-clickable-area) !important;
 }
 }
-.header-menu__wrapper[data-v-80cd9705] {
+.header-menu__wrapper[data-v-f00deac7] {
   position: fixed;
   z-index: 2000;
   top: var(--header-height);
@@ -64,7 +64,7 @@
   background-color: var(--color-main-background);
   filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 }
-.header-menu__carret[data-v-80cd9705] {
+.header-menu__carret[data-v-f00deac7] {
   position: absolute;
   z-index: 2001;
   bottom: 0;
@@ -76,13 +76,13 @@
   border: 10px solid transparent;
   border-bottom-color: var(--color-main-background);
 }
-.header-menu__content[data-v-80cd9705] {
+.header-menu__content[data-v-f00deac7] {
   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-80cd9705] .empty-content {
+.header-menu__content[data-v-f00deac7] .empty-content {
   margin: 12vh 10px;
 }

package/dist/assets/NcHotkey-QklVKSyr.css

@@ -0,0 +1,44 @@
+/**
+ * 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_19tul_12 {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+._hotkey_19tul_20 {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: stretch;
+  padding-inline: var(--border-radius-element); /* Align with form group */
+}
+._hotkey_19tul_20:first-child ._hotkey__label_19tul_26,
+._hotkey_19tul_20:first-child ._hotkey__keys_19tul_27 {
+  border-block-start: none;
+}
+._hotkey__label_19tul_26,
+._hotkey__keys_19tul_27 {
+  display: flex;
+  align-items: center;
+  padding-block: calc(2 * var(--default-grid-baseline));
+  border-block-start: 1px solid var(--color-border);
+}
+._hotkey__label_19tul_26 {
+  flex: 1 1 200px;
+}
+._hotkey__keys_19tul_27 {
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  justify-content: end;
+  row-gap: calc(1 * var(--default-grid-baseline));
+}

package/dist/assets/NcHotkeyList-B42a0d8Z.css

@@ -0,0 +1,9 @@
+
+._hotkeyList_1lbg8_2 {
+	/* Too wide list is less readable - 400px seems a good width */
+	max-width: 400px;
+}
+._hotkeyList__heading_1lbg8_7 {
+	font-weight: bold;
+	margin-inline: var(--border-radius-element); /* Align with form group */
+}