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

package/dist/css/psui_styles_output.css

@@ -526,6 +526,14 @@ video {
   position: relative;
   display: inline-flex;
 }
+.psui-el-chips:focus {
+  outline: none;
+}
+.psui-el-chips:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-chips-icon {
   font-family: "Material Icons Round";
   font-weight: normal;
@@ -3283,6 +3291,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
 }
+.psui-el-checkbox:focus {
+  outline: none;
+}
+.psui-el-checkbox:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-checkbox.disabled .psui-el-checkmark {
   cursor: default !important;
 }
@@ -4022,6 +4038,14 @@ video {
   display: inline-block;
   text-align: left;
 }
+.psui-el-dropdown-menu:focus {
+  outline: none;
+}
+.psui-el-dropdown-menu:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-dropdown-menu button {
   display: inline-flex;
 }
@@ -4573,6 +4597,14 @@ video {
   --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-toast:focus {
+  outline: none;
+}
+.psui-el-toast:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-toast .psui-el-toast-icon {
   margin-right: 1rem;
 }
@@ -6075,6 +6107,14 @@ video {
   font-size: 16px;
 }
 
+.psui-el-collapse:focus {
+  outline: none;
+}
+.psui-el-collapse:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-collapse .psui-el-collapse-item-content {
   position: relative;
 }

package/package.json

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

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

@@ -1,7 +1,17 @@
 @layer components {
         
   .psui-el-checkbox {
-    @apply psui-relative psui-text-gray-50;        
+    @apply psui-relative psui-text-gray-50;       
+    
+    &:focus {
+        outline: none;
+      }
+
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
 
     &.disabled {
       .psui-el-checkmark {

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

@@ -3,6 +3,16 @@
   .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;
     }

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;

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/chips/PsChips.vue

@@ -11,6 +11,7 @@
     @mouseover="isHovering = true"
     @mouseleave="isHovering = false"
     @click="emit('click')"
+    tabindex="0"
   >
     <input
       @change="onChange"

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"

package/src/components/notifications/PsToast.vue

@@ -2,6 +2,7 @@
   <div
     class="psui-el-toast"
     :class="getComponentClass"
+    tabindex="0"
   >
     <i class="material-icons-round psui-el-toast-icon">{{ icon }}</i>
     <p class="psui-el-toast-message">