primevue 3.15.0 → 3.16.2

package/resources/themes/vela-purple/theme.css

@@ -42,6 +42,7 @@
   --surface-hover:rgba(255,255,255,.03);
   --focus-ring: 0 0 0 1px #cf95d9;
   --maskbg: rgba(0, 0, 0, 0.4);
+  color-scheme: light dark;
 }
 
 * {
@@ -240,18 +241,19 @@
 .p-autocomplete.p-autocomplete-dd .p-autocomplete-loader {
   right: 2.857rem;
 }
-.p-autocomplete .p-autocomplete-multiple-container {
-  padding: 0.25rem 0.5rem;
-}
-.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled):hover {
+.p-autocomplete:not(.p-disabled):hover .p-autocomplete-multiple-container {
   border-color: #BA68C8;
 }
-.p-autocomplete .p-autocomplete-multiple-container:not(.p-disabled).p-focus {
+.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
   border-color: #BA68C8;
 }
+.p-autocomplete .p-autocomplete-multiple-container {
+  padding: 0.25rem 0.5rem;
+  gap: 0.5rem;
+}
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token {
   padding: 0.25rem 0;
 }
@@ -264,7 +266,6 @@
 }
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token {
   padding: 0.25rem 0.5rem;
-  margin-right: 0.5rem;
   background: #304562;
   color: rgba(255, 255, 255, 0.87);
   border-radius: 16px;
@@ -272,6 +273,10 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
   margin-left: 0.5rem;
 }
+.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token.p-focus {
+  background: #3e526d;
+  color: rgba(255, 255, 255, 0.87);
+}
 .p-autocomplete.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -295,14 +300,21 @@
   transition: box-shadow 0.2s;
   border-radius: 0;
 }
-.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
-  color: rgba(255, 255, 255, 0.87);
-  background: rgba(255, 255, 255, 0.03);
-}
 .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight.p-focus {
+  background: rgba(186, 104, 200, 0.24);
+}
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled).p-focus {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.09);
+}
+.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:not(.p-highlight):not(.p-disabled):hover {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.03);
+}
 .p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item-group {
   margin: 0;
   padding: 0.75rem 1rem;
@@ -584,22 +596,24 @@
   transition: box-shadow 0.2s;
   border-radius: 0;
 }
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
-  padding: 0.5rem 1rem;
-}
-.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #cf95d9;
-}
 .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item.p-highlight.p-focus {
+  background: rgba(186, 104, 200, 0.24);
+}
+.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.09);
+}
 .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-item-content {
+  padding: 0.5rem 1rem;
+}
 .p-cascadeselect-panel .p-cascadeselect-items .p-cascadeselect-item .p-cascadeselect-group-icon {
   font-size: 0.875rem;
 }
@@ -667,18 +681,18 @@
   background: #a241b2;
 }
 
-.p-chips .p-chips-multiple-container {
-  padding: 0.25rem 0.5rem;
-}
-.p-chips .p-chips-multiple-container:not(.p-disabled):hover {
+.p-chips:not(.p-disabled):hover .p-chips-multiple-container {
   border-color: #BA68C8;
 }
-.p-chips .p-chips-multiple-container:not(.p-disabled).p-focus {
+.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
   border-color: #BA68C8;
 }
+.p-chips .p-chips-multiple-container {
+  padding: 0.25rem 0.5rem;
+}
 .p-chips .p-chips-multiple-container .p-chips-token {
   padding: 0.25rem 0.5rem;
   margin-right: 0.5rem;
@@ -686,6 +700,10 @@
   color: rgba(255, 255, 255, 0.87);
   border-radius: 16px;
 }
+.p-chips .p-chips-multiple-container .p-chips-token.p-focus {
+  background: #3e526d;
+  color: rgba(255, 255, 255, 0.87);
+}
 .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon {
   margin-left: 0.5rem;
 }
@@ -746,7 +764,7 @@
 .p-dropdown .p-dropdown-label.p-placeholder {
   color: rgba(255, 255, 255, 0.6);
 }
-.p-dropdown .p-dropdown-label:enabled:focus {
+.p-dropdown .p-dropdown-label:focus, .p-dropdown .p-dropdown-label:enabled:focus {
   outline: 0 none;
   box-shadow: none;
 }
@@ -805,6 +823,13 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight.p-focus {
+  background: rgba(186, 104, 200, 0.24);
+}
+.p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled).p-focus {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.09);
+}
 .p-dropdown-panel .p-dropdown-items .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
