apostrophe 4.6.0 → 4.7.0

package/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue

@@ -160,16 +160,19 @@ export default {
 };
 </script>
 <style scoped lang='scss'>
+
   .apos-file-dropzone {
     @include apos-button-reset();
     @include type-base;
 
-    display: block;
-    margin: 10px 0;
-    padding: 20px;
-    border: 2px dashed var(--a-base-8);
-    border-radius: var(--a-border-radius);
-    transition: all 200ms ease;
+    & {
+      display: block;
+      margin: 10px 0;
+      padding: 20px;
+      border: 2px dashed var(--a-base-8);
+      border-radius: var(--a-border-radius);
+      transition: all 200ms ease;
+    }
 
     &:hover {
       border-color: var(--a-primary);

package/modules/@apostrophecms/ui/ui/apos/components/AposIndicator.vue

@@ -1,5 +1,6 @@
 <template>
   <span
+    ref="icon"
     v-apos-tooltip="tooltip"
     class="apos-indicator"
     :aria-hidden="decorative"
@@ -43,6 +44,10 @@ export default {
       type: Boolean,
       default: true
     }
+  },
+  emits: [ 'icon' ],
+  mounted() {
+    this.$emit('icon', this.$refs.icon);
   }
 };
 </script>

package/modules/@apostrophecms/ui/ui/apos/components/AposLoadingBlock.vue

