@payloadcms/ui 3.0.0-beta.111 → 3.0.0-beta.113

package/dist/elements/Popup/PopupButtonList/index.scss

@@ -1,56 +1,58 @@
 @import '../../../scss/styles.scss';
 
-.popup-button-list {
-  --list-button-padding: calc(var(--base) * 0.5);
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-  gap: 3px;
-  [dir='rtl'] &__text-align--left {
-    text-align: right;
-  }
-  &__text-align--left {
-    text-align: left;
-  }
-
-  &__text-align--center {
-    text-align: center;
-  }
-  [dir='rtl'] &__text-align--right {
+@layer payload-default {
+  .popup-button-list {
+    --list-button-padding: calc(var(--base) * 0.5);
+    display: flex;
+    flex-direction: column;
     text-align: left;
-  }
-  &__text-align--right {
-    text-align: right;
-  }
+    gap: 3px;
+    [dir='rtl'] &__text-align--left {
+      text-align: right;
+    }
+    &__text-align--left {
+      text-align: left;
+    }
 
-  &__button {
-    @extend %btn-reset;
-    padding-left: var(--list-button-padding);
-    padding-right: var(--list-button-padding);
-    padding-top: 2px;
-    padding-bottom: 2px;
-    cursor: pointer;
-    text-align: inherit;
-    line-height: var(--base);
-    text-decoration: none;
-    border-radius: 3px;
+    &__text-align--center {
+      text-align: center;
+    }
+    [dir='rtl'] &__text-align--right {
+      text-align: left;
+    }
+    &__text-align--right {
+      text-align: right;
+    }
 
-    button {
+    &__button {
       @extend %btn-reset;
+      padding-left: var(--list-button-padding);
+      padding-right: var(--list-button-padding);
+      padding-top: 2px;
+      padding-bottom: 2px;
+      cursor: pointer;
+      text-align: inherit;
+      line-height: var(--base);
+      text-decoration: none;
+      border-radius: 3px;
+
+      button {
+        @extend %btn-reset;
 
-      &:focus-visible {
-        outline: none;
+        &:focus-visible {
+          outline: none;
+        }
       }
-    }
 
-    &:hover,
-    &:focus-visible,
-    &:focus-within {
-      background-color: var(--popup-button-highlight);
+      &:hover,
+      &:focus-visible,
+      &:focus-within {
+        background-color: var(--popup-button-highlight);
+      }
     }
-  }
 
-  &__button--selected {
-    background-color: var(--theme-elevation-150);
+    &__button--selected {
+      background-color: var(--theme-elevation-150);
+    }
   }
 }

package/dist/elements/Popup/PopupTrigger/index.scss

@@ -1,29 +1,31 @@
 @import '../../../scss/styles.scss';
 
-.popup-button {
-  height: 100%;
-  color: currentColor;
-  padding: 0;
-  font-size: inherit;
-  line-height: inherit;
-  font-family: inherit;
-  border: 0;
-  cursor: pointer;
-  display: inline-flex;
+@layer payload-default {
+  .popup-button {
+    height: 100%;
+    color: currentColor;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    border: 0;
+    cursor: pointer;
+    display: inline-flex;
 
-  &--background {
-    background: transparent;
-  }
+    &--background {
+      background: transparent;
+    }
 
-  &--size-small {
-    padding: base(0.4);
-  }
+    &--size-small {
+      padding: base(0.4);
+    }
 
-  &--size-medium {
-    padding: base(0.6);
-  }
+    &--size-medium {
+      padding: base(0.6);
+    }
 
-  &--size-large {
-    padding: base(0.8);
+    &--size-large {
+      padding: base(0.8);
+    }
   }
 }

package/dist/elements/Popup/index.scss

@@ -1,216 +1,147 @@
 @import '../../scss/styles.scss';
 
-.popup {
-  --popup-button-highlight: var(--theme-elevation-200);
-  --popup-bg: var(--theme-input-bg);
-  --popup-text: var(--theme-text);
-  --popup-caret-size: 10px;
-  --popup-x-padding: calc(var(--base) * 0.33);
-  --popup-padding: calc(var(--base) * 0.5);
-  --button-size-offset: -8px;
-  position: relative;
-
-  &__trigger-wrap {
-    display: flex;
-    align-items: stretch;
-    height: 100%;
-  }
-
-  &__content {
-    position: absolute;
-    background: var(--popup-bg);
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    z-index: var(--z-popup);
-    max-width: calc(100vw - #{$baseline});
-    color: var(--popup-text);
-    border-radius: 4px;
-    padding-left: var(--popup-padding);
-    padding-right: var(--popup-padding);
-    min-width: var(--popup-width, auto);
-  }
-
-  &__hide-scrollbar {
-    overflow: hidden;
-  }
-
-  &__scroll-container {
-    overflow-y: auto;
-    white-space: nowrap;
-    width: calc(100% + var(--scrollbar-width));
-    padding-top: var(--popup-padding);
-    padding-bottom: var(--popup-padding);
-  }
-
-  &__scroll-content {
-    width: calc(100% - var(--scrollbar-width));
-  }
+@layer payload-default {
+  .popup {
+    --popup-button-highlight: var(--theme-elevation-200);
+    --popup-bg: var(--theme-input-bg);
+    --popup-text: var(--theme-text);
+    --popup-caret-size: 10px;
+    --popup-x-padding: calc(var(--base) * 0.33);
+    --popup-padding: calc(var(--base) * 0.5);
+    --button-size-offset: -8px;
+    position: relative;
 
-  &--show-scrollbar {
-    .popup__scroll-container,
-    .popup__scroll-content {
-      width: 100%;
+    &__trigger-wrap {
+      display: flex;
+      align-items: stretch;
+      height: 100%;
     }
-  }
-
-  &:focus,
-  &:active {
-    outline: none;
-  }
-
-  ////////////////////////////////
-  // SIZE
-  ////////////////////////////////
 
-  &--size-small {
-    --popup-width: 100px;
-    .popup__content {
-      @include shadow-m;
+    &__content {
+      position: absolute;
+      background: var(--popup-bg);
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      z-index: var(--z-popup);
+      max-width: calc(100vw - #{$baseline});
+      color: var(--popup-text);
+      border-radius: 4px;
+      padding-left: var(--popup-padding);
+      padding-right: var(--popup-padding);
+      min-width: var(--popup-width, auto);
     }
-  }
 
-  &--size-medium {
-    --popup-width: 150px;
-    .popup__content {
-      @include shadow-lg;
+    &__hide-scrollbar {
+      overflow: hidden;
     }
-  }
 
-  &--size-large {
-    --popup-width: 200px;
-    .popup__content {
-      @include shadow-lg;
+    &__scroll-container {
+      overflow-y: auto;
+      white-space: nowrap;
+      width: calc(100% + var(--scrollbar-width));
+      padding-top: var(--popup-padding);
+      padding-bottom: var(--popup-padding);
     }
-  }
-
-  ////////////////////////////////
-  /// BUTTON SIZE
-  ////////////////////////////////
 
-  &--button-size-small {
-    --button-size-offset: -8px;
-  }
-
-  &--button-size-medium {
-    --button-size-offset: -4px;
-  }
-
-  &--button-size-large {
-    --button-size-offset: 0px;
-  }
-
-  ////////////////////////////////
-  // HORIZONTAL ALIGNMENT
-  ////////////////////////////////
-  [dir='rtl'] &--h-align-left {
-    .popup__caret {
-      right: var(--popup-padding);
-      left: unset;
-    }
-  }
-  &--h-align-left {
-    .popup__caret {
-      left: var(--popup-padding);
-    }
-  }
-  &--h-align-center {
-    .popup__content {
-      left: 50%;
-      transform: translateX(-50%);
+    &__scroll-content {
+      width: calc(100% - var(--scrollbar-width));
     }
 
-    .popup__caret {
-      left: 50%;
-      transform: translateX(-50%);
+    &--show-scrollbar {
+      .popup__scroll-container,
+      .popup__scroll-content {
+        width: 100%;
+      }
     }
-  }
 
-  [dir='rtl'] &--h-align-right {
-    .popup__content {
-      right: unset;
-      left: 0;
+    &:focus,
+    &:active {
+      outline: none;
     }
 
-    .popup__caret {
-      right: unset;
-      left: var(--popup-padding);
-    }
-  }
+    ////////////////////////////////
+    // SIZE
+    ////////////////////////////////
 
-  &--h-align-right {
-    .popup__content {
-      right: var(--button-size-offset);
+    &--size-small {
+      --popup-width: 100px;
+      .popup__content {
+        @include shadow-m;
+      }
     }
 
-    .popup__caret {
-      right: var(--popup-padding);
+    &--size-medium {
+      --popup-width: 150px;
+      .popup__content {
+        @include shadow-lg;
+      }
     }
-  }
 
-  ////////////////////////////////
-  // VERTICAL ALIGNMENT
-  ////////////////////////////////
+    &--size-large {
+      --popup-width: 200px;
+      .popup__content {
+        @include shadow-lg;
+      }
+    }
 
-  &__caret {
-    position: absolute;
-    border: var(--popup-caret-size) solid transparent;
-  }
+    ////////////////////////////////
+    /// BUTTON SIZE
+    ////////////////////////////////
 
-  &--v-align-top {
-    .popup__content {
-      @include shadow-lg;
-      bottom: calc(100% + var(--popup-caret-size));
+    &--button-size-small {
+      --button-size-offset: -8px;
     }
 
-    .popup__caret {
-      top: calc(100% - 1px);
-      border-top-color: var(--popup-bg);
+    &--button-size-medium {
+      --button-size-offset: -4px;
     }
-  }
 
-  &--v-align-bottom {
-    .popup__content {
-      @include shadow-lg-top;
-      top: calc(100% + var(--popup-caret-size));
+    &--button-size-large {
+      --button-size-offset: 0px;
     }
 
-    .popup__caret {
-      bottom: calc(100% - 1px);
-      border-bottom-color: var(--popup-bg);
+    ////////////////////////////////
+    // HORIZONTAL ALIGNMENT
+    ////////////////////////////////
+    [dir='rtl'] &--h-align-left {
+      .popup__caret {
+        right: var(--popup-padding);
+        left: unset;
+      }
     }
-  }
-
-  ////////////////////////////////
-  // ACTIVE
-  ////////////////////////////////
-
-  &--active {
-    .popup__content {
-      opacity: 1;
-      visibility: visible;
-      pointer-events: all;
+    &--h-align-left {
+      .popup__caret {
+        left: var(--popup-padding);
+      }
     }
-  }
-
-  @include mid-break {
-    --popup-padding: calc(var(--base) * 0.25);
-
     &--h-align-center {
       .popup__content {
         left: 50%;
-        transform: translateX(-0%);
+        transform: translateX(-50%);
       }
 
       .popup__caret {
         left: 50%;
-        transform: translateX(-0%);
+        transform: translateX(-50%);
+      }
+    }
+
+    [dir='rtl'] &--h-align-right {
+      .popup__content {
+        right: unset;
+        left: 0;
+      }
+
+      .popup__caret {
+        right: unset;
+        left: var(--popup-padding);
       }
     }
 
     &--h-align-right {
       .popup__content {
-        right: 0;
+        right: var(--button-size-offset);
       }
 
       .popup__caret {
@@ -218,31 +149,102 @@
       }
     }
 
-    &--force-h-align-left {
+    ////////////////////////////////
+    // VERTICAL ALIGNMENT
+    ////////////////////////////////
+
+    &__caret {
+      position: absolute;
+      border: var(--popup-caret-size) solid transparent;
+    }
+
+    &--v-align-top {
       .popup__content {
-        left: 0;
-        right: unset;
-        transform: unset;
+        @include shadow-lg;
+        bottom: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        left: var(--popup-padding);
-        right: unset;
-        transform: unset;
+        top: calc(100% - 1px);
+        border-top-color: var(--popup-bg);
       }
     }
 
-    &--force-h-align-right {
+    &--v-align-bottom {
       .popup__content {
-        right: 0;
-        left: unset;
-        transform: unset;
+        @include shadow-lg-top;
+        top: calc(100% + var(--popup-caret-size));
       }
 
       .popup__caret {
-        right: var(--popup-padding);
-        left: unset;
-        transform: unset;
+        bottom: calc(100% - 1px);
+        border-bottom-color: var(--popup-bg);
+      }
+    }
+
+    ////////////////////////////////
+    // ACTIVE
+    ////////////////////////////////
+
+    &--active {
+      .popup__content {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: all;
+      }
+    }
+
+    @include mid-break {
+      --popup-padding: calc(var(--base) * 0.25);
+
+      &--h-align-center {
+        .popup__content {
+          left: 50%;
+          transform: translateX(-0%);
+        }
+
+        .popup__caret {
+          left: 50%;
+          transform: translateX(-0%);
+        }
+      }
+
+      &--h-align-right {
+        .popup__content {
+          right: 0;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+        }
+      }
+
+      &--force-h-align-left {
+        .popup__content {
+          left: 0;
+          right: unset;
+          transform: unset;
+        }
+
+        .popup__caret {
+          left: var(--popup-padding);
+          right: unset;
+          transform: unset;
+        }
+      }
+
+      &--force-h-align-right {
+        .popup__content {
+          right: 0;
+          left: unset;
+          transform: unset;
+        }
+
+        .popup__caret {
+          right: var(--popup-padding);
+          left: unset;
+          transform: unset;
+        }
       }
     }
   }