@@ -1155,6 +1180,7 @@
   color: rgba(255, 255, 255, 0.87);
   border: 1px solid #304562;
   border-radius: 3px;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
 }
 .p-listbox .p-listbox-header {
   padding: 0.5rem 1rem;
@@ -1174,6 +1200,7 @@
 }
 .p-listbox .p-listbox-list {
   padding: 0.5rem 0;
+  outline: 0 none;
 }
 .p-listbox .p-listbox-list .p-listbox-item {
   margin: 0;
@@ -1187,11 +1214,6 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
-.p-listbox .p-listbox-list .p-listbox-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #cf95d9;
-}
 .p-listbox .p-listbox-list .p-listbox-item-group {
   margin: 0;
   padding: 0.75rem 1rem;
@@ -1204,10 +1226,23 @@
   color: rgba(255, 255, 255, 0.87);
   background: transparent;
 }
+.p-listbox:not(.p-disabled) .p-listbox-item.p-highlight.p-focus {
+  background: rgba(186, 104, 200, 0.24);
+}
+.p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled).p-focus {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.09);
+}
 .p-listbox:not(.p-disabled) .p-listbox-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
+.p-listbox.p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+  border-color: #BA68C8;
+}
 .p-listbox.p-invalid {
   border-color: #ef9a9a;
 }
@@ -1321,15 +1356,17 @@
   color: rgba(255, 255, 255, 0.87);
   background: rgba(186, 104, 200, 0.16);
 }
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
+  background: rgba(186, 104, 200, 0.24);
+}
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
+  color: rgba(255, 255, 255, 0.87);
+  background: rgba(255, 255, 255, 0.09);
+}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: inset 0 0 0 0.15rem #cf95d9;
-}
 .p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
   margin-right: 0.5rem;
 }
@@ -1448,17 +1485,18 @@
 .p-rating .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:focus {
-  outline: 0 none;
-  outline-offset: 0;
-  box-shadow: 0 0 0 1px #cf95d9;
-}
 .p-rating .p-rating-icon:first-child {
   margin-left: 0;
 }
 .p-rating .p-rating-icon.pi-star-fill {
   color: #BA68C8;
 }
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+  border-color: #BA68C8;
+}
 .p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
   color: #BA68C8;
 }
@@ -1735,6 +1773,9 @@
   outline-offset: 0;
   box-shadow: 0 0 0 1px #cf95d9;
 }
+.p-button .p-button-label {
+  transition-duration: 0.2s;
+}
 .p-button .p-button-icon-left {
   margin-right: 0.5rem;
 }
@@ -2638,7 +2679,8 @@
   background: #1f2d40;
 }
 .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
