@policystudio/policy-studio-ui-vue 1.1.90-access.2 → 1.1.90-access.4

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

@@ -3,10 +3,70 @@
   .psui-el-chips {
     @apply psui-inline-flex psui-relative;
 
+    &:focus {
+        outline: none;
+      }
+
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
+
     &-icon {
       @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;
@@ -18,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; 
 
@@ -29,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;
+
         }
       }
     }
@@ -90,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 {
@@ -155,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/PsCollapse.scss

@@ -1,6 +1,15 @@
 @layer components {
 
   .psui-el-collapse {
+    &:focus {
+        outline: none;
+      }
+
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
     
     .psui-el-collapse-item-content {
       @apply psui-relative psui-pl-4;

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

@@ -1,6 +1,16 @@
 @layer components {
   .psui-el-dropdown-menu {
     @apply psui-relative psui-inline-block psui-text-left;
+
+    &:focus {
+        outline: none;
+      }
+
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
     
     button {
       @apply psui-inline-flex psui-justify-center psui-items-center psui-w-full psui-font-medium psui-leading-none;
@@ -10,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/assets/scss/components/PsToast.scss

@@ -2,6 +2,16 @@
     .psui-el-toast {
         @apply psui-flex psui-items-center psui-text-big psui-text-white psui-py-3 psui-px-4 psui-rounded-md psui-font-bold psui-shadow-elevation-20;    
 
+        &:focus {
+        outline: none;
+      }
+
+        &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
+
         .psui-el-toast-icon {
             @apply psui-flex psui-mr-4;
             font-size: 24px; 

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

@@ -11,6 +11,7 @@
     @mouseover="isHovering = true"
     @mouseleave="isHovering = false"
     @click="emit('click')"
+    tabindex="0"
   >
     <input
       @change="onChange"
@@ -23,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'"
@@ -82,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/collapse/PsCollapse.vue

@@ -2,6 +2,7 @@
   <div
     class="psui-el-collapse"
     :class="{ 'status-opened': isOpen, 'disabled': disabled }"
+    tabindex="0"
   >
     <div
       class="psui-el-collapse-item-header"

package/src/components/controls/PsCheckbox.vue

@@ -2,6 +2,7 @@
   <div
     class="psui-el-checkbox"
     :class="[getComponentClass, { disabled: disabled }]"
+    tabindex="0"
   >
     <input
       :id="getInputId"

package/src/components/controls/PsRadioButton.vue

@@ -2,6 +2,7 @@
   <div
     class="psui-el-radio"
     :class="[getComponentClass, { disabled: disabled }]"
+    tabindex="0"
   >
     <input
       :id="inputId"

package/src/components/controls/PsRadioButtonSimple.vue

@@ -3,6 +3,7 @@
     class="psui-el-radio"
     :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
+    tabindex="0"
   >
     <input
       type="radio"