@policystudio/policy-studio-ui-vue 1.1.90-access.3 → 1.1.90-access.5

package/dist/css/psui_styles_output.css

@@ -549,6 +549,150 @@ video {
   -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
+.psui-el-chips .psui-el-chips-text {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  content: attr(data-text);
+}
+.psui-el-chips .psui-el-chips-text::after {
+  pointer-events: none;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  visibility: hidden;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  height: 0px;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  overflow: hidden;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  white-space: nowrap;
+}
+.psui-el-chips .psui-el-chips-text::after {
+  font-weight: 700;
+}
+.psui-el-chips label {
+  display: flex;
+}
+.psui-el-chips label {
+  cursor: pointer;
+}
+.psui-el-chips label {
+  align-items: center;
+}
+.psui-el-chips label {
+  justify-content: center;
+}
+.psui-el-chips label {
+  border-radius: 0.25rem;
+}
+.psui-el-chips label {
+  border-width: 1px;
+}
+.psui-el-chips label {
+  --tw-border-opacity: 1;
+  border-color: rgb(162, 172, 183, var(--tw-border-opacity, 1));
+}
+.psui-el-chips label {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips label {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+.psui-el-chips label {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+.psui-el-chips label {
+  font-size: 14px;
+  line-height: 130%;
+}
+.psui-el-chips label {
+  --tw-text-opacity: 1;
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
+}
+.psui-el-chips label {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.psui-el-chips label {
+  padding: 5px 8px 5px 8px;
+}
+.psui-el-chips label:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  font-weight: 700;
+}
+.psui-el-chips label:focus, .psui-el-chips label:active {
+  --tw-text-opacity: 1;
+  color: rgb(0, 70, 95, var(--tw-text-opacity, 1));
+}
+.psui-el-chips label.checked {
+  --tw-border-opacity: 1;
+  border-color: rgb(49, 143, 172, var(--tw-border-opacity, 1));
+}
+.psui-el-chips label.checked {
+  --tw-bg-opacity: 1;
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
+}
+.psui-el-chips label.checked {
+  --tw-text-opacity: 1;
+  color: rgb(0, 70, 95, var(--tw-text-opacity, 1));
+}
+.psui-el-chips label.icon-position-right {
+  flex-direction: row-reverse;
+}
+.psui-el-chips label.icon-position-right {
+  padding: 5px 6px 5px 8px;
+}
+.psui-el-chips label.icon-position-right .psui-el-chips-icon {
+  margin-left: 0.25rem;
+}
+.psui-el-chips .psui-el-chips-icon {
+  font-family: "Material Icons Round";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+.psui-el-chips .psui-el-chips-icon {
+  font-size: 16px;
+}
+.psui-el-chips .psui-el-chips-icon.is-rotated {
+  transform: rotate(180deg);
+}
 .psui-el-chips.type-checkbox, .psui-el-chips.type-radio {
   font-size: 14px;
 }
@@ -567,14 +711,6 @@ video {
 .psui-el-chips.type-checkbox input, .psui-el-chips.type-radio input {
   clip: rect(0, 0, 0, 0);
 }
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-checkbox input:checked + label, .psui-el-chips.type-radio input:checked + label {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
 .psui-el-chips.type-checkbox input:checked + label.layout-disabled, .psui-el-chips.type-radio input:checked + label.layout-disabled {
   cursor: default;
 }
@@ -595,38 +731,14 @@ video {
 }
 .psui-el-chips.type-checkbox input:checked + label:before, .psui-el-chips.type-radio input:checked + label:before {
   --tw-text-opacity: 1;
-  color: rgb(100, 181, 206, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  display: flex;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  cursor: pointer;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  align-items: center;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  justify-content: center;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  border-radius: 0.25rem;
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));
+  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
 }
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
+.psui-el-chips.type-checkbox input:checked + label:hover, .psui-el-chips.type-radio input:checked + label:hover {
   --tw-text-opacity: 1;
-  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
+  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
-.psui-el-chips.type-checkbox label, .psui-el-chips.type-radio label {
-  padding: 4px 8px 4px 6px;
+.psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
+  margin-right: 0.25rem;
 }
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   display: inline-block;
@@ -636,7 +748,7 @@ video {
 }
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   --tw-text-opacity: 1;
-  color: rgb(214, 221, 229, var(--tw-text-opacity, 1));
+  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
 }
 .psui-el-chips.type-checkbox label:before, .psui-el-chips.type-radio label:before {
   transition-property: all;
@@ -647,19 +759,10 @@ video {
   content: "";
   font-family: "Material Icons Round";
   font-size: 18px;
-  margin-right: 6px;
 }
 .psui-el-chips.type-checkbox label:hover, .psui-el-chips.type-radio label:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(243, 246, 249, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-checkbox label:hover, .psui-el-chips.type-radio label:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-checkbox label:hover:before, .psui-el-chips.type-radio label:hover:before {
-  --tw-text-opacity: 1;
-  color: rgb(100, 181, 206, var(--tw-text-opacity, 1));
+  background-color: rgb(236, 247, 251, var(--tw-bg-opacity, 1));
 }
 .psui-el-chips.type-checkbox input:checked + label:before {
   content: "check_box";
@@ -673,69 +776,6 @@ video {
 .psui-el-chips.type-radio label:before {
   content: "radio_button_unchecked";
 }
-.psui-el-chips.type-button label {
-  display: flex;
-}
-.psui-el-chips.type-button label {
-  cursor: pointer;
-}
-.psui-el-chips.type-button label {
-  align-items: center;
-}
-.psui-el-chips.type-button label {
-  justify-content: center;
-}
-.psui-el-chips.type-button label {
-  border-radius: 0.25rem;
-}
-.psui-el-chips.type-button label {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-.psui-el-chips.type-button label {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-.psui-el-chips.type-button label {
-  font-size: 14px;
-  line-height: 130%;
-}
-.psui-el-chips.type-button label {
-  --tw-text-opacity: 1;
-  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-button label {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.psui-el-chips.type-button label {
-  background-color: #F6F7F8;
-}
-.psui-el-chips.type-button label:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-button label:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-button label:focus, .psui-el-chips.type-button label:active {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-button label:focus, .psui-el-chips.type-button label:active {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-chips.type-button label.checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
-}
-.psui-el-chips.type-button label.checked {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
 .psui-el-chips.type-button.layout-with-icon label {
   display: flex;
 }
@@ -836,10 +876,7 @@ video {
   background-color: rgb(49, 143, 172, var(--tw-bg-opacity, 1));
 }
 .psui-el-chips.type-button.layout-rich .psui-el-chips-icon {
-  font-size: 18px;
-}
-.psui-el-chips.type-button.layout-rich .psui-el-chips-icon-prepend {
-  margin-right: 0.5rem;
+  font-size: 16px;
 }
 .psui-el-chips.type-button.layout-rich .psui-el-chips-icon-prepend {
   display: flex;
@@ -867,9 +904,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-chips.type-button.layout-rich .psui-el-chips-close {
-  margin-left: 0.5rem;
-}
 .psui-el-chips.type-button.layout-rich .psui-el-chips-close {
   display: flex;
 }
@@ -1334,17 +1368,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
-.psui-el-accordion .accordion-fade-enter-active,
-.psui-el-accordion .accordion-fade-leave-active {
-  will-change: height, margin-bottom;
-  transition: height 0.4s ease, margin-bottom 0.4s ease-in-out;
-  overflow: hidden;
-}
-.psui-el-accordion .accordion-fade-enter-from,
-.psui-el-accordion .accordion-fade-leave-to {
-  height: 0 !important;
-  margin-bottom: 0 !important;
-}
 
 .psui-el-input {
   /* Layout Default */
@@ -1801,11 +1824,11 @@ video {
   margin-bottom: 0.25rem;
 }
 .psui-el-card-infos-title {
-  font-size: 12px;
-  line-height: 130%;
+  display: flex;
 }
 .psui-el-card-infos-title {
-  font-weight: 700;
+  font-size: 12px;
+  line-height: 130%;
 }
 .psui-el-card-infos-title {
   --tw-text-opacity: 1;
@@ -4071,57 +4094,15 @@ video {
   min-height: 27px;
   font-size: 0.875rem;
 }
-.psui-el-dropdown-menu button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  position: fixed;
-}
 .psui-el-dropdown-menu-dialog-wrapper {
   z-index: 50;
 }
 .psui-el-dropdown-menu-dialog-wrapper {
-  display: none;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  width: auto;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transform-origin: top right;
+  height: auto;
 }
 .psui-el-dropdown-menu-dialog-wrapper {
   overflow: auto;
 }
-.psui-el-dropdown-menu-dialog-wrapper {
-  border-radius: 0.375rem;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  opacity: 0;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
-  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 5px 6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transition-duration: 100ms;
-}
-.psui-el-dropdown-menu-dialog-wrapper {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-.psui-el-dropdown-menu-dialog-wrapper-dialog {
-  width: 100%;
-}
 
 .psui-el-dropdown-menu-list {
   margin-top: 1rem;
@@ -4129,6 +4110,15 @@ video {
   display: flex;
   width: 100%;
   flex-direction: column;
+}
+
+.psui-el-dropdown-menu-list > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * (1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.psui-el-dropdown-menu-list {
   font-weight: 500;
 }
 .psui-el-dropdown-menu-list .psui-el-dropdown-menu-list-item {
@@ -6437,6 +6427,10 @@ video {
   justify-self: center;
 }
 
+.psui-rounded {
+  border-radius: 0.25rem;
+}
+
 .psui-rounded-md {
   border-radius: 0.375rem;
 }
@@ -6481,6 +6475,11 @@ video {
   background-color: rgb(214, 92, 90, var(--tw-bg-opacity, 1));
 }
 
+.psui-bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
+}
+
 .psui-bg-yellow-20 {
   --tw-bg-opacity: 1;
   background-color: rgb(237, 171, 62, var(--tw-bg-opacity, 1));
@@ -6626,6 +6625,12 @@ video {
   opacity: 0.75;
 }
 
+.psui-shadow-elevation-20 {
+  --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 5px 6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
+}
+
 .psui-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -6634,10 +6639,6 @@ video {
   transition-duration: 150ms;
 }
 
-.psui-duration-300 {
-  transition-duration: 300ms;
-}
-
 *:focus {
   outline: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-access.03",
+  "version": "1.1.90-access.05",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {
@@ -15,10 +15,12 @@
   "main": "dist/index.js",
   "types": "src/types/index.d.ts",
   "dependencies": {
+    "@floating-ui/vue": "^1.1.9",
     "@vue/compat": "^3.4.5",
     "core-js": "^3.6.5",
     "v-tooltip": "^2.1.3",
-    "vue": "^3.4.5"
+    "vue": "^3.4.5",
+    "vue2-teleport": "^1.1.4"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",

package/src/assets/scss/components/PsAccordion.scss

@@ -104,17 +104,5 @@
       @apply psui-list-none psui-text-gray-60 psui-mb-5;
     }
 
-    .accordion-fade-enter-active,
-    .accordion-fade-leave-active {
-      will-change: height, margin-bottom;
-      transition: height 0.4s ease, margin-bottom 0.4s ease-in-out;
-      overflow: hidden;
-    }
-
-    .accordion-fade-enter-from,
-    .accordion-fade-leave-to {
-      height: 0 !important;
-      margin-bottom: 0 !important;
-    }
   }
 }

package/src/assets/scss/components/PsCardInfos.scss

@@ -4,7 +4,7 @@
     @apply psui-border psui-border-gray-20 psui-rounded-md psui-flex psui-flex-col psui-items-center psui-justify-center psui-px-3 psui-py-2 psui-cursor-pointer;
 
     &-title {
-      @apply psui-text-xsmall psui-font-bold psui-text-gray-40 psui-mb-1;
+      @apply psui-flex psui-text-xsmall psui-text-gray-40 psui-mb-1;
     }
 
     &-content {

package/src/assets/scss/components/PsChips.scss

@@ -17,6 +17,56 @@
       @apply psui-icon;
     }
 
+    .psui-el-chips-text {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      
+      &::after {
+        content: attr(data-text);
+        @apply psui-font-bold psui-h-0 psui-invisible psui-overflow-hidden psui-select-none psui-pointer-events-none psui-whitespace-nowrap;
+      }
+    }
+
+    label {
+      @apply psui-flex psui-bg-white psui-items-center psui-justify-center psui-text-gray-60 psui-transition-colors psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small psui-border psui-border-gray-40;
+      padding: 5px 8px 5px 8px;
+
+      &:hover {
+        @apply psui-bg-blue-10;
+      }
+
+      &:focus,
+      &:active {
+        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60 psui-font-bold;
+      }
+
+      &.checked {
+        @apply psui-text-blue-70 psui-bg-blue-10 psui-border-blue-60;
+      }
+
+      &.icon-position-right {
+        @apply psui-flex-row-reverse;
+        padding: 5px 6px 5px 8px;
+
+        .psui-el-chips-icon {
+          @apply psui-ml-1;
+        }
+      }
+      
+    }
+
+    .psui-el-chips-icon {
+      @apply psui-icon;
+      font-size: 16px;
+
+      &.is-rotated {
+        transform: rotate(180deg);
+      }
+    }
+
     &.type-checkbox,
     &.type-radio {
       font-size: 14px;
@@ -28,8 +78,6 @@
 
         &:checked {
           + label {
-            @apply psui-text-blue-60 psui-bg-blue-20;
-
             &.layout-disabled {
               @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
 
@@ -39,29 +87,28 @@
             }
 
             &:before {
-              @apply psui-text-blue-50;
+              @apply psui-text-blue-60;
+            }
+
+            &:hover {
+              @apply psui-text-gray-60;   
             }
           }
         }
       }
 
       label {
-        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-bg-gray-10 psui-transition-all psui-cursor-pointer psui-rounded;
-        padding: 4px 8px 4px 6px;
   
         &:before {
-          @apply psui-inline-block psui-text-gray-30 psui-cursor-pointer psui-transition-all;
+          @apply psui-inline-block psui-mr-1 psui-text-gray-50 psui-cursor-pointer psui-transition-all;
           content: '';
           font-family: 'Material Icons Round';
           font-size: 18px;
-          margin-right: 6px;
         }
 
         &:hover {
-          @apply psui-text-blue-60 psui-bg-gray-10;
-          &:before {
-            @apply psui-text-blue-50;
-          }
+          @apply psui-bg-blue-10;
+
         }
       }
     }
@@ -100,22 +147,6 @@
     }
 
     &.type-button {
-      label {
-        @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-transition-all psui-cursor-pointer psui-rounded psui-py-1 psui-px-3 psui-text-small;
-        background-color: #F6F7F8;
-        &:hover {
-          @apply psui-text-blue-60 psui-bg-white;
-        }
-
-        &:focus,
-        &:active {
-          @apply psui-text-blue-60 psui-bg-blue-20;
-        }
-
-        &.checked {
-          @apply psui-text-blue-60 psui-bg-blue-20;
-        }
-      }
 
       &.layout-with-icon {
         label {
@@ -165,15 +196,15 @@
         }
 
         .psui-el-chips-icon {
-          font-size: 18px;
+          font-size: 16px;
 
           &-prepend {
-            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-mr-2 psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
+            @apply psui-bg-gray-30 psui-rounded-full psui-text-white psui-w-6 psui-h-6 psui-flex psui-items-center psui-justify-center;
           }
         }
 
         .psui-el-chips-close {
-          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center psui-ml-2;
+          @apply psui-text-gray-40 psui-flex psui-items-center psui-justify-center;
         }
       }
     }

package/src/assets/scss/components/PsDropdown.scss

@@ -20,19 +20,10 @@
       min-height: 27px;
       font-size: 0.875rem;
       
-
-      &:focus {
-        outline: none;
-        box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
-      }
     }
 
     &-dialog-wrapper {
-      @apply psui-hidden psui-origin-top-right psui-bg-white psui-fixed psui-w-auto psui-rounded-md psui-z-50 psui-opacity-0 psui-shadow-elevation-20 psui-transition-all psui-duration-100 psui-ease-in psui-overflow-auto;
-      
-      &-dialog {
-        @apply psui-w-full;
-      }
+      @apply psui-z-50 psui-overflow-auto psui-h-auto;
     }
   }
 }

package/src/assets/scss/components/PsDropdownList.scss

@@ -1,6 +1,6 @@
 @layer components {
   .psui-el-dropdown-menu-list {
-    @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4;
+    @apply psui-w-full psui-flex psui-flex-col psui-font-medium psui-my-4 psui-space-y-1;
 
     .psui-el-dropdown-menu-list-item {
       @apply psui-flex psui-items-end psui-justify-between psui-mx-0 psui-text-small psui-text-gray-60 psui-cursor-pointer psui-transition-all;

package/src/components/accordion/PsAccordionItem.vue

@@ -31,10 +31,12 @@
     </div>
     <transition
       name="accordion-fade"
-      @enter="start"
-      @after-enter="end"
-      @before-leave="start"
-      @after-leave="end"
+      :css="false"
+      @before-enter="beforeEnter"
+      @enter="enter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @leave="leave"
     >
       <div
         v-if="isOpen"
@@ -129,13 +131,67 @@ const toggle = () => {
     localOpened.value = !localOpened.value
   }
 }
-const start = (el) => {
+
+const beforeEnter = (el) => {
+  el.style.height = '0'
+  el.style.opacity = '0'
+  el.style.overflow = 'hidden'
+  el.style.paddingTop = '0'
+  el.style.paddingBottom = '0'
+  el.style.marginTop = '0'
+  el.style.marginBottom = '0'
+}
+
+const enter = (el, done) => {
+  void el.offsetHeight 
+
+  el.style.transition = 'all 0.3s ease-in-out'
   el.style.height = el.scrollHeight + 'px'
-  el.style.padding = el.srcollPaddingBottom + 'px'
+  el.style.opacity = '1'
+
+  el.style.removeProperty('padding-top')
+  el.style.removeProperty('padding-bottom')
+  el.style.removeProperty('margin-top')
+  el.style.removeProperty('margin-bottom')
+
+  el.addEventListener('transitionend', done, { once: true })
+}
+
+const afterEnter = (el) => {
+  el.style.height = 'auto'
+  el.style.overflow = 'visible'
+  el.style.transition = '' 
 }
-const end = (el) => {
-  el.style.height = ''
-  el.style.padding = ''
+
+const beforeLeave = (el) => {
+  if (!el) return
+
+  el.style.height = el.scrollHeight + 'px'
+  el.style.overflow = 'hidden'
+
+  const style = window.getComputedStyle(el)
+  el.style.paddingTop = style.paddingTop
+  el.style.paddingBottom = style.paddingBottom
+  el.style.marginTop = style.marginTop
+  el.style.marginBottom = style.marginBottom
+}
+
+const leave = (el, done) => {
+  if (!el) return
+
+  void el.offsetHeight 
+  el.style.transition = 'all 0.3s ease-in-out'
+
+  requestAnimationFrame(() => {
+    el.style.height = '0'
+    el.style.opacity = '0'
+    el.style.paddingTop = '0'
+    el.style.paddingBottom = '0'
+    el.style.marginTop = '0'
+    el.style.marginBottom = '0'
+  })
+
+  el.addEventListener('transitionend', done, { once: true })
 }
 </script>
 

package/src/components/badges-and-tags/PsCardInfos.vue

@@ -4,11 +4,14 @@
     @click="onClick()"
   >
     <h5 class="psui-el-card-infos-title">
-      <span class="psui-text-gray-60 psui-mr-1">{{ title }}</span>{{ subtitle }}
+      <span :class="[titleClass, 'psui-mr-1']">{{ title }}</span>
+      <slot name="subtitle">
+        <span :class="subtitleClass">{{ subtitle }}</span>
+      </slot>
     </h5>
     <div class="psui-el-card-infos-content">
       <span class="psui-el-card-infos-icon material-icons-round">{{ icon }}</span>
-      <h5 class="psui-text-gray-80">
+      <h5 :class="totalClass">
         {{ total }}
       </h5>
     </div>
@@ -45,6 +48,27 @@ defineProps({
     type: String,
     default: '',
   },
+  /**
+   * It sets the class for the title text (color, font-weight, font-size, etc.).
+   */
+  titleClass: {
+    type: String,
+    default: 'psui-text-gray-60 psui-font-bold',
+  },
+  /**
+   * It sets the class for the subtitle text (color, font-weight, font-size, etc.).
+   */
+  subtitleClass: {
+    type: String,
+    default: 'psui-text-gray-40 psui-font-bold',
+  },
+  /**
+   * It sets the class for the total text (color, font-weight, font-size, etc.).
+   */
+  totalClass: {
+    type: String,
+    default: 'psui-text-gray-80',
+  },
 })
 
 const onClick = () => {

package/src/components/chips/PsChips.vue

@@ -24,13 +24,23 @@
     <label
       :disabled="disabled"
       :for="getInputId"
-      :class="{'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'}"
+      :class="[
+        {'checked': checked && type === 'button', 'layout-disabled': layout === 'disabled'},
+        `icon-position-${iconPosition}`
+      ]"
     >
       <i
         v-if="icon"
         class="psui-el-chips-icon psui-el-chips-icon-prepend"
+        :class="{ 'is-rotated': rotableIcon }"
       >{{ icon }}</i>
-      {{ label }}
+      <span
+        class="psui-el-chips-text"
+        :data-text="label"
+      >
+        {{ label }}
+      </span>
+      
       <button
         @click="onClose"
         v-if="layout === 'rich'"
@@ -83,6 +93,15 @@ const props = defineProps({
   /**
    * It sets if the button was checked or not checked.
    */
+  iconPosition: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  rotableIcon:{
+    type: Boolean,
+    defaul: false
+  },
   checked: {
     type: Boolean,
     default: false,

package/src/components/controls/PsSwitch.vue

@@ -5,20 +5,24 @@
     @click="change()"
     tabindex="0"
   >
-    <input
-      type="checkbox"
-      :checked="value"
-    >
     <label
       class="psui-el-switch-button"
       :class="[getToggleClass]"
+      :for="uniqueId"
     />
+    <input
+      type="checkbox"
+      :checked="value"
+      :id="uniqueId"
+      tabindex="-1"
+      :aria-label="label"
+    >
   </div>
 </template>
 
 <script setup>
 //FIGMA CONTROLS & SELECTORS https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64852
-import { computed } from 'vue'
+import { computed, getCurrentInstance } from 'vue'
 
 const emit = defineEmits('change', 'update:value')
 
@@ -66,7 +70,12 @@ const getComponentClass = computed(() => {
   return `size-${props.size}`
 })
 
+const instance = getCurrentInstance()
+const uniqueId = computed(() => `psui-switch-${instance.uid}`)
+
 const change = () => {
+  if (props.disabled) return
+
   emit('update:value', !props.value)
   emit('change', !props.value)
 }

package/src/components/forms/PsDropdown.vue

@@ -1,218 +1,134 @@
 <template>
   <div
-    ref="PSDropdown"
     class="psui-el-dropdown-menu"
-    :class="{ 'is-open': show.value }"
-    v-click-outside="close"
   >
     <div
       ref="PSDropdownTrigger"
-      v-if="$slots.dropdownTrigger"
-      @click="show && !toggleWhenActive ? '' : toggle($event)"
-    >
-      <slot name="dropdownTrigger" />
-    </div>
-
-    <button
-      v-else
-      @click="show && !toggleWhenActive ? '' : toggle($event)"
-      type="button"
-      :id="id.value"
-      aria-haspopup="true"
-      aria-expanded="true"
-      ref="PSDropdownTrigger"
+      @click="toggle"
     >
       <slot
-        v-if="show.value && $slots.buttonLabelOnShow"
-        name="buttonLabelOnShow"
+        v-if="hasDropdownTrigger"
+        name="dropdownTrigger"
+        :show="show"
       />
-      <slot
+      <button
         v-else
-        name="buttonLabel"
-      />
-    </button>
-    <div
-      ref="PSDropdownDialog"
-      role="menu"
-      class="psui-el-dropdown-menu-dialog-wrapper psui-duration-300"
-      aria-orientation="vertical"
-      :aria-labelledby="id.value"
-      :style="{ minWidth: minWidthDropDown }"
-    >
-      <div class="psui-el-dropdown-menu-dialog">
-        <slot name="items" />
-      </div>
+        type="button"
+        :aria-expanded="show"
+      >
+        <slot
+          v-if="show && $slots.buttonLabelOnShow"
+          name="buttonLabelOnShow"
+        />
+        <slot
+          v-else
+          name="buttonLabel"
+        />
+      </button>
     </div>
+    <Teleport to="body">
+      <Transition name="fade">
+        <div
+          v-if="show"
+          ref="PSDropdownFloating"
+          role="menu"
+          class="psui-el-dropdown-menu-dialog-wrapper"
+          :class="contentCss"
+          aria-orientation="vertical"
+          :style="floatingStyles"
+          v-click-outside="close"
+        >
+          <slot name="items" />
+        </div>
+      </Transition>
+    </Teleport>
   </div>
 </template>
 
 <script setup>
 // Figma - 2.3 Dropdown with category divider https://www.figma.com/file/Tto8hrNlSfuPcwd1pfqogF/%E2%9A%A1%EF%B8%8F-Design-System?node-id=1768%3A64886
-
-import { randomString, getParentScrollableEl } from '../../util/GeneralFunctions.js'
-
-import { ref, onBeforeUnmount } from 'vue'
-
-defineExpose({
-  close:() => close(),
-  open:() => open(),
-})
+import { 
+  useFloating, 
+  autoUpdate, 
+  offset, 
+  flip, 
+  shift,
+  size 
+} from '@floating-ui/vue'
+
+import { ref, defineProps, useSlots, computed } from 'vue'
+import Teleport from 'vue2-teleport'
 
 const props = defineProps({
-  /**
-   * It sets a minimun width for the dropdown menu.
-   */
-  minWidthDropDown: {
-    type: String,
-    default: '240px',
-  },
-  /**
-   * It's a boolean responsible for showing a slot within the html tag button.
-   */
-  buttonLabelOnShow: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * It's a property responsible for toggling the dropdown menu. default: true.
-   */
-  toggleWhenActive: {
-    type: Boolean,
-    default: true,
+  disabled: {type: Boolean, default: false},
+  placement: { type: String, default: 'bottom-start' },
+  offsetVal: { type: Number, default: 4 },
+  width: {
+    type: [Number, String],
+    default: null
   },
-  /**
-   * Disable the toogle on click. default: false.
-   */
-  disabled: {
-    type: Boolean,
-    default: false,
+  height: {
+    type: [Number, String],
+    default: 'auto'
   },
-  /**
-   * It sets the vertical and horizontal position.
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment, vue/require-default-prop
-  position: {
+  contentCss: {
     type: String,
-    validator: (value) => ['custom'].includes(value),
-  },
+    default: 'psui-rounded psui-bg-white psui-shadow-elevation-20'
+  }
 })
 
 const emit = defineEmits(['open', 'close'])
 
-const show = ref(false)
-const id = ref(randomString(8))
-// const marginLeft = ref('-0px')
-const scrollableParentEl = ref(null)
-const PSDropdown = ref(null)
-const PSDropdownDialog = ref(null)
-const PSDropdownTrigger = ref(null)
-
-// const getMaxWidth = computed(() => {
-//   let bounds = PSDropdown.getBoundingClientRect()
-//   return document.documentElement.clientWidth - bounds['left'] - 30
-// })
+const slots = useSlots()
 
-onBeforeUnmount(() => {
-  unwatchParentScrolling()
+const hasDropdownTrigger = computed(() => {
+  return !!slots.dropdownTrigger
 })
 
-const toggle = (event) => {
-  if (props.disabled) return
-  if (!show.value) {
-    open()
-  } else {
-    close()
-  }
-  event.stopPropagation()
-}
+const show = ref(false)
 
-const handleEsc = (evt) => {
-  if (show.value && evt.keyCode === 27) close()
-}
+const PSDropdownTrigger = ref(null)
+const PSDropdownFloating = ref(null)
+
+const { floatingStyles } = useFloating(PSDropdownTrigger, PSDropdownFloating, {
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(props.offsetVal),
+    flip(), 
+    shift(),
+    size({
+      apply({rects, elements}) {
+          const customWidth = props.width ?? rects.reference.width
+          Object.assign(elements.floating.style, {
+            width: `${customWidth}px`,
+            ...(typeof height == 'string' ? {maxHeight: props.height} : {maxHeight : `${props.height}px`})
+          })
+      },
+    }) 
+  ],
+})
 
 const open = () => {
-  emit('open')
   show.value = true
-  if (PSDropdownDialog.value) {
-    PSDropdownDialog.value.style.opacity = 0
-    PSDropdownDialog.value.style.display = 'block'
-  }
-  setTimeout(() => {
-    updatePosition()
-    watchParentScrolling()
-    document.addEventListener('keyup', handleEsc)
-    window.addEventListener('resize', updatePosition)
-    // window.addEventListener('click', clickOutside)
-  }, 10)
-}
-
-const close = () => {
-  if (show.value == true) {
-    emit('close')
-    if (PSDropdownDialog.value !== null) {
-      PSDropdownDialog.value.style.display = 'none'
-      PSDropdownDialog.value.style.opacity = 0
-    }
-    show.value = false
-    unwatchParentScrolling()
-  }
-  document.removeEventListener('keyup', handleEsc)
-  document.removeEventListener('resize', updatePosition)
-  // document.removeEventListener('click', clickOutside)
+  emit('open')
 }
 
-const watchParentScrolling = () => {
-  scrollableParentEl.value = getParentScrollableEl(PSDropdown.value)
-  if (scrollableParentEl.value) {
-    scrollableParentEl.value.addEventListener('scroll', updatePosition)
-  }
-}
+const close = (event) => {
+  if(event?.target && PSDropdownTrigger.value.contains(event?.target)) return
 
-const unwatchParentScrolling = () => {
-  if (scrollableParentEl.value) {
-    scrollableParentEl.value.removeEventListener('scroll', updatePosition())
-  }
+  show.value = false
+  emit('close')
 }
 
-const updatePosition = () => {
-  if (PSDropdownDialog.value === null || PSDropdownTrigger.value === null) return
-
-  const rectTrigger = PSDropdownTrigger.value.getBoundingClientRect()
-  const rectDialog = PSDropdownDialog.value.getBoundingClientRect()
-  const windowWidth = document.documentElement.clientWidth
-
-  PSDropdownDialog.value.style.position = 'fixed'
-  PSDropdownDialog.value.style.top = `${rectTrigger.y + rectTrigger.height}px`
-  PSDropdownDialog.value.style.minWidth = `${rectTrigger.width}px`
-
-  if (rectTrigger.x + rectDialog.width + 20 > windowWidth) {
-    PSDropdownDialog.value.style.left = `${windowWidth - rectDialog.width - 30}px`
-  } else {
-    PSDropdownDialog.value.style.left = `${rectTrigger.x}px`
-  }
-
-  if (props.position == 'custom') {
-    PSDropdownDialog.value.style.top = `${rectTrigger.y}px`
-    PSDropdownDialog.value.style.left = `${rectTrigger.x + 100}px`      
-  }
+const toggle = (event) => {
+  if (props.disabled) return
 
-  if (rectTrigger.top < 10) {
-    close()
-    console.warn('The dropdown are too close from the top of the page')
-    return
-  }
+  if (event) event.stopPropagation()
 
-  setTimeout(() => {
-    if(PSDropdownDialog.value){
-      PSDropdownDialog.value.style.opacity = 1
-    }
-  }, 10)
+  show.value = !show.value
+  
 }
 
-const clickOutside = (event) => {
-  if (!show.value) return
-  if (!PSDropdown.value == event.target || !PSDropdown.value?.contains(event.target)) {
-    close()
-  }
-}
+defineExpose({ open, close })
 </script>

package/src/components/notifications/PsDialog.vue

@@ -3,7 +3,10 @@
     class="psui-el-dialog"
     :class="getComponentClass"
   >
-    <div class="psui-el-dialog-icon">
+    <div
+      v-if="hasIcon"
+      class="psui-el-dialog-icon"
+    >
       <i class="material-icons-round">{{ icon }}</i>
     </div>
     <div class="psui-el-dialog-wrapper">
@@ -71,6 +74,13 @@ const props = defineProps({
     type: String,
     default: 'info',
   },
+  /**
+   * It sets whether the icon should be displayed or not.
+   */
+  hasIcon: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const emit = defineEmits(['close'])