@policystudio/policy-studio-ui-vue 1.2.0-access.6 → 1.2.0-access.61

package/src/assets/scss/components/PsCheckbox.scss

@@ -1,107 +1,122 @@
 @layer components {
-        
   .psui-el-checkbox {
-    @apply psui-relative psui-text-gray-50;       
-    
+    @apply psui-relative psui-text-gray-60;
+
     &:focus {
-        outline: none;
-      }
+      outline: none !important;
+    }
+
+    &:focus:not(:focus-visible) {
+      outline: none !important;
+      box-shadow: none !important;
+    }
 
     &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
+      outline: 2px solid #2563eb !important;
+      opacity: 1 !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+      visibility: visible !important;
+    }
 
     &.disabled {
       .psui-el-checkmark {
-        @apply psui-cursor-default psui-text-gray-40 !important
+        @apply psui-cursor-default psui-text-gray-40 !important;
       }
 
       .psui-el-checkmark::before {
-        @apply psui-text-gray-30 !important
+        @apply psui-text-gray-40 !important;
+      }
+
+      input:not(:checked) ~ .psui-el-checkmark::before {
+        @apply psui-bg-gray-20 !important;
+      }
+    }
+
+    &:not(.disabled):hover {
+      input:not(:checked) ~ .psui-el-checkmark::before {
+        @apply psui-bg-blue-20 psui-text-blue-65;
+      }
+
+      input:checked ~ .psui-el-checkmark::before {
+        @apply psui-text-blue-65;
       }
     }
 
     &.size-small {
       @apply psui-text-14;
-      
+
       &.layout-default {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
-      
+
       &.layout-mixed {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'indeterminate_check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['indeterminate\_check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
+
       input {
         @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
 
         &:checked ~ .psui-el-checkmark::before {
-          @apply psui-text-blue-50;
-          font-size: 18px;
+          @apply psui-text-blue-60 psui-text-[18px];
         }
       }
+
       .psui-el-checkmark {
-        @apply psui-flex psui-cursor-pointer psui-items-center;
-        min-height: 18px;
+        @apply psui-flex psui-cursor-pointer psui-items-center psui-min-h-[18px];
 
         span {
-          margin-left: 8px;
+          @apply psui-ml-[8px];
         }
 
         &::before {
-          content:'check_box_outline_blank'; 
-          @apply psui-text-gray-40;
-          font-family:'Material Icons Round';
-          font-size: 18px;
+          @apply psui-content-['check\_box\_outline\_blank'] psui-text-gray-60 psui-font-['Material_Icons_Round'] psui-text-[18px]
+            psui-w-[18px] psui-h-[18px] psui-inline-flex psui-items-center psui-justify-center psui-rounded-[3px] psui-flex-shrink-0 
+            psui-px-0 psui-py-1 psui-box-border psui-bg-clip-content;
         }
-      }            
+      }
     }
 
     &.size-big {
       @apply psui-text-16;
 
       &.layout-mixed {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'indeterminate_check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['indeterminate\_check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
+
       &.layout-default {
-        input:checked ~.psui-el-checkmark::before {
-          content: 'check_box';
-          font-family: 'Material Icons Round';
+        input:checked ~ .psui-el-checkmark::before {
+          @apply psui-content-['check\_box'] psui-font-['Material_Icons_Round'];
         }
       }
+
       input {
         @apply psui-absolute psui-opacity-0 psui-h-0 psui-w-0;
 
-        &:checked ~ .psui-el-checkmark:before {
-          @apply psui-text-blue-50;
-          font-size: 24px;
+        &:checked ~ .psui-el-checkmark::before {
+          @apply psui-text-blue-60 psui-text-[24px];
         }
       }
+
       .psui-el-checkmark {
-        @apply psui-flex psui-cursor-pointer psui-items-center;
-        min-height: 24px;
-        
+        @apply psui-flex psui-cursor-pointer psui-items-center psui-min-h-[24px];
+
         span {
-          margin-left: 8px;
+          @apply psui-ml-[8px];
         }
 
-        &:before {
-          content:'check_box_outline_blank'; 
-          @apply psui-text-gray-40 psui-align-text-bottom;
-          font-family:'Material Icons Round';
-          font-size: 24px;
+        &::before {
+          @apply psui-content-['check\_box\_outline\_blank'] psui-text-gray-60 psui-align-text-bottom psui-font-['Material_Icons_Round'] psui-text-[24px]
+            psui-w-[24px] psui-h-[24px] psui-inline-flex psui-items-center psui-justify-center psui-rounded-[3px] psui-flex-shrink-0 
+            psui-px-[3px] psui-py-[5px] psui-box-border psui-bg-clip-content;
         }
       }
     }
   }
-}
+}

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

@@ -1,29 +1,29 @@
 @layer components {
-
   .psui-el-chips {
     @apply psui-inline-flex psui-relative;
 
-    &:focus {
-        outline: none;
-      }
+    &, &:focus, input:focus {
+      outline: none !important;
+    }
 
-    &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
-      }
+    &:focus-within {
+      outline: 2px solid #2563eb !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+    }
 
     &-icon {
       @apply psui-icon;
     }
 
     .psui-el-chips-text {
+      @apply psui-text-14 psui-font-semibold;
       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;
@@ -55,7 +55,6 @@
           @apply psui-ml-1;
         }
       }
-      
     }
 
     .psui-el-chips-icon {
@@ -72,17 +71,23 @@
       font-size: 14px;
       @apply psui-leading-none;
 
+      &:focus-visible {
+        outline: 2px solid #2563eb !important;
+        outline-offset: 2px !important;
+        border-radius: 6px !important;
+      }
+
       input {
         @apply psui-absolute psui-pointer-events-none psui-invisible;
-        clip: rect(0,0,0,0);
+        clip: rect(0, 0, 0, 0);
 
         &:checked {
           + .psui-el-chips-wrapper {
             &.layout-disabled {
-              @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default; 
+              @apply psui-bg-gray-20 psui-text-gray-40 psui-cursor-default;
 
               &:before {
-                @apply psui-text-gray-30 psui-cursor-default; 
+                @apply psui-text-gray-30 psui-cursor-default;
               }
             }
 
@@ -91,24 +96,22 @@
             }
 
             &:hover {
-              @apply psui-text-gray-60;   
+              @apply psui-text-gray-60;
             }
           }
         }
       }
 
       .psui-el-chips-wrapper {
-  
         &:before {
-          @apply psui-inline-block psui-mr-1 psui-text-gray-50 psui-cursor-pointer psui-transition-all;
-          content: '';
-          font-family: 'Material Icons Round';
+          @apply psui-inline-block psui-mr-1 psui-text-gray-60 psui-cursor-pointer psui-transition-all;
+          content: "";
+          font-family: "Material Icons Round";
           font-size: 18px;
         }
 
         &:hover {
           @apply psui-bg-blue-10;
-
         }
       }
     }
@@ -116,13 +119,12 @@
     &.type-checkbox {
       input:checked {
         + .psui-el-chips-wrapper {
-          
           &:before {
             content: "check_box";
           }
         }
       }
-  
+
       .psui-el-chips-wrapper {
         &:before {
           content: "check_box_outline_blank";
@@ -138,7 +140,7 @@
           }
         }
       }
-      
+
       .psui-el-chips-wrapper {
         &:before {
           content: "radio_button_unchecked";
@@ -146,13 +148,63 @@
       }
     }
 
-    &.type-button {
+    &.layout-filter {
+      &.type-checkbox,
+      &.type-radio {
+        .psui-el-chips-wrapper {
+          @apply psui-bg-white psui-border-gray-40 psui-text-gray-60;
+          padding: 5px 8px;
+
+          &:hover {
+            @apply psui-text-blue-60 psui-border-blue-60 psui-bg-white;
+
+            &:before {
+              @apply psui-text-blue-60;
+            }
+          }
+        }
+
+        input:checked {
+          + .psui-el-chips-wrapper {
+            @apply psui-bg-blue-10 psui-text-blue-80 psui-border-blue-60 psui-font-bold;
+
+            &:before {
+              @apply psui-text-blue-60;
+            }
 
+            &:hover {
+              @apply psui-text-blue-60;
+            }
+          }
+        }
+      }
+
+      &.type-button {
+        .psui-el-chips-wrapper {
+          @apply psui-bg-white psui-border-gray-40 psui-text-gray-60;
+          padding: 5px 8px;
+
+          &:hover {
+            @apply psui-text-blue-60 psui-border-blue-60 psui-bg-white;
+          }
+
+          &.checked {
+            @apply psui-bg-blue-10 psui-text-blue-80 psui-border-blue-60 psui-font-bold;
+
+            &:hover {
+              @apply psui-text-blue-60;
+            }
+          }
+        }
+      }
+    }
+
+    &.type-button {
       &.layout-with-icon {
         .psui-el-chips-wrapper {
-          @apply psui-flex psui-items-center psui-justify-center psui-text-gray-50 psui-rounded-full;
+          @apply psui-flex psui-items-center psui-justify-center psui-text-gray-60 psui-rounded-full;
           padding: 6px 12px;
-  
+
           &:hover {
             @apply psui-text-blue-60 psui-bg-blue-10;
           }
@@ -167,12 +219,11 @@
       &.layout-rich {
         .psui-el-chips-wrapper {
           @apply psui-rounded-full psui-bg-gray-10 psui-text-gray-40 psui-text-xsmall psui-font-bold psui-pl-1 psui-py-1 psui-pr-2;
-  
-          &:hover {
 
+          &:hover {
             &,
             .psui-el-chips-close {
-              @apply psui-text-gray-50;
+              @apply psui-text-gray-60;
             }
 
             .psui-el-chips-icon-prepend {
@@ -209,5 +260,4 @@
       }
     }
   }
-
-}
+}

package/src/assets/scss/components/PsClimateZoneBadge.scss

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-climate-zone-badge {
-        @apply psui-flex psui-bg-gray-10 psui-text-gray-50 psui-transition-all psui-duration-300 psui-ease-out psui-rounded psui-items-center;
+        @apply psui-flex psui-bg-gray-10 psui-text-gray-60 psui-transition-all psui-duration-300 psui-ease-out psui-rounded psui-items-center;
         width: fit-content;
         padding: 0px 6px;
 

package/src/assets/scss/components/PsCollapse.scss

@@ -1,80 +1,76 @@
 @layer components {
-
   .psui-el-collapse {
-    &:focus {
-        outline: none;
+    &[data-filled="true"] {
+      > .psui-el-collapse-item-header {
+        .psui-el-collapse-item-header-wrapper {
+          .psui-el-collapse-item-title {
+            @apply psui-font-semibold;
+            @apply psui-transition-colors psui-duration-200;
+          }
+        }
+
+        &:hover
+          .psui-el-collapse-item-header-wrapper
+          .psui-el-collapse-item-title {
+          @apply psui-text-gray-80;
+        }
       }
 
-    &:focus-visible {
-        outline: 2px solid #2563EB;
-        outline-offset: 2px;       
-        border-radius: 6px;        
+      &:not(.status-opened) > .psui-el-collapse-item-header {
+        .psui-el-collapse-item-title {
+          @apply psui-text-blue-60;
+        }
       }
-    
-    .psui-el-collapse-item-content {
-      @apply psui-relative psui-pl-4;
 
-      &::before {
-        @apply psui-bg-gray-30 psui-ml-2;
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 1px;
-        height: 100%;
-        transform: translateX(-50%);
+      &.status-opened > .psui-el-collapse-item-header {
+        .psui-el-collapse-item-title {
+          @apply psui-text-gray-80;
+        }
       }
     }
 
-    
-
-    .psui-el-collapse-item-header {
-      @apply psui-flex psui-items-center psui-cursor-pointer;
+    > .psui-el-collapse-item-header {
+      @apply psui-flex psui-items-center psui-space-x-[2px] psui-cursor-pointer;
 
       .psui-el-collapse-item-icon {
-        @apply psui-text-gray-50 psui-transition-all;
-        transition-duration: 0.4s;
-        font-size: 16px;
+        @apply psui-size-4 psui-text-gray-60 psui-transition-transform;
+        font-family: "Material Icons Round";
+        font-weight: normal;
+        font-style: normal;
+        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-collapse-item-header-wrapper {
-        @apply psui-flex psui-items-center psui-py-2 psui-text-14 psui-w-full;
-  
-        .psui-el-collapse-item-title {
-          @apply psui-ml-1 psui-text-gray-70 hover:psui-text-blue-60;
-
-          &.disabled {
-            @apply psui-text-gray-50;
-          }      
-  
-        }
-
-        .psui-el-collapse-item-header-action {
-          @apply psui-invisible psui-ml-auto psui-text-gray-70 hover:psui-text-blue-60;
+      &:hover {
+        .psui-el-collapse-item-icon {
+          @apply psui-text-blue-60;
         }
       }
 
-      &:hover {
-        .psui-el-collapse-item-header-wrapper {
-          .psui-el-collapse-item-header-action {
-            @apply psui-visible;
-          }
+      .psui-el-collapse-item-header-wrapper {
+        .psui-el-collapse-item-title {
+          @apply psui-text-14 psui-text-gray-60;
         }
       }
     }
 
-
-    .collapse-fade-enter-active,
-    .collapse-fade-leave-active {
-      will-change: height, margin-bottom;
-      transition: height 0.4s ease-in-out, margin-bottom 0.4s ease-in-out;
-      overflow: hidden;
+    &.status-opened {
+      > .psui-el-collapse-item-header {
+        .psui-el-collapse-item-icon {
+          @apply psui-rotate-90;
+        }
+      }
     }
 
-    .collapse-fade-enter-from,
-    .collapse-fade-leave-to {
-      height: 0 !important;
-      margin-bottom: 0 !important;
+    .psui-el-collapse-item-content {
+      @apply psui-ml-2 psui-pl-2 psui-py-1 psui-border-l psui-border-gray-30;       
     }
   }
-}
+}

package/src/assets/scss/components/PsDateCardInfo.scss

@@ -1,14 +1,17 @@
 @layer components {
   .psui-el-date-card {
-    @apply psui-flex psui-flex-col psui-bg-blue-60 psui-text-blue-20 psui-text-14 psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
+    @apply psui-flex psui-text-14 psui-leading-5 psui-text-white psui-flex-col  psui-font-bold psui-text-center psui-overflow-hidden psui-rounded;
 
     &-month-day, &-year {
-      @apply psui-text-14;
-      padding: 4px 8px;
+      @apply psui-px-2 psui-py-[2px];
     }
    
     &-year {
-      @apply psui-bg-blue-50 psui-w-full psui-font-bold;
+      @apply psui-bg-blue-65;
+    }
+
+    &-month-day {
+      @apply psui-flex psui-items-center psui-space-x-1 psui-bg-blue-60;
     }
   }
 }