-.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
   background-color: #1f2d40;
 }
 .p-datatable .p-datatable-loading-icon {

package/ripple/ripple.cjs.js

@@ -13,6 +13,7 @@ function unbindEvents(el) {
 function create(el) {
     let ink = document.createElement('span');
     ink.className = 'p-ink';
+    ink.setAttribute("role", "presentation");
     el.appendChild(ink);
 
     ink.addEventListener('animationend', onAnimationEnd);

package/ripple/ripple.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils");function t(e){let t=r(e);t&&(!function(e){e.removeEventListener("mousedown",n)}(e),t.removeEventListener("animationend",i),t.remove())}function n(t){let n=t.currentTarget,i=r(n);if(!i||"none"===getComputedStyle(i,null).display)return;if(e.DomHandler.removeClass(i,"p-ink-active"),!e.DomHandler.getHeight(i)&&!e.DomHandler.getWidth(i)){let t=Math.max(e.DomHandler.getOuterWidth(n),e.DomHandler.getOuterHeight(n));i.style.height=t+"px",i.style.width=t+"px"}let o=e.DomHandler.getOffset(n),l=t.pageX-o.left+document.body.scrollTop-e.DomHandler.getWidth(i)/2,a=t.pageY-o.top+document.body.scrollLeft-e.DomHandler.getHeight(i)/2;i.style.top=a+"px",i.style.left=l+"px",e.DomHandler.addClass(i,"p-ink-active")}function i(t){e.DomHandler.removeClass(t.currentTarget,"p-ink-active")}function r(e){for(let t=0;t<e.children.length;t++)if("string"==typeof e.children[t].className&&-1!==e.children[t].className.indexOf("p-ink"))return e.children[t];return null}const o={mounted(e,t){t.instance.$primevue&&t.instance.$primevue.config&&t.instance.$primevue.config.ripple&&(function(e){let t=document.createElement("span");t.className="p-ink",e.appendChild(t),t.addEventListener("animationend",i)}(e),function(e){e.addEventListener("mousedown",n)}(e))},unmounted(e){t(e)}};module.exports=o;
+"use strict";var e=require("primevue/utils");function t(e){let t=r(e);t&&(!function(e){e.removeEventListener("mousedown",n)}(e),t.removeEventListener("animationend",i),t.remove())}function n(t){let n=t.currentTarget,i=r(n);if(!i||"none"===getComputedStyle(i,null).display)return;if(e.DomHandler.removeClass(i,"p-ink-active"),!e.DomHandler.getHeight(i)&&!e.DomHandler.getWidth(i)){let t=Math.max(e.DomHandler.getOuterWidth(n),e.DomHandler.getOuterHeight(n));i.style.height=t+"px",i.style.width=t+"px"}let o=e.DomHandler.getOffset(n),l=t.pageX-o.left+document.body.scrollTop-e.DomHandler.getWidth(i)/2,a=t.pageY-o.top+document.body.scrollLeft-e.DomHandler.getHeight(i)/2;i.style.top=a+"px",i.style.left=l+"px",e.DomHandler.addClass(i,"p-ink-active")}function i(t){e.DomHandler.removeClass(t.currentTarget,"p-ink-active")}function r(e){for(let t=0;t<e.children.length;t++)if("string"==typeof e.children[t].className&&-1!==e.children[t].className.indexOf("p-ink"))return e.children[t];return null}const o={mounted(e,t){t.instance.$primevue&&t.instance.$primevue.config&&t.instance.$primevue.config.ripple&&(function(e){let t=document.createElement("span");t.className="p-ink",t.setAttribute("role","presentation"),e.appendChild(t),t.addEventListener("animationend",i)}(e),function(e){e.addEventListener("mousedown",n)}(e))},unmounted(e){t(e)}};module.exports=o;

package/ripple/ripple.esm.js

@@ -11,6 +11,7 @@ function unbindEvents(el) {
 function create(el) {
     let ink = document.createElement('span');
     ink.className = 'p-ink';
+    ink.setAttribute("role", "presentation");
     el.appendChild(ink);
 
     ink.addEventListener('animationend', onAnimationEnd);

package/ripple/ripple.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e}from"primevue/utils";function t(e){let t=o(e);t&&(!function(e){e.removeEventListener("mousedown",n)}(e),t.removeEventListener("animationend",i),t.remove())}function n(t){let n=t.currentTarget,i=o(n);if(!i||"none"===getComputedStyle(i,null).display)return;if(e.removeClass(i,"p-ink-active"),!e.getHeight(i)&&!e.getWidth(i)){let t=Math.max(e.getOuterWidth(n),e.getOuterHeight(n));i.style.height=t+"px",i.style.width=t+"px"}let r=e.getOffset(n),l=t.pageX-r.left+document.body.scrollTop-e.getWidth(i)/2,a=t.pageY-r.top+document.body.scrollLeft-e.getHeight(i)/2;i.style.top=a+"px",i.style.left=l+"px",e.addClass(i,"p-ink-active")}function i(t){e.removeClass(t.currentTarget,"p-ink-active")}function o(e){for(let t=0;t<e.children.length;t++)if("string"==typeof e.children[t].className&&-1!==e.children[t].className.indexOf("p-ink"))return e.children[t];return null}const r={mounted(e,t){t.instance.$primevue&&t.instance.$primevue.config&&t.instance.$primevue.config.ripple&&(function(e){let t=document.createElement("span");t.className="p-ink",e.appendChild(t),t.addEventListener("animationend",i)}(e),function(e){e.addEventListener("mousedown",n)}(e))},unmounted(e){t(e)}};export{r as default};
+import{DomHandler as e}from"primevue/utils";function t(e){let t=r(e);t&&(!function(e){e.removeEventListener("mousedown",n)}(e),t.removeEventListener("animationend",i),t.remove())}function n(t){let n=t.currentTarget,i=r(n);if(!i||"none"===getComputedStyle(i,null).display)return;if(e.removeClass(i,"p-ink-active"),!e.getHeight(i)&&!e.getWidth(i)){let t=Math.max(e.getOuterWidth(n),e.getOuterHeight(n));i.style.height=t+"px",i.style.width=t+"px"}let o=e.getOffset(n),l=t.pageX-o.left+document.body.scrollTop-e.getWidth(i)/2,s=t.pageY-o.top+document.body.scrollLeft-e.getHeight(i)/2;i.style.top=s+"px",i.style.left=l+"px",e.addClass(i,"p-ink-active")}function i(t){e.removeClass(t.currentTarget,"p-ink-active")}function r(e){for(let t=0;t<e.children.length;t++)if("string"==typeof e.children[t].className&&-1!==e.children[t].className.indexOf("p-ink"))return e.children[t];return null}const o={mounted(e,t){t.instance.$primevue&&t.instance.$primevue.config&&t.instance.$primevue.config.ripple&&(function(e){let t=document.createElement("span");t.className="p-ink",t.setAttribute("role","presentation"),e.appendChild(t),t.addEventListener("animationend",i)}(e),function(e){e.addEventListener("mousedown",n)}(e))},unmounted(e){t(e)}};export{o as default};

package/ripple/ripple.js

@@ -13,6 +13,7 @@ this.primevue.ripple = (function (utils) {
     function create(el) {
         let ink = document.createElement('span');
         ink.className = 'p-ink';
+        ink.setAttribute("role", "presentation");
         el.appendChild(ink);
 
         ink.addEventListener('animationend', onAnimationEnd);

package/ripple/ripple.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.ripple=function(e){"use strict";function t(e){let t=r(e);t&&(!function(e){e.removeEventListener("mousedown",n)}(e),t.removeEventListener("animationend",i),t.remove())}function n(t){let n=t.currentTarget,i=r(n);if(!i||"none"===getComputedStyle(i,null).display)return;if(e.DomHandler.removeClass(i,"p-ink-active"),!e.DomHandler.getHeight(i)&&!e.DomHandler.getWidth(i)){let t=Math.max(e.DomHandler.getOuterWidth(n),e.DomHandler.getOuterHeight(n));i.style.height=t+"px",i.style.width=t+"px"}let l=e.DomHandler.getOffset(n),o=t.pageX-l.left+document.body.scrollTop-e.DomHandler.getWidth(i)/2,a=t.pageY-l.top+document.body.scrollLeft-e.DomHandler.getHeight(i)/2;i.style.top=a+"px",i.style.left=o+"px",e.DomHandler.addClass(i,"p-ink-active")}function i(t){e.DomHandler.removeClass(t.currentTarget,"p-ink-active")}function r(e){for(let t=0;t<e.children.length;t++)if("string"==typeof e.children[t].className&&-1!==e.children[t].className.indexOf("p-ink"))return e.children[t];return null}return{mounted(e,t){t.instance.$primevue&&t.instance.$primevue.config&&t.instance.$primevue.config.ripple&&(function(e){let t=document.createElement("span");t.className="p-ink",e.appendChild(t),t.addEventListener("animationend",i)}(e),function(e){e.addEventListener("mousedown",n)}(e))},unmounted(e){t(e)}}}(primevue.utils);
+this.primevue=this.primevue||{},this.primevue.ripple=function(e){"use strict";function t(e){let t=r(e);t&&(!function(e){e.removeEventListener("mousedown",n)}(e),t.removeEventListener("animationend",i),t.remove())}function n(t){let n=t.currentTarget,i=r(n);if(!i||"none"===getComputedStyle(i,null).display)return;if(e.DomHandler.removeClass(i,"p-ink-active"),!e.DomHandler.getHeight(i)&&!e.DomHandler.getWidth(i)){let t=Math.max(e.DomHandler.getOuterWidth(n),e.DomHandler.getOuterHeight(n));i.style.height=t+"px",i.style.width=t+"px"}let l=e.DomHandler.getOffset(n),o=t.pageX-l.left+document.body.scrollTop-e.DomHandler.getWidth(i)/2,a=t.pageY-l.top+document.body.scrollLeft-e.DomHandler.getHeight(i)/2;i.style.top=a+"px",i.style.left=o+"px",e.DomHandler.addClass(i,"p-ink-active")}function i(t){e.DomHandler.removeClass(t.currentTarget,"p-ink-active")}function r(e){for(let t=0;t<e.children.length;t++)if("string"==typeof e.children[t].className&&-1!==e.children[t].className.indexOf("p-ink"))return e.children[t];return null}return{mounted(e,t){t.instance.$primevue&&t.instance.$primevue.config&&t.instance.$primevue.config.ripple&&(function(e){let t=document.createElement("span");t.className="p-ink",t.setAttribute("role","presentation"),e.appendChild(t),t.addEventListener("animationend",i)}(e),function(e){e.addEventListener("mousedown",n)}(e))},unmounted(e){t(e)}}}(primevue.utils);

package/selectbutton/SelectButton.d.ts

@@ -52,9 +52,13 @@ export interface SelectButtonProps {
      */
     dataKey?: string | undefined;
     /**
-     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     * Whether selection can be cleared.
      */
-    ariaLabelledBy?: string | undefined;
+    unselectable?: boolean | undefined;
+    /**
+     * Identifier of the underlying element.
+     */
+    "aria-labelledby"?: string | undefined;
 }
 
 export interface SelectButtonSlots {

package/selectbutton/SelectButton.vue

@@ -1,9 +1,7 @@
 <template>
-    <div :class="containerClass" role="group">
-        <div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :aria-label="getOptionLabel(option)" role="button" :aria-pressed="isSelected(option)"
-            @click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option)"
-            :tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy" v-ripple
-            :class="getButtonClass(option)">
+    <div ref="container" :class="containerClass" role="group" :aria-labelledby="ariaLabelledby">
+        <div v-for="(option, i) of options" :key="getOptionRenderKey(option)" :tabindex="i === focusedIndex ? '0' : '-1'" :aria-label="getOptionLabel(option)" :role="multiple ? 'checkbox' : 'radio'" :aria-checked="isSelected(option)" :aria-disabled="optionDisabled"
+            :class="getButtonClass(option, i)" @click="onOptionSelect($event, option, i)" @keydown="onKeydown($event, option, i)" @focus="onFocus($event)" @blur="onBlur($event, option)" v-ripple>
             <slot name="option" :option="option" :index="i">
                 <span class="p-button-label">{{getOptionLabel(option)}}</span>
             </slot>
@@ -12,7 +10,7 @@
 </template>
 
 <script>
-import {ObjectUtils} from 'primevue/utils';
+import {ObjectUtils,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -25,11 +23,36 @@ export default {
         optionValue: null,
         optionDisabled: null,
 		multiple: Boolean,
+        unselectable: {
+            type: Boolean,
+            default: true
+        },
         disabled: Boolean,
         dataKey: null,
-        ariaLabelledBy: null
+        'aria-labelledby': {
+            type: String,
+			default: null
+        }
+    },
+    data() {
+        return {
+            focusedIndex: 0
+        }
+    },
+    mounted() {
+        this.defaultTabIndexes();
     },
     methods: {
+        defaultTabIndexes() {
+            let opts = DomHandler.find(this.$refs.container, '.p-button');
+            let firstHighlight = DomHandler.findSingle(this.$refs.container, '.p-highlight');
+
+            for (let i = 0; i < opts.length; i++) {
+                if ((DomHandler.hasClass(opts[i], 'p-highlight') && ObjectUtils.equals(opts[i], firstHighlight)) || (firstHighlight === null && i == 0)) {
+                    this.focusedIndex = i;
+                }
+            }
+        },
         getOptionLabel(option) {
             return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option;
         },
@@ -42,25 +65,30 @@ export default {
         isOptionDisabled(option) {
             return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
         },
-        onOptionSelect(event, option) {
+        onOptionSelect(event, option, index) {
             if (this.disabled || this.isOptionDisabled(option)) {
                 return;
             }
 
             let selected = this.isSelected(option);
+            if (selected && !this.unselectable) {
+                return;
+            }
+
             let optionValue = this.getOptionValue(option);
             let newValue;
 
-            if(this.multiple) {
+            if (this.multiple) {
                 if (selected)
                     newValue = this.modelValue.filter(val => !ObjectUtils.equals(val, optionValue, this.equalityKey));
                 else
                     newValue = this.modelValue ? [...this.modelValue, optionValue]: [optionValue];
             }
             else {
-                newValue = optionValue;
+                newValue = selected ? null : optionValue;
             }
 
+            this.focusedIndex = index;
             this.$emit('update:modelValue', newValue);
             this.$emit('change', {event: event, value: newValue});
         },
@@ -84,11 +112,60 @@ export default {
 
             return selected;
         },
+        onKeydown(event, option, index) {
+            switch (event.code) {
+                case 'Space': {
+                    this.onOptionSelect(event, option, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowDown':
+                case 'ArrowRight': {
+                    this.changeTabIndexes(event, 'next');
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp':
+                case 'ArrowLeft': {
+                    this.changeTabIndexes(event, 'prev');
+                    event.preventDefault();
+                    break;
+                }
+                
+                default:
+                    //no op
+                break;
+            }
+        },
+        changeTabIndexes(event, direction) {
+            let firstTabableChild, index;
+            for (let i = 0; i <= this.$refs.container.children.length - 1; i++) {
+                if (this.$refs.container.children[i].getAttribute('tabindex') === '0')
+                    firstTabableChild = {elem: this.$refs.container.children[i], index: i};
+            }
+
+            if (direction === 'prev') {
+                if (firstTabableChild.index === 0) index = this.$refs.container.children.length - 1;
+                else index = firstTabableChild.index - 1;
+            }
+            else {
+                if (firstTabableChild.index === this.$refs.container.children.length - 1) index = 0;
+                else index = firstTabableChild.index + 1;
+            }
+
+            this.focusedIndex = index;
+            this.$refs.container.children[index].focus();
+        },
         onFocus(event) {
             this.$emit('focus', event);
         },
-        onBlur(event) {
-            this.$emit('blur', event);
+        onBlur(event, option) {
+            if (event.target && event.relatedTarget && event.target.parentElement !== event.relatedTarget.parentElement) {
+                this.defaultTabIndexes();
+            }
+            this.$emit('blur', event, option);
         },
         getButtonClass(option) {
             return ['p-button p-component', {