@nextcloud/vue 9.1.0 → 9.3.0

package/dist/assets/{NcButton-BjcEkfk2.css → NcButton-DtYLJgG8.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-1057e2a8] {
+.material-design-icon[data-v-e4697e39] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.button-vue[data-v-1057e2a8] {
+.button-vue[data-v-e4697e39] {
   --button-size: var(--default-clickable-area);
   --button-inner-size: calc(var(--button-size) - 4px);
   --button-radius: var(--border-radius-element);
@@ -45,52 +45,52 @@
   font-size: var(--default-font-size);
   font-weight: bold;
 }
-.button-vue--size-small[data-v-1057e2a8] {
+.button-vue--size-small[data-v-e4697e39] {
   --button-size: var(--clickable-area-small);
   --button-radius: var(--border-radius-small);
 }
-.button-vue--size-large[data-v-1057e2a8] {
+.button-vue--size-large[data-v-e4697e39] {
   --button-size: var(--clickable-area-large);
 }
-.button-vue[data-v-1057e2a8] * {
+.button-vue[data-v-e4697e39] * {
   cursor: pointer;
 }
-.button-vue[data-v-1057e2a8]:focus {
+.button-vue[data-v-e4697e39]:focus {
   outline: none;
 }
-.button-vue[data-v-1057e2a8]:disabled {
+.button-vue[data-v-e4697e39]:disabled {
   filter: saturate(0.7);
   opacity: 0.5;
   cursor: default;
 }
-.button-vue[data-v-1057e2a8]:disabled * {
+.button-vue[data-v-e4697e39]:disabled * {
   cursor: default;
 }
-.button-vue[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue[data-v-e4697e39]:hover:not(:disabled) {
   background-color: var(--color-primary-element-light-hover);
 }
-.button-vue[data-v-1057e2a8]:active {
+.button-vue[data-v-e4697e39]:active {
   background-color: var(--color-primary-element-light);
 }
-.button-vue__wrapper[data-v-1057e2a8] {
+.button-vue__wrapper[data-v-e4697e39] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 100%;
 }
-.button-vue--end .button-vue__wrapper[data-v-1057e2a8] {
+.button-vue--end .button-vue__wrapper[data-v-e4697e39] {
   justify-content: end;
 }
-.button-vue--start .button-vue__wrapper[data-v-1057e2a8] {
+.button-vue--start .button-vue__wrapper[data-v-e4697e39] {
   justify-content: start;
 }
-.button-vue--reverse .button-vue__wrapper[data-v-1057e2a8] {
+.button-vue--reverse .button-vue__wrapper[data-v-e4697e39] {
   flex-direction: row-reverse;
 }
-.button-vue--reverse[data-v-1057e2a8] {
+.button-vue--reverse[data-v-e4697e39] {
   --button-padding: var(--button-padding-default) var(--default-grid-baseline);
 }
-.button-vue__icon[data-v-1057e2a8] {
+.button-vue__icon[data-v-e4697e39] {
   --default-clickable-area: var(--button-inner-size);
   height: var(--button-inner-size);
   width: var(--button-inner-size);
@@ -100,18 +100,18 @@
   justify-content: center;
   align-items: center;
 }
-.button-vue__icon[data-v-1057e2a8]:empty {
+.button-vue__icon[data-v-e4697e39]:empty {
   display: none;
 }
-.button-vue--size-small .button-vue__icon[data-v-1057e2a8] > * {
+.button-vue--size-small .button-vue__icon[data-v-e4697e39] > * {
   max-height: 16px;
   max-width: 16px;
 }
-.button-vue--size-small .button-vue__icon[data-v-1057e2a8] svg {
+.button-vue--size-small .button-vue__icon[data-v-e4697e39] svg {
   height: 16px;
   width: 16px;
 }
-.button-vue__text[data-v-1057e2a8] {
+.button-vue__text[data-v-e4697e39] {
   font-weight: bold;
   margin-bottom: 1px;
   padding: 2px 0;
@@ -119,107 +119,107 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.button-vue__text[data-v-1057e2a8]:empty {
+.button-vue__text[data-v-e4697e39]:empty {
   display: none;
 }
-.button-vue[data-v-1057e2a8]:has(.button-vue__text:empty) {
+.button-vue[data-v-e4697e39]:has(.button-vue__text:empty) {
   --button-padding: var(--button-radius);
   line-height: 1;
   width: var(--button-size) !important;
 }
-.button-vue[data-v-1057e2a8]:has(.button-vue__icon:empty) {
+.button-vue[data-v-e4697e39]:has(.button-vue__icon:empty) {
   --button-padding: var(--button-padding-default);
 }
-.button-vue:has(.button-vue__icon:empty) .button-vue__text[data-v-1057e2a8] {
+.button-vue:has(.button-vue__icon:empty) .button-vue__text[data-v-e4697e39] {
   padding-inline: var(--default-grid-baseline);
 }
-.button-vue--wide[data-v-1057e2a8] {
+.button-vue--wide[data-v-e4697e39] {
   width: 100%;
 }
-.button-vue[data-v-1057e2a8]:focus-visible {
+.button-vue[data-v-e4697e39]:focus-visible {
   outline: 2px solid var(--color-main-text) !important;
   box-shadow: 0 0 0 4px var(--color-main-background) !important;
 }
-.button-vue:focus-visible.button-vue--vue-tertiary-on-primary[data-v-1057e2a8] {
+.button-vue:focus-visible.button-vue--vue-tertiary-on-primary[data-v-e4697e39] {
   outline: 2px solid var(--color-primary-element-text);
   border-radius: var(--border-radius-element);
   background-color: transparent;
 }
-.button-vue--primary[data-v-1057e2a8] {
+.button-vue--primary[data-v-e4697e39] {
   background-color: var(--color-primary-element);
   border-color: var(--color-primary-element-hover);
   color: var(--color-primary-element-text);
 }
-.button-vue--primary[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--primary[data-v-e4697e39]:hover:not(:disabled) {
   background-color: var(--color-primary-element-hover);
 }
-.button-vue--primary[data-v-1057e2a8]:active {
+.button-vue--primary[data-v-e4697e39]:active {
   background-color: var(--color-primary-element);
 }
-.button-vue--secondary[data-v-1057e2a8] {
+.button-vue--secondary[data-v-e4697e39] {
   background-color: var(--color-primary-element-light);
   border-color: var(--color-primary-element-light-hover);
   color: var(--color-primary-element-light-text);
 }
-.button-vue--secondary[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--secondary[data-v-e4697e39]:hover:not(:disabled) {
   color: var(--color-primary-element-light-text);
   background-color: var(--color-primary-element-light-hover);
 }
-.button-vue--tertiary[data-v-1057e2a8] {
+.button-vue--tertiary[data-v-e4697e39] {
   background-color: transparent;
   border-color: transparent;
   color: var(--color-main-text);
 }
-.button-vue--tertiary[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--tertiary[data-v-e4697e39]:hover:not(:disabled) {
   background-color: var(--color-background-hover);
 }
-.button-vue--tertiary-no-background[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--tertiary-no-background[data-v-e4697e39]:hover:not(:disabled) {
   background-color: transparent;
 }
-.button-vue--tertiary-on-primary[data-v-1057e2a8] {
+.button-vue--tertiary-on-primary[data-v-e4697e39] {
   color: var(--color-primary-element-text);
 }
-.button-vue--tertiary-on-primary[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--tertiary-on-primary[data-v-e4697e39]:hover:not(:disabled) {
   background-color: transparent;
 }
-.button-vue--success[data-v-1057e2a8] {
+.button-vue--success[data-v-e4697e39] {
   border-color: var(--color-success-hover);
   background-color: var(--color-success);
   color: var(--color-success-text);
 }
-.button-vue--success[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--success[data-v-e4697e39]:hover:not(:disabled) {
   background-color: var(--color-success-hover);
 }
-.button-vue--success[data-v-1057e2a8]:active {
+.button-vue--success[data-v-e4697e39]:active {
   background-color: var(--color-success);
 }
-.button-vue--warning[data-v-1057e2a8] {
+.button-vue--warning[data-v-e4697e39] {
   border-color: var(--color-warning-hover);
   background-color: var(--color-warning);
   color: var(--color-warning-text);
 }
-.button-vue--warning[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--warning[data-v-e4697e39]:hover:not(:disabled) {
   background-color: var(--color-warning-hover);
 }
-.button-vue--warning[data-v-1057e2a8]:active {
+.button-vue--warning[data-v-e4697e39]:active {
   background-color: var(--color-warning);
 }
-.button-vue--error[data-v-1057e2a8] {
+.button-vue--error[data-v-e4697e39] {
   border-color: var(--color-error-hover);
   background-color: var(--color-error);
   color: var(--color-error-text);
 }
-.button-vue--error[data-v-1057e2a8]:hover:not(:disabled) {
+.button-vue--error[data-v-e4697e39]:hover:not(:disabled) {
   background-color: var(--color-error-hover);
 }
-.button-vue--error[data-v-1057e2a8]:active {
+.button-vue--error[data-v-e4697e39]:active {
   background-color: var(--color-error);
 }
-.button-vue--legacy[data-v-1057e2a8] {
+.button-vue--legacy[data-v-e4697e39] {
   --button-inner-size: var(--button-size);
   border: none;
   padding-block: 0;
 }
-.button-vue--legacy.button-vue--error[data-v-1057e2a8], .button-vue--legacy.button-vue--success[data-v-1057e2a8], .button-vue--legacy.button-vue--warning[data-v-1057e2a8] {
+.button-vue--legacy.button-vue--error[data-v-e4697e39], .button-vue--legacy.button-vue--success[data-v-e4697e39], .button-vue--legacy.button-vue--warning[data-v-e4697e39] {
   color: white;
 }

package/dist/assets/{NcChip-T6s7HqeL.css → NcChip-DZ8dUSFy.css}

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

package/dist/assets/{NcDashboardWidget-DD06i7ws.css → NcDashboardWidget-DFY9GRrd.css}

@@ -9,46 +9,46 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-b74472e8] {
+.material-design-icon[data-v-6b5fc397] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.dashboard-widget[data-v-b74472e8] .empty-content {
+.dashboard-widget[data-v-6b5fc397] .empty-content {
   text-align: center;
   padding-top: 5vh;
 }
-.dashboard-widget[data-v-b74472e8] .empty-content.half-screen {
+.dashboard-widget[data-v-6b5fc397] .empty-content.half-screen {
   padding-top: 0;
   margin-bottom: 1vh;
 }
-.more[data-v-b74472e8] {
+.more[data-v-6b5fc397] {
   display: block;
   text-align: center;
   color: var(--color-text-maxcontrast);
   line-height: 60px;
   cursor: pointer;
 }
-.more[data-v-b74472e8]:hover, .more[data-v-b74472e8]:focus {
+.more[data-v-6b5fc397]:hover, .more[data-v-6b5fc397]:focus {
   background-color: var(--color-background-hover);
   border-radius: var(--border-radius-element);
   color: var(--color-main-text);
 }
 
 /* skeleton */
-.item-list__entry[data-v-b74472e8] {
+.item-list__entry[data-v-6b5fc397] {
   display: flex;
   align-items: flex-start;
   padding: 8px;
 }
-.item-list__entry .item-avatar[data-v-b74472e8] {
+.item-list__entry .item-avatar[data-v-6b5fc397] {
   position: relative;
   margin-block: auto;
   background-color: var(--color-background-dark) !important;
 }
-.item-list__entry .item__details[data-v-b74472e8] {
+.item-list__entry .item__details[data-v-6b5fc397] {
   padding-inline-start: 8px;
   max-height: var(--default-clickable-area);
   flex-grow: 1;
@@ -56,16 +56,16 @@
   display: flex;
   flex-direction: column;
 }
-.item-list__entry .item__details h3[data-v-b74472e8],
-.item-list__entry .item__details .message[data-v-b74472e8] {
+.item-list__entry .item__details h3[data-v-6b5fc397],
+.item-list__entry .item__details .message[data-v-6b5fc397] {
   white-space: nowrap;
   background-color: var(--color-background-dark);
 }
-.item-list__entry .item__details h3[data-v-b74472e8] {
+.item-list__entry .item__details h3[data-v-6b5fc397] {
   font-size: 100%;
   margin: 0;
 }
-.item-list__entry .item__details .message[data-v-b74472e8] {
+.item-list__entry .item__details .message[data-v-6b5fc397] {
   width: 80%;
   height: 15px;
   margin-top: 5px;

package/dist/assets/{NcDateTimePicker-DW0b4W9D.css → NcDateTimePicker-DL6-rWSN.css}

@@ -95,6 +95,9 @@
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__input:hover:not(.dp__input_focus) {
   border-color: var(--dp-border-color-hover);
 }
+.vue-date-time-picker__wrapper[data-v-02e90461]  .dp__input_not_clearable {
+  padding-inline-end: var(--dp-input-not-clearable-padding) !important;
+}
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__input_reg {
   caret-color: rgba(0, 0, 0, 0);
 }
@@ -770,7 +773,7 @@
 }
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__inc_dec_button:hover {
   background: var(--dp-hover-color);
-  color: var(--dp-primary-color);
+  color: var(--dp-hover-icon-color);
 }
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__time_display {
   cursor: pointer;
@@ -886,7 +889,7 @@
 }
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__action_cancel:hover {
   border-color: var(--dp-primary-color);
-  transition: var(--dp-action-row-transtion);
+  transition: var(--dp-action-row-transition);
 }
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__action_buttons .dp__action_select {
   background: var(--dp-primary-color);
@@ -894,7 +897,7 @@
 }
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__action_buttons .dp__action_select:hover {
   background: var(--dp-primary-color);
-  transition: var(--dp-action-row-transtion);
+  transition: var(--dp-action-row-transition);
 }
 .vue-date-time-picker__wrapper[data-v-02e90461]  .dp__action_buttons .dp__action_select:disabled {
   background: var(--dp-primary-disabled-color);
@@ -947,7 +950,7 @@
   --dp-animation-duration: 0.1s;
   --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1);
   --dp-transition-timing: ease-out;
-  --dp-action-row-transtion: all 0.2s ease-in;
+  --dp-action-row-transition: all 0.2s ease-in;
   --dp-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --dp-border-radius: 4px;
   --dp-cell-border-radius: 4px;
@@ -963,6 +966,7 @@
   --dp-common-padding: 10px;
   --dp-input-icon-padding: 35px;
   --dp-input-padding: 6px 30px 6px 12px;
+  --dp-input-not-clearable-padding: 12px;
   --dp-menu-min-width: 260px;
   --dp-action-buttons-padding: 1px 6px;
   --dp-row-margin: 5px 0;

package/dist/assets/NcFormBox-D-kcijXp.css

@@ -0,0 +1,54 @@
+/**
+ * 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_1u9di_12 {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+._ncFormBox_1u9di_20 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(1 * var(--default-grid-baseline));
+}
+._ncFormBox_1u9di_20._ncFormBox_row_1u9di_25 {
+  flex-direction: row;
+}
+._ncFormBox__item_1u9di_29 {
+  border-radius: var(--border-radius-small) !important;
+}
+._ncFormBox_col_1u9di_33 {
+  flex-direction: column;
+}
+._ncFormBox_col_1u9di_33 ._ncFormBox__item_1u9di_29:first-child {
+  border-start-start-radius: var(--border-radius-element) !important;
+  border-start-end-radius: var(--border-radius-element) !important;
+}
+._ncFormBox_col_1u9di_33 ._ncFormBox__item_1u9di_29:last-child {
+  border-end-start-radius: var(--border-radius-element) !important;
+  border-end-end-radius: var(--border-radius-element) !important;
+}
+._ncFormBox_row_1u9di_25 {
+  flex-direction: row;
+}
+._ncFormBox_row_1u9di_25 ._ncFormBox__item_1u9di_29 {
+  flex: 1 1;
+}
+._ncFormBox_row_1u9di_25 ._ncFormBox__item_1u9di_29:first-child {
+  border-start-start-radius: var(--border-radius-element) !important;
+  border-end-start-radius: var(--border-radius-element) !important;
+}
+._ncFormBox_row_1u9di_25 ._ncFormBox__item_1u9di_29:last-child {
+  border-end-end-radius: var(--border-radius-element) !important;
+  border-start-end-radius: var(--border-radius-element) !important;
+}

package/dist/assets/{NcAppSettingsSection-DIVdlb0g.css → NcFormBoxButton-C6EvdLK4.css}

@@ -9,22 +9,24 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-78ad5bf4] {
+._material-design-icon_15jyc_12 {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.app-settings-section[data-v-78ad5bf4] {
-  margin-bottom: 80px;
-}
-.app-settings-section__name[data-v-78ad5bf4] {
-  font-size: 1.6em;
+._formBoxButton_15jyc_20 {
+  /* Reset default HTML button styles */
+  background: unset;
+  border: none;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  text-decoration: none;
+  text-align: inherit;
+  line-height: inherit;
+  padding: 0;
   margin: 0;
-  padding: 20px 0;
-  font-weight: bold;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  outline: none;
 }

package/dist/assets/NcFormBoxItem-BfXKp9xJ.css

@@ -0,0 +1,88 @@
+/**
+ * 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_v5un7_12 {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+._formBoxItem_v5un7_20 {
+  --nc-form-box-item-border-width: 1px;
+  --nc-form-box-item-min-height: 40px;
+  --form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));
+  --form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));
+  --color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));
+  --color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: calc(2 * var(--default-grid-baseline));
+  min-height: var(--nc-form-box-item-min-height);
+  padding-inline: var(--form-element-label-padding);
+  border: 1px solid var(--color-primary-element-extra-light-hover);
+  border-bottom-width: 2px;
+  border-radius: var(--border-radius-element);
+  background-color: var(--color-primary-element-extra-light);
+  color: var(--color-main-text);
+  transition-property: color, border-color, background-color;
+  transition-duration: var(--animation-quick);
+  transition-timing-function: linear;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: pointer;
+}
+._formBoxItem_v5un7_20 * {
+  cursor: inherit;
+}
+._formBoxItem_v5un7_20:has(:disabled) {
+  cursor: default;
+  opacity: 0.5;
+}
+._formBoxItem_v5un7_20:hover:not(:has(:disabled)) {
+  color: var(--color-primary-element-light-text);
+  background-color: var(--color-primary-element-extra-light-hover);
+}
+._formBoxItem_v5un7_20:has(:focus-visible) {
+  outline: 2px solid var(--color-main-text);
+  box-shadow: 0 0 0 4px var(--color-main-background);
+}
+._formBoxItem_v5un7_20._formBoxItem_legacy_v5un7_60 {
+  --nc-form-box-item-border-width: 0px;
+  border: none;
+}
+._formBoxItem_v5un7_20._formBoxItem_inverted_v5un7_64 ._formBoxItem__element_v5un7_64 {
+  color: var(--color-text-maxcontrast);
+}
+._formBoxItem_v5un7_20._formBoxItem_inverted_v5un7_64 ._formBoxItem__description_v5un7_67 {
+  color: inherit;
+}
+._formBoxItem__content_v5un7_71 {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-block: calc(2 * var(--default-grid-baseline));
+  overflow-wrap: anywhere;
+}
+._formBoxItem__element_v5un7_64::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+._formBoxItem__description_v5un7_67 {
+  color: var(--color-text-maxcontrast);
+}
+._formBoxItem__icon_v5un7_89 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}

package/dist/assets/NcFormBoxSwitch-BmyNQCbA.css

@@ -0,0 +1,37 @@
+/**
+ * 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_hjv1a_12 {
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  align-items: center;
+  justify-content: center;
+}
+input._formBoxSwitch__input_hjv1a_20 {
+  margin: 0;
+  width: var(--default-clickable-area);
+  /* Keep it visually hidden but on the position of visual switch icon */
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: var(--form-element-label-offset);
+  z-index: -1;
+  opacity: 0 !important;
+  /* Override server styles */
+  height: auto;
+  cursor: inherit;
+}
+._formBoxSwitch__icon_hjv1a_34 {
+  color: var(--color-text-maxcontrast);
+}
+input:checked + ._formBoxSwitch__icon_hjv1a_34 {
+  color: var(--color-primary-element);
+}