@policystudio/policy-studio-ui-vue 1.2.0-access.46 → 1.2.0-access.48

package/dist/css/psui_styles_output.css

@@ -1564,13 +1564,13 @@ video {
   position: relative;
   display: inline-flex;
 }
-.psui-el-chips:focus {
-  outline: none;
+.psui-el-chips, .psui-el-chips:focus, .psui-el-chips input:focus {
+  outline: none !important;
 }
-.psui-el-chips:focus-visible {
-  outline: 2px solid #2563eb;
-  outline-offset: 2px;
-  border-radius: 6px;
+.psui-el-chips:focus-within {
+  outline: 2px solid #2563eb !important;
+  outline-offset: 2px !important;
+  border-radius: 6px !important;
 }
 .psui-el-chips-icon {
   font-family: "Material Icons Round";
@@ -1737,6 +1737,11 @@ video {
 .psui-el-chips.type-checkbox, .psui-el-chips.type-radio {
   line-height: 1;
 }
+.psui-el-chips.type-checkbox:focus-visible, .psui-el-chips.type-radio:focus-visible {
+  outline: 2px solid #2563eb !important;
+  outline-offset: 2px !important;
+  border-radius: 6px !important;
+}
 .psui-el-chips.type-checkbox input, .psui-el-chips.type-radio input {
   pointer-events: none;
 }
@@ -3135,6 +3140,14 @@ video {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.psui-el-card-infos:focus {
+  outline: none !important;
+}
+.psui-el-card-infos:focus-visible {
+  outline: 2px solid #2563eb !important;
+  outline-offset: 2px !important;
+  border-radius: 6px !important;
+}
 .psui-el-card-infos-title {
   margin-bottom: 0.25rem;
 }
@@ -3170,7 +3183,7 @@ video {
 }
 .psui-el-card-infos-icon {
   --tw-text-opacity: 1;
-  color: rgb(45, 165, 204, var(--tw-text-opacity, 1));
+  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
 }
 .psui-el-card-infos-icon {
   font-size: 17px;
@@ -3451,23 +3464,14 @@ video {
   color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
 }
 .psui-el-checkbox:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-.psui-el-checkbox:focus-visible {
-  border-radius: 6px;
-}
-.psui-el-checkbox:focus-visible {
-  outline-style: solid;
+  outline: none !important;
 }
-.psui-el-checkbox:focus-visible {
-  outline-width: 2px;
-}
-.psui-el-checkbox:focus-visible {
-  outline-offset: 2px;
-}
-.psui-el-checkbox:focus-visible {
-  outline-color: #2563EB;
+.psui-el-checkbox:focus-within {
+  outline: 2px solid #2563eb !important;
+  opacity: 1 !important;
+  outline-offset: 2px !important;
+  border-radius: 6px !important;
+  visibility: visible !important;
 }
 .psui-el-checkbox.disabled .psui-el-checkmark {
   cursor: default !important;
@@ -6798,6 +6802,17 @@ video {
   padding-left: 0.5rem;
 }
 
+.psui-general-icon:focus {
+  outline: none !important;
+}
+.psui-general-icon:focus-within, .psui-general-icon:focus-visible {
+  outline: 2px solid #2563eb !important;
+  opacity: 1 !important;
+  outline-offset: 2px !important;
+  border-radius: 6px !important;
+  visibility: visible !important;
+}
+
 .psui-pointer-events-none {
   pointer-events: none;
 }
@@ -7163,11 +7178,6 @@ video {
   color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
 }
 
-.psui-text-gray-30 {
-  --tw-text-opacity: 1;
-  color: rgb(214, 221, 229, var(--tw-text-opacity, 1));
-}
-
 .psui-text-gray-40 {
   --tw-text-opacity: 1;
   color: rgb(162, 172, 183, var(--tw-text-opacity, 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.2.0-access.46",
+  "version": "1.2.0-access.48",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/base.scss

@@ -36,6 +36,7 @@
 @import './components/PsSimpleAlert.scss';
 @import './components/PsBreadcrumb.scss';
 @import './components/PsCollapse.scss';
+@import './components/PsIcon.scss';
 
 
 @import "tailwindcss/base";
@@ -45,6 +46,7 @@
 *:focus {
   outline: none;
 }
+
 html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

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

@@ -3,6 +3,16 @@
   .psui-el-card-infos {
     @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;
 
+    &:focus {
+      outline: none !important;
+    }
+
+    &:focus-visible {
+      outline: 2px solid #2563eb !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+    }
+
     &-title {
       @apply psui-flex psui-text-xsmall psui-text-gray-40 psui-mb-1;
     }
@@ -12,7 +22,7 @@
     }
 
     &-icon {
-      @apply psui-text-blue-50 psui-mr-1;
+      @apply psui-text-blue-60 psui-mr-1;
       font-size: 17px;
     }
 

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

@@ -3,11 +3,15 @@
     @apply psui-relative psui-text-gray-60;
 
     &:focus {
-      @apply psui-outline-none;
+      outline: none !important;
     }
 
-    &:focus-visible {
-      @apply psui-outline psui-outline-2 psui-outline-focus-ring psui-outline-offset-2 psui-rounded-[6px];
+    &:focus-within {
+      outline: 2px solid #2563eb !important;
+      opacity: 1 !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+      visibility: visible !important;
     }
 
     &.disabled {

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

@@ -2,14 +2,14 @@
   .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 {
@@ -70,6 +70,12 @@
       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);
@@ -98,8 +104,8 @@
       .psui-el-chips-wrapper {
         &:before {
           @apply psui-inline-block psui-mr-1 psui-text-gray-60 psui-cursor-pointer psui-transition-all;
-          content: '';
-          font-family: 'Material Icons Round';
+          content: "";
+          font-family: "Material Icons Round";
           font-size: 18px;
         }
 
@@ -113,14 +119,14 @@
       input:checked {
         + .psui-el-chips-wrapper {
           &:before {
-            content: 'check_box';
+            content: "check_box";
           }
         }
       }
 
       .psui-el-chips-wrapper {
         &:before {
-          content: 'check_box_outline_blank';
+          content: "check_box_outline_blank";
         }
       }
     }
@@ -129,14 +135,14 @@
       input:checked {
         + .psui-el-chips-wrapper {
           &:before {
-            content: 'radio_button_checked';
+            content: "radio_button_checked";
           }
         }
       }
 
       .psui-el-chips-wrapper {
         &:before {
-          content: 'radio_button_unchecked';
+          content: "radio_button_unchecked";
         }
       }
     }

package/src/assets/scss/components/PsIcon.scss

@@ -0,0 +1,16 @@
+@layer components {
+  .psui-general-icon { 
+    
+    &:focus {
+      outline: none !important;
+    }
+
+    &:focus-within, &:focus-visible {
+      outline: 2px solid #2563eb !important;
+      opacity: 1 !important;
+      outline-offset: 2px !important;
+      border-radius: 6px !important;
+      visibility: visible !important;
+    }
+  }
+}

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

@@ -1,7 +1,11 @@
 <template>
   <div
     class="psui-el-card-infos"
+    role="button"
+    tabindex="0"
+    :aria-label="`View details for ${title} ${subtitle}`"
     @click="onClick()"
+    @keyup.enter="onClick()"
   >
     <span class="psui-el-card-infos-title">
       <span :class="[titleClass, 'psui-mr-1']">{{ title }}</span>

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

@@ -16,7 +16,7 @@
           class="psui-el-chart-legend-total"
         >{{ total }}</span>
         <span
-          class="psui-text-gray-30"
+          class="psui-text-gray-60"
           v-if="total && percentage"
         > | </span>
         <span

package/src/components/controls/PsCheckboxSimple.vue

@@ -4,7 +4,7 @@
     class="psui-el-checkbox"
     :class="[getComponentClass, { disabled: disabled }]"
     v-bind="getComponentAttrs"
-    @click.prevent="emit('click', $event)"
+    @click.prevent.stop="emit('click', $event)"
   >
     <input
       type="checkbox"
@@ -14,6 +14,7 @@
       :id="getInputId"
       v-bind="inputAttrs"
       @change="emit('change', $event)"
+      @keyup.enter="emit('change', $event)"
     >
     <label
       :for="getInputId"
@@ -38,6 +39,7 @@
       :id="getInputId"
       v-bind="inputAttrs"
       @change="emit('change', $event)"
+      @keyup.enter="emit('change', $event)"
     >
     <label
       :for="getInputId"

package/src/components/ui/PsIcon.vue

@@ -1,6 +1,8 @@
 <template>
   <div
+    class="psui-general-icon"
     :style="{ display: display }"
+    tabindex="0"
     @click="emit('click', $event)"
   >
     <span