@citizenplane/pimp 18.7.0 → 18.8.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%;
   }
 }
 

package/src/components/CpTooltip.vue

@@ -1,12 +1,11 @@
 <template>
   <v-tooltip
     :aria-id="ariaId"
-    class="cpTooltip"
-    :class="dynamicTooltipClasses"
-    :container="false"
+    :popper-class="dynamicTooltipClasses"
     :disabled
     :distance
     :placement
+    :container="dynamicContainer"
   >
     <slot />
     <template #popper>
@@ -34,10 +33,10 @@
 </template>
 
 <script setup lang="ts">
+// biome-ignore lint: required for floating-vue
 import { Tooltip as VTooltip } from 'floating-vue'
-import { useId, useSlots, computed } from 'vue'
-
 import type { Slots } from 'vue'
+import { computed, useId, useSlots } from 'vue'
 
 import { Colors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
@@ -46,6 +45,7 @@ type TooltipColors = Extract<Colors, 'accent' | 'neutral'>
 type Placement = 'top' | 'right' | 'bottom' | 'left'
 
 interface Props {
+  allowOutsideContainer?: boolean
   color?: TooltipColors
   content?: string
   disabled?: boolean
@@ -60,6 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
   color: 'accent',
   placement: undefined,
   subcontent: '',
+  allowOutsideContainer: false,
 })
 
 const ariaId = useId()
@@ -67,7 +68,8 @@ const slots: Slots = useSlots()
 
 const hasSubcontent = computed(() => !!(props.subcontent || slots.subcontent))
 
-const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLetter(props.color)}`])
+const dynamicTooltipClasses = computed(() => ['cpTooltip', `cpTooltip--is${capitalizeFirstLetter(props.color)}`])
+const dynamicContainer = computed(() => props.allowOutsideContainer ? undefined : false)
 </script>
 
 <style lang="scss">
@@ -76,14 +78,14 @@ const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLet
   white-space: pre-wrap;
 
   .v-popper__inner {
+    max-width: fn.px-to-rem(300);
     padding: var(--cp-spacing-md) var(--cp-spacing-lg);
     border-radius: var(--cp-radius-md);
     background-color: var(--cp-tooltip-bg);
     font-size: var(--cp-text-size-xs);
+    font-weight: 400;
     line-height: var(--cp-line-height-xs);
-    max-width: fn.px-to-rem(300);
     text-align: left;
-    font-weight: 400;
   }
 
   .cpTooltip__content {
@@ -97,16 +99,16 @@ const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLet
   }
 
   .cpTooltip__separator {
+    width: 100%;
     border: none;
     border-top: 1px solid var(--cp-colors-white);
-    opacity: 0.5;
-    width: 100%;
     margin: var(--cp-spacing-md) 0;
+    opacity: 0.5;
   }
 
   .cpTooltip__subcontent {
-    font-style: italic;
     color: var(--cp-tooltip-subcontent-text);
+    font-style: italic;
   }
 
   .v-popper__arrow-outer {
@@ -120,9 +122,9 @@ const dynamicTooltipClasses = computed(() => [`cpTooltip--is${capitalizeFirstLet
   }
 
   &.cpTooltip--isNeutral {
-    --cp-tooltip-bg: color-mix(in srgb, var(--cp-background-black) 80%, transparent);
+    --cp-tooltip-bg: color-mix(in sRGB, var(--cp-background-black) 80%, transparent);
     --cp-tooltip-content-text: var(--cp-foreground-white);
-    --cp-tooltip-subcontent-text: color-mix(in srgb, var(--cp-foreground-white) 70%, transparent);
+    --cp-tooltip-subcontent-text: color-mix(in sRGB, var(--cp-foreground-white) 70%, transparent);
   }
 }
 </style>

package/src/components/CpTransitionCounter.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 interface Props {
   counterNumber?: number

package/src/components/CpTransitionExpand.vue

@@ -29,7 +29,7 @@ const enter = (element: Element) => {
   // Force repaint to make sure the
   // animation is triggered correctly.
 
-  // @typescript-eslint/no-unused-expressions
+  // Intentional expression statement to force layout recalculation before animating.
   void getComputedStyle(el).height
 
   requestAnimationFrame(() => (el.style.height = height))
@@ -51,20 +51,20 @@ const leave = (element: Element): void => {
 
 <style scoped>
 * {
-  will-change: height;
-  transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000px;
+  transform: translateZ(0);
+  will-change: height;
 }
 </style>
 
 <style lang="scss">
 .expand-enter-active,
 .expand-leave-active {
-  transition-property: opacity, height;
+  overflow: hidden;
   transition-duration: 0.2s;
+  transition-property: opacity, height;
   transition-timing-function: ease-out;
-  overflow: hidden;
 }
 
 .expand-enter-from,

package/src/components/CpTransitionSize.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onBeforeUnmount, useId, nextTick } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId } from 'vue'
 
 interface Props {
   type?: 'width' | 'height'