@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpTableColumnEditor.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, useId } from 'vue'
+import { computed, ref, useId, useTemplateRef } from 'vue'
 
 import type { CpTableColumnObject } from '@/constants/CpTableColumn'
 
@@ -149,21 +149,21 @@ const handleDropdownShown = () => {
 
 <style lang="scss">
 .cpTableColumnEditor {
-  text-align: right;
   padding-bottom: var(--cp-spacing-xs);
+  text-align: right;
 
   &__trigger {
     @extend %u-focus-outline;
 
-    color: var(--cp-text-secondary);
     border-radius: var(--cp-radius-md);
+    color: var(--cp-text-secondary);
 
     &--isOpen,
     &:hover,
     &:focus-within {
-      transform: none;
-      outline-offset: 0;
       background-color: var(--cp-background-primary-hover);
+      outline-offset: 0;
+      transform: none;
     }
   }
 
@@ -183,24 +183,24 @@ const handleDropdownShown = () => {
     padding-inline: var(--cp-spacing-lg);
   }
 
+  &__column,
+  &__empty {
+    font-size: var(--cp-text-size-sm);
+  }
+
+  &__column {
+    text-transform: capitalize;
+  }
+
   &__heading,
   &__column:not(:has(.cpTableColumnEditor__checkbox)) {
     padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
   }
 
   &__heading {
+    color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-xs);
     line-height: var(--cp-line-height-md);
-    color: var(--cp-text-secondary);
-  }
-
-  &__column,
-  &__empty {
-    font-size: var(--cp-text-size-sm);
-  }
-
-  &__column {
-    text-transform: capitalize;
   }
 
   &__empty {
@@ -213,8 +213,8 @@ const handleDropdownShown = () => {
   }
 
   &__checkbox {
-    color: var(--cp-text-primary);
     padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    color: var(--cp-text-primary);
   }
 }
 </style>

package/src/components/CpTableEmptyState.vue

@@ -20,17 +20,17 @@ defineProps<Props>()
 
 <style lang="scss">
 .cpTableEmptyState {
-  padding: 10vh var(--cp-spacing-xl);
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 10vh var(--cp-spacing-xl);
 
   &__icon {
-    margin-bottom: var(--cp-spacing-2xl);
-    border-radius: var(--cp-radius-sm);
     display: inline-block;
-    background-color: var(--cp-background-secondary);
     padding: var(--cp-spacing-xl);
+    border-radius: var(--cp-radius-sm);
+    margin-bottom: var(--cp-spacing-2xl);
+    background-color: var(--cp-background-secondary);
     color: var(--cp-foreground-secondary);
   }
 

package/src/components/CpTableFooter.vue

@@ -98,15 +98,15 @@ const pageLastResultIndex = computed(() => {
 <style scoped lang="scss">
 .cpTableFooter {
   position: sticky;
-  bottom: var(--cp-spacing-md);
   z-index: 3;
+  bottom: var(--cp-spacing-md);
 
   &__loader {
     display: inline-flex;
     align-items: center;
-    gap: var(--cp-spacing-sm);
     color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-sm);
+    gap: var(--cp-spacing-sm);
     line-height: var(--cp-line-height-sm);
   }
 

package/src/components/CpTableFooterDesktop.vue

@@ -57,8 +57,8 @@ const emit = defineEmits<Emits>()
   }
 
   &__results {
-    font-variant-numeric: tabular-nums;
     color: var(--cp-text-secondary);
+    font-variant-numeric: tabular-nums;
   }
 
   &__results strong {
@@ -66,8 +66,8 @@ const emit = defineEmits<Emits>()
   }
 
   &__pagination {
-    justify-content: flex-end;
     display: flex;
+    justify-content: flex-end;
     gap: var(--cp-spacing-md);
   }
 }

package/src/components/CpTableFooterDetails.vue

@@ -35,17 +35,17 @@ const paginationResultsDetails = computed(() => {
 <style lang="scss">
 .cpTableFooterDetails {
   &__paginationLabel {
-    font-weight: 600;
     color: var(--cp-text-primary);
     font-size: var(--cp-text-size-xs);
+    font-weight: 600;
     line-height: var(--cp-line-height-xs);
   }
 
   &__resultsCount,
   &__noResults {
-    font-weight: 500;
     color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-xs);
+    font-weight: 500;
     line-height: var(--cp-line-height-xs);
   }
 }

package/src/components/CpTableFooterMobile.vue

@@ -47,16 +47,16 @@ const emit = defineEmits<Emits>()
 
 <style scoped lang="scss">
 .cpTableFooterMobile {
+  z-index: 3;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--cp-spacing-md);
-  font-size: var(--cp-text-size-sm);
   padding: var(--cp-spacing-xs) var(--cp-spacing-xl);
-  box-shadow: var(--cp-shadows-overlay);
   border-radius: var(--cp-radius-md);
   background: var(--cp-background-primary);
-  z-index: 3;
+  box-shadow: var(--cp-shadows-overlay);
+  font-size: var(--cp-text-size-sm);
+  gap: var(--cp-spacing-md);
 
   .cpButton--isDisabled {
     background: var(--cp-background-primary);

package/src/components/CpTabs.vue

@@ -192,8 +192,8 @@ watch(
 @include mx.media-query-min(769px) {
   .cpTabs {
     &__tab--isActive {
-      border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 }

package/src/components/CpTelInput.vue

@@ -41,13 +41,13 @@
 </template>
 
 <script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
 import { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'
 
-import type { ComponentPublicInstance } from 'vue'
+import type { Sizes } from '@/constants'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
-import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
@@ -179,21 +179,21 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
   }
 
   &__container {
-    z-index: 9;
     position: relative;
+    z-index: 9;
     display: flex;
   }
 
   &__wrapper {
     --box-shadow: var(--cp-shadows-3xs-inset);
 
+    width: 100%;
     border: 0;
+    border-radius: var(--cp-radius-md-lg);
+    appearance: none;
     box-shadow:
       var(--box-shadow),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    appearance: none;
-    border-radius: var(--cp-radius-md-lg);
-    width: 100%;
     color: inherit;
 
     &:not(.cpTelInput__wrapper--isDisabled):focus-within {
@@ -237,19 +237,19 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
 
   &__input {
     padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+    border-bottom-right-radius: var(--cp-radius-md-lg);
+    border-top-right-radius: var(--cp-radius-md-lg);
     color: inherit;
-    line-height: var(--cp-line-height-md);
     font-size: var(--cp-text-size-sm);
-    border-top-right-radius: var(--cp-radius-md-lg);
-    border-bottom-right-radius: var(--cp-radius-md-lg);
+    line-height: var(--cp-line-height-md);
 
     &:is(:hover, :focus) {
       z-index: 1;
     }
 
     &:not(.cpTelInput__input--isInvalid, .cpTelInput__input--isDisabled):focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
       background-color: var(--cp-background-primary);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
 
     &::placeholder {
@@ -257,8 +257,8 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
     }
 
     &--isDisabled {
-      pointer-events: none;
       background-color: var(--cp-background-disabled);
+      pointer-events: none;
     }
   }
 
@@ -268,8 +268,8 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
     }
 
     .cpTelInput__input:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) solid var(--cp-border-error-solid);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
     }
   }
 
@@ -280,20 +280,20 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
   }
 
   .vti__dropdown.open .cpTelInput__arrow {
-    transform: rotate(180deg);
     color: var(--cp-foreground-primary);
+    transform: rotate(180deg);
   }
 
   .vti__dropdown {
-    z-index: 1;
     position: unset;
+    z-index: 1;
     border-right: var(--cp-dimensions-0_25) solid var(--cp-border-strong);
 
     &:focus,
     &:focus-within {
       z-index: 2;
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
       border-right: var(--cp-dimensions-0_25) solid transparent;
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
   }
 
@@ -323,8 +323,8 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
   }
 
   .vti__flag {
-    max-width: var(--cp-dimensions-5);
     min-width: var(--cp-dimensions-5);
+    max-width: var(--cp-dimensions-5);
     border-radius: var(--cp-radius-xs);
   }
 
@@ -342,26 +342,26 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
   }
 
   .vti__search_box {
+    width: 100%;
+    padding: var(--cp-spacing-sm) var(--cp-spacing-sm) var(--cp-spacing-sm) var(--cp-spacing-md);
+    border: none;
+    border-radius: var(--cp-radius-sm-md);
+    appearance: none;
     box-shadow:
       var(--cp-shadows-3xs),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    appearance: none;
-    border-radius: var(--cp-radius-sm-md);
-    width: 100%;
     color: inherit;
-    padding: var(--cp-spacing-sm) var(--cp-spacing-sm) var(--cp-spacing-sm) var(--cp-spacing-md);
-    line-height: var(--cp-line-height-md);
     font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
     text-indent: calc(var(--cp-dimensions-1) * 7);
-    border: none;
 
     &:hover {
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
     }
 
     &:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
       background-color: var(--cp-background-primary);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
     }
 
     &::placeholder {
@@ -370,22 +370,21 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
   }
 
   &__searchIcon {
-    width: var(--cp-dimensions-4);
-    height: var(--cp-dimensions-4);
-
     position: absolute;
     top: 50%;
-    transform: translateY(-50%);
     left: var(--cp-dimensions-3);
+    width: var(--cp-dimensions-4);
+    height: var(--cp-dimensions-4);
+    transform: translateY(-50%);
   }
 
   .vti__dropdown-list {
-    clip-path: inset(0 round var(--cp-radius-md-lg));
-    max-height: calc(var(--cp-dimensions-1) * 32.5);
     width: calc(100% + var(--cp-dimensions-0_5));
+    max-height: calc(var(--cp-dimensions-1) * 32.5);
     padding: var(--cp-spacing-sm);
-    border-radius: var(--cp-radius-md-lg);
     border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-md-lg);
+    clip-path: inset(0 round var(--cp-radius-md-lg));
 
     &:has(.vti__search_box) {
       max-height: calc(var(--cp-dimensions-1) * 42.5);
@@ -401,9 +400,9 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
   }
 
   .vti__dropdown-item {
-    padding: var(--cp-spacing-lg) var(--cp-spacing-xl) var(--cp-spacing-lg) var(--cp-spacing-lg);
     display: flex;
     align-items: flex-start;
+    padding: var(--cp-spacing-lg) var(--cp-spacing-xl) var(--cp-spacing-lg) var(--cp-spacing-lg);
     border-radius: var(--cp-radius-sm-md);
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-md);
@@ -430,8 +429,8 @@ const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObj
 
   &--lg {
     .cpTelInput__input {
-      font-size: var(--cp-text-size-md);
       padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-md);
     }
 
     .vti__dropdown {

package/src/components/CpTextarea.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useId } from 'vue'
+import { computed, ref, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
@@ -89,19 +89,19 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
   position: relative;
 
   &__input {
-    appearance: none;
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    padding: var(--cp-spacing-xl);
     border: none;
+    border-radius: var(--cp-radius-md-lg);
+    appearance: none;
     box-shadow:
       var(--cp-shadows-3xs),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    border-radius: var(--cp-radius-md-lg);
-    outline: none;
-    padding: var(--cp-spacing-xl);
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    font-size: var(--cp-text-size-md);
     color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-md);
+    outline: none;
 
     &:hover {
       box-shadow:
@@ -110,15 +110,15 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
     }
 
     &:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
       background-color: var(--cp-background-primary);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
     }
 
     &:disabled {
-      cursor: not-allowed;
       background: var(--cp-background-disabled);
-      color: var(--cp-text-disabled);
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
+      color: var(--cp-text-disabled);
+      cursor: not-allowed;
     }
 
     &::placeholder {
@@ -144,9 +144,9 @@ const handleChange = (newValue: string) => emit('update:modelValue', newValue)
   }
 
   &__error {
+    color: var(--cp-text-error-primary);
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-md);
-    color: var(--cp-text-error-primary);
   }
 }
 </style>

package/src/components/CpToast.vue

@@ -68,7 +68,6 @@ import { useWebHaptics } from 'web-haptics/vue'
 
 import { CpToastTypes } from '@/constants/CpToastTypes'
 import { Haptics } from '@/constants/Hapitcs'
-
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Message {
@@ -177,9 +176,9 @@ const handleToastAdded = (message: Message) => {
 
 .p-toast-message-enter-from,
 .p-toast-message-leave-to {
+  z-index: -1;
   opacity: 0;
   transform: translate3d(0, calc(var(--cp-dimensions-1) * -7.5), 0) scale3d(0.75, 0.75, 1);
-  z-index: -1;
 }
 
 .cpToasts {
@@ -188,8 +187,8 @@ const handleToastAdded = (message: Message) => {
 
 .cpToasts .p-toast-message-leave-active:not(:only-child) {
   position: absolute;
-  left: 0;
   right: 0;
+  left: 0;
 }
 
 .cpToasts[data-p$='center'] {
@@ -206,24 +205,24 @@ const handleToastAdded = (message: Message) => {
 .cpToasts > div {
   display: flex;
   flex-direction: column;
-  pointer-events: auto;
   gap: var(--cp-spacing-md);
+  pointer-events: auto;
 }
 
 .cpToast {
   --toaster-shadow: #{var(--cp-drop-shadow-md-offset-x)} #{var(--cp-drop-shadow-md-offset-y)}
     #{var(--cp-drop-shadow-md-blur)} #{var(--cp-drop-shadow-md-spread)} #{var(--cp-drop-shadow-md-color)};
 
+  position: relative;
   display: inline-flex;
   overflow: hidden;
-  position: relative;
-  flex-direction: column;
   max-width: calc(var(--cp-dimensions-1) * 100);
+  flex-direction: column;
   padding: var(--cp-spacing-lg);
   border-radius: var(--cp-radius-md);
+  background-color: var(--cp-background-primary);
   box-shadow: var(--toaster-shadow);
   gap: var(--cp-spacing-md);
-  background-color: var(--cp-background-primary);
 
   &__inner {
     display: flex;
@@ -233,11 +232,11 @@ const handleToastAdded = (message: Message) => {
 
   &__content {
     display: flex;
+    flex: 1;
     flex-direction: column;
     align-items: flex-start;
-    flex: 1;
-    text-align: left;
     gap: var(--cp-spacing-sm);
+    text-align: left;
   }
 
   &__icon {
@@ -255,30 +254,30 @@ const handleToastAdded = (message: Message) => {
   }
 
   &__summary {
-    font-weight: 600;
     color: var(--cp-text-accent-primary);
+    font-weight: 600;
 
-    &:first-letter {
+    &::first-letter {
       text-transform: capitalize;
     }
   }
 
   &__detail {
-    font-weight: 500;
     color: var(--cp-text-accent-secondary);
+    font-weight: 500;
   }
 
   &__actions {
-    margin-top: var(--cp-spacing-sm);
     display: flex;
     justify-content: flex-end;
+    margin-top: var(--cp-spacing-sm);
     gap: var(--cp-spacing-md);
   }
 
   &__close {
     display: flex;
-    margin-top: var(--cp-spacing-xs);
     border-radius: var(--cp-radius-full);
+    margin-top: var(--cp-spacing-xs);
 
     &:focus-visible {
       outline: var(--cp-dimensions-0_5) solid var(--cp-border-accent-solid);
@@ -289,25 +288,23 @@ const handleToastAdded = (message: Message) => {
     from {
       transform: scale3d(1, 1, 1);
     }
+
     to {
       transform: scale3d(0, 1, 1);
     }
   }
 
-  &:has(.cpToast__timer):hover .cpToast__timer {
-    animation-play-state: paused;
-  }
-
   &__timer {
     position: absolute;
-    inset: 0;
     top: auto;
     height: var(--cp-dimensions-1);
-    transform-origin: left;
+    animation-fill-mode: forwards;
     animation-name: toast-timer;
     animation-timing-function: linear;
-    animation-fill-mode: forwards;
     background-color: var(--cp-border-accent-solid);
+    // stylelint-disable-next-line declaration-block-no-shorthand-property-overrides
+    inset: 0;
+    transform-origin: left;
   }
 
   &--isInfo {
@@ -393,21 +390,25 @@ const handleToastAdded = (message: Message) => {
       background-color: var(--cp-border-warning-solid);
     }
   }
+
+  &:has(.cpToast__timer):hover .cpToast__timer {
+    animation-play-state: paused;
+  }
 }
 
 @media (max-width: 551px) {
   .cpToasts {
-    max-width: calc(100% - #{calc(var(--cp-spacing-2xl) * 3)});
-    width: 100%;
     right: 0 !important;
     left: 0;
+    width: 100%;
+    max-width: calc(100% - #{calc(var(--cp-spacing-2xl) * 3)});
     margin: 0 auto;
     text-align: center;
   }
 
   .cpToast {
-    max-width: 100%;
     min-width: 100%;
+    max-width: 100%;
   }
 }