@@ -45,6 +45,8 @@ const props = defineProps({
 .apos-loading-block__text {
   @include type-base;
 
-  color: var(--a-base-1);
+  & {
+    color: var(--a-base-1);
+  }
 }
 </style>

package/modules/@apostrophecms/ui/ui/apos/components/AposLocale.vue

@@ -27,7 +27,9 @@ const locale = computed(() => {
   .apos-locale {
     @include type-base;
 
-    font-weight: var(--a-weight-bold);
+    & {
+      font-weight: var(--a-weight-bold);
+    }
   }
 
   .apos-locale__label-name {

package/modules/@apostrophecms/ui/ui/apos/components/AposLocalePicker.vue

@@ -175,15 +175,17 @@ function getForbiddenTooltip(locale) {
 .apos-locales-picker__filter {
   @include type-large;
 
-  box-sizing: border-box;
-  width: 100%;
-  padding: 20px 45px 20px 20px;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 1px solid var(--a-base-9);
-  border-left: 0;
-  border-top-right-radius: var(--a-border-radius);
-  border-top-left-radius: var(--a-border-radius);
+  & {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 20px 45px 20px 20px;
+    border-top: 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--a-base-9);
+    border-left: 0;
+    border-top-right-radius: var(--a-border-radius);
+    border-top-left-radius: var(--a-border-radius);
+  }
 
   &::placeholder {
     color: var(--a-base-4);

package/modules/@apostrophecms/ui/ui/apos/components/AposMinMaxCount.vue

@@ -104,9 +104,11 @@ export default {
   .apos-min-max-count {
     @include type-help;
 
-    display: flex;
-    flex-grow: 1;
-    margin-bottom: $spacing-base;
+    & {
+      display: flex;
+      flex-grow: 1;
+      margin-bottom: $spacing-base;
+    }
   }
 
   .apos-has-error {

package/modules/@apostrophecms/ui/ui/apos/components/AposPager.vue

@@ -99,8 +99,10 @@ export default {
   .apos-pager {
     @include type-base;
 
-    display: inline-flex;
-    align-items: center;
+    & {
+      display: inline-flex;
+      align-items: center;
+    }
   }
 
   .apos-input--select {

package/modules/@apostrophecms/ui/ui/apos/components/AposPagerDots.vue

@@ -56,12 +56,14 @@ export default {
   .apos-pager-dots__button {
     @include apos-button-reset();
 
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: var(--a-primary-light-40);
-    margin-right: 20px;
-    transition: all 300ms ease;
+    & {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: var(--a-primary-light-40);
+      margin-right: 20px;
+      transition: all 300ms ease;
+    }
   }
 
   .apos-pager-dots__button.apos-is-active {

package/modules/@apostrophecms/ui/ui/apos/components/AposSlat.vue

@@ -236,14 +236,16 @@ export default {
   .apos-slat {
     @include apos-transition();
 
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    border: 1px solid var(--a-base-5);
-    border-radius: var(--a-border-radius);
-    background-color: var(--a-base-9);
-    color: var(--a-text-primary);
+    & {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px;
+      border: 1px solid var(--a-base-5);
+      border-radius: var(--a-border-radius);
+      background-color: var(--a-base-9);
+      color: var(--a-text-primary);
+    }
 
     &.apos-is-disabled {
       .apos-slat__control--view {
@@ -349,10 +351,12 @@ export default {
   .apos-slat__label {
     @include type-small;
 
-    overflow: hidden;
-    margin-left: 5px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    & {
+      overflow: hidden;
+      margin-left: 5px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   .apos-slat__editor-btn {
@@ -386,7 +390,9 @@ export default {
   .apos-slat__size {
     @include type-small;
 
-    margin-right: 5px;
+    & {
+      margin-right: 5px;
+    }
   }
 
   .apos-slat__control--view {
@@ -396,10 +402,12 @@ export default {
   .apos-slat__extension {
     @include type-help;
 
-    display: inline-block;
-    padding: 4px;
-    background-color: var(--a-generic);
-    color: var(--a-white);
+    & {
+      display: inline-block;
+      padding: 4px;
+      background-color: var(--a-generic);
+      color: var(--a-white);
+    }
   }
 
   // file types

package/modules/@apostrophecms/ui/ui/apos/components/AposSlatList.vue

@@ -131,13 +131,7 @@ export default {
     update({
       oldIndex, newIndex
     }) {
-      if (oldIndex !== newIndex) {
-        this.next = this.next.map((elem, index) => {
-          return index === oldIndex
-            ? this.next[newIndex]
-            : (index === newIndex && this.next[oldIndex]) || elem;
-        });
-      }
+      this.next.splice(newIndex, 0, this.next.splice(oldIndex, 1)[0]);
     },
     engage(id) {
       this.engaged = id;
@@ -216,8 +210,10 @@ export default {
   .apos-slat-limit {
     @include type-help;
 
-    margin: 10px 0 0;
-    text-align: center;
+    & {
+      margin: 10px 0 0;
+      text-align: center;
+    }
 
     span {
       margin-right: 10px;

package/modules/@apostrophecms/ui/ui/apos/components/AposSubformPreview.vue

@@ -116,9 +116,11 @@ function inferFieldValues(schema, values, $t) {
   &__value {
     @include type-base;
 
-    line-height: 1;
-    // color: var(--a-base-1);
-    color: var(--a-text-primary);
+    & {
+      line-height: 1;
+      // color: var(--a-base-1);
+      color: var(--a-text-primary);
+    }
   }
 
   &__value-block {
@@ -129,9 +131,11 @@ function inferFieldValues(schema, values, $t) {
   &__label {
     @include type-base;
 
-    display: inline-block;
-    line-height: 1;
-    color: var(--a-base-3);
+    & {
+      display: inline-block;
+      line-height: 1;
+      color: var(--a-base-3);
+    }
   }
 }
 </style>

package/modules/@apostrophecms/ui/ui/apos/components/AposTag.vue

@@ -36,13 +36,15 @@ export default {
 .apos-tag {
   @include type-base;
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 6px 12px;
-  color: var(--a-base-8);
-  border-radius: var(--a-border-radius);
-  background-color: var(--a-base-1);
+  & {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px 12px;
+    color: var(--a-base-8);
+    border-radius: var(--a-border-radius);
+    background-color: var(--a-base-1);
+  }
 }
 
 .apos-tag__remove {

package/modules/@apostrophecms/ui/ui/apos/components/AposTagApply.vue

@@ -339,9 +339,11 @@ export default {
   .apos-apply-tag-menu__empty-message {
     @include type-base;
 
-    margin-bottom: 20px;
-    max-width: 240px;
-    text-align: center;
+    & {
+      margin-bottom: 20px;
+      max-width: 240px;
+      text-align: center;
+    }
   }
 
   .apos-apply-tag-menu__empty-icon {
@@ -353,7 +355,9 @@ export default {
     /* stylelint-disable-next-line scale-unlimited/declaration-strict-value */
     @include type-title;
 
-    margin: 0;
+    & {
+      margin: 0;
+    }
   }
 
   .fade-enter-active, .fade-leave-active {

package/modules/@apostrophecms/ui/ui/apos/components/AposTagList.vue

@@ -69,8 +69,10 @@ export default {
 .apos-tag-list__title {
   @include type-base;
 
-  margin-bottom: 15px;
-  color: var(--a-base-3);
+  & {
+    margin-bottom: 15px;
+    color: var(--a-base-3);
+  }
 }
 
 .apos-tag-list__items {

package/modules/@apostrophecms/ui/ui/apos/components/AposTagListItem.vue

@@ -55,11 +55,13 @@ export default {
   @include apos-button-reset();
   @include apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out);
 
-  display: flex;
-  align-items: center;
-  padding: 2px 0;
-  border-radius: 5px;
-  background: transparent;
+  & {
+    display: flex;
+    align-items: center;
+    padding: 2px 0;
+    border-radius: 5px;
+    background: transparent;
+  }
 
   &.apos-is-active {
     color: var(--a-primary);

package/modules/@apostrophecms/ui/ui/apos/components/AposToggle.vue

@@ -2,8 +2,11 @@
   <div class="apos-toggle__container">
     <div
       class="apos-toggle__slider"
+      tabindex="0"
       :class="{'apos-toggle__slider--activated': !modelValue}"
       @click="$emit('toggle')"
+      @keydown.stop.space="$emit('toggle')"
+      @keydown.stop.enter="$emit('toggle')"
     />
   </div>
 </template>
@@ -46,6 +49,13 @@ export default {
       cursor: pointer;
       background-color: var(--a-base-3);
 
+      &:focus,
+      &:hover,
+      &:active {
+        box-shadow: 0 0 10px var(--a-base-1);
+        outline: 2px solid var(--a-primary-transparent-90);
+      }
+
       &::before {
         content: '';
         position: absolute;
@@ -60,6 +70,12 @@ export default {
     &__slider--activated {
       background-color: var(--a-primary);
 
+      &:focus,
+      &:hover,
+      &:active {
+        outline: 2px solid var(--a-primary-transparent-25);
+      }
+
       &::before {
         transform: translateX(calc($toggle-width - $btn-size));
       }

package/modules/@apostrophecms/ui/ui/apos/components/AposTree.vue

@@ -204,7 +204,9 @@ export default {
   .apos-tree {
     @include type-base;
 
-    color: var(--a-text-primary);
+    & {
+      color: var(--a-text-primary);
+    }
   }
 
 </style>

package/modules/@apostrophecms/ui/ui/apos/components/AposTreeRows.vue

@@ -71,7 +71,6 @@
               v-if="options.bulkSelect && index === 0"
               v-model="checkedProxy"
               class="apos-tree__row__checkbox"
-              tabindex="-1"
               :field="{
                 name: row._id,
                 hideLabel: true,
@@ -79,7 +78,6 @@
                   key: 'apostrophe:toggleSelectionOf',
                   title: row.title
                 }),
-                disableFocus: true,
                 readOnly: maxReached && !checked.includes(row._id)
               }"
               :choice="{ value: row._id }"
@@ -494,11 +492,13 @@ export default {
   .apos-tree__row__toggle {
     @include apos-button-reset();
 
-    position: absolute;
-    top: 50%;
-    left: -(math.div($row-nested-h-padding, 2));
-    background-color: var(--a-background-primary);
-    transform: translate(-50%, -50%);
+    & {
+      position: absolute;
+      top: 50%;
+      left: -(math.div($row-nested-h-padding, 2));
+      background-color: var(--a-background-primary);
+      transform: translate(-50%, -50%);
+    }
   }
 
   .apos-tree__row__toggle-icon {
@@ -577,8 +577,10 @@ export default {
   button.apos-tree__cell { /* stylelint-disable-line selector-no-qualifying-type */
     @include apos-button-reset();
 
-    padding: $cell-padding;
-    border-bottom: 1px solid var(--a-base-8);
+    & {
+      padding: $cell-padding;
+      border-bottom: 1px solid var(--a-base-8);
+    }
   }
 
 </style>

package/modules/@apostrophecms/ui/ui/apos/mixins/AposArchiveMixin.js

@@ -132,7 +132,7 @@ export default {
             draft: true
           });
 
-          apos.notify('apostrophe:contentArchived', {
+          await apos.notify('apostrophe:contentArchived', {
             type: 'success',
             icon: 'archive-arrow-down-icon',
             dismiss: true
@@ -258,7 +258,7 @@ export default {
           draft: true
         });
 
-        apos.notify('apostrophe:contentRestored', {
+        await apos.notify('apostrophe:contentRestored', {
           type: 'success',
           icon: 'archive-arrow-up-icon',
           dismiss: true

package/modules/@apostrophecms/ui/ui/apos/mixins/AposPublishMixin.js

@@ -24,7 +24,7 @@ export default {
           body: {},
           busy: true
         });
-        apos.notify('apostrophe:changesPublished', {
+        await apos.notify('apostrophe:changesPublished', {
           type: 'success',
           dismiss: true,
           icon: 'check-all-icon',
@@ -92,7 +92,7 @@ export default {
           body: {},
           busy: true
         });
-        apos.notify('apostrophe:noLongerPublished', {
+        await apos.notify('apostrophe:noLongerPublished', {
           type: 'success',
           dismiss: true
         });
@@ -125,7 +125,7 @@ export default {
           ...doc,
           submitted
         };
-        apos.notify('apostrophe:submittedForReview', {
+        await apos.notify('apostrophe:submittedForReview', {
           type: 'success',
           icon: 'list-status-icon',
           dismiss: true
@@ -155,7 +155,7 @@ export default {
           body: {},
           busy: true
         });
-        apos.notify('apostrophe:dismissedSubmission', {
+        await apos.notify('apostrophe:dismissedSubmission', {
           type: 'success',
           dismiss: true,
           icon: 'close-circle-icon'
@@ -208,7 +208,7 @@ export default {
               body: {},
               busy: true
             });
-            apos.notify('apostrophe:draftDiscarded', {
+            await apos.notify('apostrophe:draftDiscarded', {
               type: 'success',
               dismiss: true,
               icon: 'text-box-remove-icon'
@@ -226,7 +226,7 @@ export default {
               body: {},
               busy: true
             });
-            apos.notify('apostrophe:draftDeleted', {
+            await apos.notify('apostrophe:draftDeleted', {
               type: 'success',
               dismiss: true
             });

package/modules/@apostrophecms/ui/ui/apos/scss/global/_inputs.scss

@@ -11,15 +11,17 @@
   @include type-base;
   @include apos-transition(all);
 
-  box-sizing: border-box;
-  width: 100%;
-  border: 1px solid var(--a-base-8);
-  border-radius: var(--a-border-radius);
-  background-color: var(--a-base-9);
-  color: var(--a-text-primary);
-  // Some  browser styles set `textarea` to monospace.
-  resize: none;
-
+  & {
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid var(--a-base-8);
+    border-radius: var(--a-border-radius);
+    background-color: var(--a-base-9);
+    color: var(--a-text-primary);
+    // Some  browser styles set `textarea` to monospace.
+    resize: none;
+  }
+  
   &::placeholder {
     color: var(--a-base-4);
     font-style: italic;
@@ -147,9 +149,11 @@
 .apos-choice-label {
   @include type-base;
 
-  display: flex;
-  align-items: center;
-  color: var(--a-base-2);
+  & {
+    display: flex;
+    align-items: center;
+    color: var(--a-base-2);
+  }
 
   &:hover:not(.apos-choice-label--disabled) {
     color: var(--a-text-primary);
@@ -237,21 +241,25 @@
 .apos-choice-label-text {
   @include type-base;
 
-  margin-left: $spacing-base;
+  & {
+    margin-left: $spacing-base;
+  }
 }
 
 .apos-input-indicator {
   @include apos-transition($what: all, $duration: 0.1s, $ease: ease-in-out);
 
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  align-self: flex-start;
-  justify-content: center;
-  width: $box-width;
-  height: $box-width;
-  border: 1px solid var(--a-base-4);
-  background-color: var(--a-base-10);
+  & {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    align-self: flex-start;
+    justify-content: center;
+    width: $box-width;
+    height: $box-width;
+    border: 1px solid var(--a-base-4);
+    background-color: var(--a-base-10);
+  }
 
   .apos-choice-label:hover > &,
   .apos-choice-label:focus > & {

package/modules/@apostrophecms/ui/ui/apos/scss/global/_theme.scss

@@ -13,8 +13,8 @@
   --a-danger-button-active: #a10000;
   --a-danger-button-disabled: #ff9d98;
   --a-sensitive: #643810;
-  --a-sensitive-medium: #E2C7B9;
-  --a-sensitive-light: #FFF3E7;
+  --a-sensitive-medium: #e2c7b9;
+  --a-sensitive-light: #fff3e7;
   --a-base-1: #5d5d5d;
   --a-base-2: #6f6f6f;
   --a-base-3: #818181;
@@ -58,7 +58,9 @@
   --a-pdf: #e74c3c;
 
   // Font-Family
-  --a-family-default: -apple-system, system-ui, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  --a-family-default: -apple-system, system-ui, "BlinkMacSystemFont", "Segoe UI",
+    "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
 
   // Font-Weights
   --a-weight-base: 500;
@@ -93,21 +95,23 @@
     @include apos-primary-mixin(#0062ff);
   }
 
-  --a-base-1: #d1d3d5;
-  --a-base-2: #6b7c92;
-  --a-base-3: #607084;
-  --a-base-4: #566477;
-  --a-base-5: #4b5869;
-  --a-base-6: #414d5b;
-  --a-base-7: #36414d;
-  --a-base-8: #2c3540;
-  --a-base-9: #212932;
-  --a-base-10: #171d24;
-  --a-background-primary: #0b0b0c;
-  --a-background-inverted: #fff;
-  --a-overlay: #0062ffe0;
-  --a-text-primary: #fff;
-  --a-text-inverted: #000;
+  & {
+    --a-base-1: #d1d3d5;
+    --a-base-2: #6b7c92;
+    --a-base-3: #607084;
+    --a-base-4: #566477;
+    --a-base-5: #4b5869;
+    --a-base-6: #414d5b;
+    --a-base-7: #36414d;
+    --a-base-8: #2c3540;
+    --a-base-9: #212932;
+    --a-base-10: #171d24;
+    --a-background-primary: #0b0b0c;
+    --a-background-inverted: #fff;
+    --a-overlay: #0062ffe0;
+    --a-text-primary: #fff;
+    --a-text-inverted: #000;
+  }
 }
 
 .apos-theme--primary-default {