@policystudio/policy-studio-ui-vue 1.1.90-access.0 → 1.1.90-access.10

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;
@@ -541,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;
 }
@@ -559,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;
 }
@@ -587,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;
@@ -628,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;
@@ -639,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";
@@ -665,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;
 }
@@ -828,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;
@@ -859,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;
 }
@@ -961,6 +1003,11 @@ video {
 .psui-el-tab-header button:focus {
   outline: none;
 }
+.psui-el-tab-header button:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-tab-header.status-disabled .psui-el-input-wrapper {
   --tw-border-opacity: 1;
   border-color: rgb(230, 236, 242, var(--tw-border-opacity, 1));
@@ -1186,6 +1233,14 @@ video {
 .psui-el-accordion-item {
   border-bottom: 1px solid #e6ecf2;
 }
+.psui-el-accordion-item:focus {
+  outline: none;
+}
+.psui-el-accordion-item:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-accordion-item.disabled .psui-el-accordion-item-header .psui-el-accordion-item-header-wrapper {
   pointer-events: none;
 }
@@ -1313,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 */
@@ -1780,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;
@@ -3270,6 +3314,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;
 }
@@ -3718,6 +3770,14 @@ video {
   display: inline-block;
   border-radius: 1.5rem;
 }
+.psui-el-switch:focus {
+  outline: none;
+}
+.psui-el-switch:focus-visible {
+  outline: 2px solid #2563EB;
+  outline-offset: 2px;
+  border-radius: 6px;
+}
 .psui-el-switch.disabled {
   pointer-events: none;
 }
@@ -4001,6 +4061,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;
 }
@@ -4026,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;
@@ -4084,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 {
@@ -4552,6 +4587,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;
 }
@@ -6054,6 +6097,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;
 }
@@ -6376,6 +6427,10 @@ video {
   justify-self: center;
 }
 
+.psui-rounded {
+  border-radius: 0.25rem;
+}
+
 .psui-rounded-md {
   border-radius: 0.375rem;
 }
@@ -6420,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));
@@ -6565,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;
@@ -6573,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.0",
+  "version": "1.1.90-access.10",
   "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

@@ -5,6 +5,16 @@
     &-item {
       border-bottom: 1px solid #e6ecf2;
 
+      &:focus {
+        outline: none;
+      }
+
+    &:focus-visible {
+        outline: 2px solid #2563EB;
+        outline-offset: 2px;       
+        border-radius: 6px;        
+      }
+
       &.disabled {
         .psui-el-accordion-item-header {
           .psui-el-accordion-item-header-wrapper {
@@ -94,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/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 {