primevue 3.16.2 → 3.18.0

package/divider/divider.esm.js

@@ -18,19 +18,23 @@ var script = {
     },
     computed: {
         containerClass() {
-            return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type,
-                {'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left')},
-                {'p-divider-center': this.layout === 'horizontal' && this.align === 'center'},
-                {'p-divider-right': this.layout === 'horizontal' && this.align === 'right'},
-                {'p-divider-top': this.layout === 'vertical' && (this.align === 'top')},
-                {'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center')},
-                {'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom'}
+            return [
+                'p-divider p-component',
+                'p-divider-' + this.layout,
+                'p-divider-' + this.type,
+                { 'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left') },
+                { 'p-divider-center': this.layout === 'horizontal' && this.align === 'center' },
+                { 'p-divider-right': this.layout === 'horizontal' && this.align === 'right' },
+                { 'p-divider-top': this.layout === 'vertical' && this.align === 'top' },
+                { 'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center') },
+                { 'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom' }
             ];
         }
     }
 };
 
-const _hoisted_1 = {
+const _hoisted_1 = ["aria-orientation"];
+const _hoisted_2 = {
   key: 0,
   class: "p-divider-content"
 };
@@ -38,14 +42,15 @@ const _hoisted_1 = {
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: normalizeClass($options.containerClass),
-    role: "separator"
+    role: "separator",
+    "aria-orientation": $props.layout
   }, [
     (_ctx.$slots.default)
-      ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      ? (openBlock(), createElementBlock("div", _hoisted_2, [
           renderSlot(_ctx.$slots, "default")
         ]))
       : createCommentVNode("", true)
-  ], 2))
+  ], 10, _hoisted_1))
 }
 
 function styleInject(css, ref) {
@@ -75,7 +80,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: \"\";\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: \"\";\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n";
+var css_248z = "\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/divider/divider.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as t,normalizeClass as i,renderSlot as n,createCommentVNode as d}from"vue";var r={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const o={key:0,class:"p-divider-content"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===i&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}('\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: "";\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: "";\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n'),r.render=function(r,l,a,s,p,c){return e(),t("div",{class:i(c.containerClass),role:"separator"},[r.$slots.default?(e(),t("div",o,[n(r.$slots,"default")])):d("",!0)],2)};export{r as default};
+import{openBlock as e,createElementBlock as t,normalizeClass as i,renderSlot as n,createCommentVNode as d}from"vue";var r={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const o=["aria-orientation"],l={key:0,class:"p-divider-content"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===i&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n"),r.render=function(r,a,s,p,c,v){return e(),t("div",{class:i(v.containerClass),role:"separator","aria-orientation":s.layout},[r.$slots.default?(e(),t("div",l,[n(r.$slots,"default")])):d("",!0)],10,o)};export{r as default};

package/divider/divider.js

@@ -20,19 +20,23 @@ this.primevue.divider = (function (vue) {
         },
         computed: {
             containerClass() {
-                return ['p-divider p-component', 'p-divider-' + this.layout, 'p-divider-' + this.type,
-                    {'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left')},
-                    {'p-divider-center': this.layout === 'horizontal' && this.align === 'center'},
-                    {'p-divider-right': this.layout === 'horizontal' && this.align === 'right'},
-                    {'p-divider-top': this.layout === 'vertical' && (this.align === 'top')},
-                    {'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center')},
-                    {'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom'}
+                return [
+                    'p-divider p-component',
+                    'p-divider-' + this.layout,
+                    'p-divider-' + this.type,
+                    { 'p-divider-left': this.layout === 'horizontal' && (!this.align || this.align === 'left') },
+                    { 'p-divider-center': this.layout === 'horizontal' && this.align === 'center' },
+                    { 'p-divider-right': this.layout === 'horizontal' && this.align === 'right' },
+                    { 'p-divider-top': this.layout === 'vertical' && this.align === 'top' },
+                    { 'p-divider-center': this.layout === 'vertical' && (!this.align || this.align === 'center') },
+                    { 'p-divider-bottom': this.layout === 'vertical' && this.align === 'bottom' }
                 ];
             }
         }
     };
 
-    const _hoisted_1 = {
+    const _hoisted_1 = ["aria-orientation"];
+    const _hoisted_2 = {
       key: 0,
       class: "p-divider-content"
     };
@@ -40,14 +44,15 @@ this.primevue.divider = (function (vue) {
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass($options.containerClass),
-        role: "separator"
+        role: "separator",
+        "aria-orientation": $props.layout
       }, [
         (_ctx.$slots.default)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
               vue.renderSlot(_ctx.$slots, "default")
             ]))
           : vue.createCommentVNode("", true)
-      ], 2))
+      ], 10, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -77,7 +82,7 @@ this.primevue.divider = (function (vue) {
       }
     }
 
-    var css_248z = "\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: \"\";\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: \"\";\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n";
+    var css_248z = "\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n";
     styleInject(css_248z);
 
     script.render = render;

package/divider/divider.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.divider=function(e){"use strict";var t={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const i={key:0,class:"p-divider-content"};return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],d=document.createElement("style");d.type="text/css","top"===i&&n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.styleSheet?d.styleSheet.cssText=e:d.appendChild(document.createTextNode(e))}}('\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: "";\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: "";\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n'),t.render=function(t,n,d,r,o,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(l.containerClass),role:"separator"},[t.$slots.default?(e.openBlock(),e.createElementBlock("div",i,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("",!0)],2)},t}(Vue);
+this.primevue=this.primevue||{},this.primevue.divider=function(e){"use strict";var t={name:"Divider",props:{align:{type:String,default:null},layout:{type:String,default:"horizontal"},type:{type:String,default:"solid"}},computed:{containerClass(){return["p-divider p-component","p-divider-"+this.layout,"p-divider-"+this.type,{"p-divider-left":"horizontal"===this.layout&&(!this.align||"left"===this.align)},{"p-divider-center":"horizontal"===this.layout&&"center"===this.align},{"p-divider-right":"horizontal"===this.layout&&"right"===this.align},{"p-divider-top":"vertical"===this.layout&&"top"===this.align},{"p-divider-center":"vertical"===this.layout&&(!this.align||"center"===this.align)},{"p-divider-bottom":"vertical"===this.layout&&"bottom"===this.align}]}}};const i=["aria-orientation"],n={key:0,class:"p-divider-content"};return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===i&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-divider-horizontal {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-horizontal:before {\n    position: absolute;\n    display: block;\n    top: 50%;\n    left: 0;\n    width: 100%;\n    content: '';\n}\n.p-divider-horizontal.p-divider-left {\n    -webkit-box-pack: start;\n        -ms-flex-pack: start;\n            justify-content: flex-start;\n}\n.p-divider-horizontal.p-divider-right {\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-divider-horizontal.p-divider-center {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-content {\n    z-index: 1;\n}\n.p-divider-vertical {\n    min-height: 100%;\n    margin: 0 1rem;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-divider-vertical:before {\n    position: absolute;\n    display: block;\n    top: 0;\n    left: 50%;\n    height: 100%;\n    content: '';\n}\n.p-divider-vertical.p-divider-top {\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-divider-vertical.p-divider-center {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-divider-vertical.p-divider-bottom {\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-divider-solid.p-divider-horizontal:before {\n    border-top-style: solid;\n}\n.p-divider-solid.p-divider-vertical:before {\n    border-left-style: solid;\n}\n.p-divider-dashed.p-divider-horizontal:before {\n    border-top-style: dashed;\n}\n.p-divider-dashed.p-divider-vertical:before {\n    border-left-style: dashed;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-top-style: dotted;\n}\n.p-divider-dotted.p-divider-horizontal:before {\n    border-left-style: dotted;\n}\n"),t.render=function(t,r,d,o,l,a){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.containerClass),role:"separator","aria-orientation":d.layout},[t.$slots.default?(e.openBlock(),e.createElementBlock("div",n,[e.renderSlot(t.$slots,"default")])):e.createCommentVNode("",!0)],10,i)},t}(Vue);

package/dock/Dock.d.ts

@@ -1,6 +1,6 @@
 import { VNode } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { MenuItem } from '../menuitem';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 type DockPositionType = 'bottom' | 'top' | 'left' | 'right' | undefined;
 
@@ -53,6 +53,22 @@ export interface DockProps {
      * @see DockTooltipOptions
      */
     tooltipOptions?: DockTooltipOptions;
+    /**
+     * Unique identifier of the menu.
+     */
+    menuId?: string | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | string | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    'aria-labelledby'?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    'aria-label'?: string | undefined;
 }
 
 export interface DockSlots {
@@ -65,6 +81,10 @@ export interface DockSlots {
          * Custom content for item.
          */
         item: MenuItem;
+        /**
+         * Index of the menuitem
+         */
+        index: number;
     }) => VNode[];
     /**
      * Custom icon content.
@@ -79,13 +99,23 @@ export interface DockSlots {
 }
 
 export declare type DockEmits = {
-}
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus: (event: Event) => void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur: (event: Event) => void;
+};
 
-declare class Dock extends ClassComponent<DockProps, DockSlots, DockEmits> { }
+declare class Dock extends ClassComponent<DockProps, DockSlots, DockEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        Dock: GlobalComponentConstructor<Dock>
+        Dock: GlobalComponentConstructor<Dock>;
     }
 }
 
@@ -95,11 +125,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [Dock](https://www.primefaces.org/primevue/showcase/#/dock)
+ * - [Dock](https://www.primefaces.org/primevue/dock)
  *
  */
 export default Dock;

package/dock/Dock.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="containerClass" :style="style">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions"></DockSub>
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex"></DockSub>
     </div>
 </template>
 
@@ -12,7 +12,7 @@ export default {
     props: {
         position: {
             type: String,
-            default: "bottom"
+            default: 'bottom'
         },
         model: null,
         class: null,
@@ -21,6 +21,22 @@ export default {
         exact: {
             type: Boolean,
             default: true
+        },
+        menuId: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
         }
     },
     computed: {
@@ -31,7 +47,7 @@ export default {
     components: {
         DockSub
     }
-}
+};
 </script>
 
 <style>
@@ -59,11 +75,11 @@ export default {
 }
 
 .p-dock-item {
-    transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform;
 }
 
-.p-dock-action {
+.p-dock-link {
     display: flex;
     flex-direction: column;
     align-items: center;

package/dock/DockSub.vue

@@ -1,27 +1,59 @@
 <template>
     <div class="p-dock-list-container">
-        <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
-            <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
-                <template v-if="!templates['item']">
-                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                        <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
-                            v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
-                            <template v-if="!templates['icon']">
-                                <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
-                            </template>
-                            <component v-else :is="templates['icon']" :item="item"></component>
-                        </a>
-                    </router-link>
-                    <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
-                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="disabled(item) ? null : '0'">
-                        <template v-if="!templates['icon']">
-                            <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
+        <ul
+            ref="list"
+            :id="id"
+            class="p-dock-list"
+            role="menu"
+            :aria-orientation="position === 'bottom' || position === 'top' ? 'horizontal' : 'vertical'"
+            :aria-activedescendant="focused ? focusedOptionId : undefined"
+            :tabindex="tabindex"
+            :aria-label="ariaLabel"
+            :aria-labelledby="ariaLabelledby"
+            @focus="onListFocus"
+            @blur="onListBlur"
+            @keydown="onListKeyDown"
+            @mouseleave="onListMouseLeave"
+        >
+            <template v-for="(processedItem, index) of model" :key="index">
+                <li
+                    :id="getItemId(index)"
+                    :class="itemClass(processedItem, index, getItemId(index))"
+                    role="menuitem"
+                    :aria-label="processedItem.label"
+                    :aria-disabled="disabled(processedItem)"
+                    @click="onItemClick($event, processedItem)"
+                    @mouseenter="onItemMouseEnter(index)"
+                >
+                    <div class="p-menuitem-content">
+                        <template v-if="!templates['item']">
+                            <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
+                                <a
+                                    v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
+                                    :href="href"
+                                    :class="linkClass({ isActive, isExactActive })"
+                                    :target="processedItem.target"
+                                    tabindex="-1"
+                                    aria-hidden="true"
+                                    @click="onItemActionClick($event, processedItem, navigate)"
+                                >
+                                    <template v-if="!templates['icon']">
+                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                    </template>
+                                    <component v-else :is="templates['icon']" :item="processedItem"></component>
+                                </a>
+                            </router-link>
+                            <a v-else v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }" :href="processedItem.url" :class="linkClass()" :target="processedItem.target" tabindex="-1" aria-hidden="true">
+                                <template v-if="!templates['icon']">
+                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                </template>
+                                <component v-else :is="templates['icon']" :item="processedItem"></component>
+                            </a>
                         </template>
-                        <component v-else :is="templates['icon']" :item="item"></component>
-                    </a>
-                </template>
-                <component v-else :is="templates['item']" :item="item"></component>
-            </li>
+                        <component v-else :is="templates['item']" :item="processedItem" :index="index"></component>
+                    </div>
+                </li>
+            </template>
         </ul>
     </div>
 </template>
@@ -29,10 +61,16 @@
 <script>
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'DockSub',
+    emits: ['focus', 'blur'],
     props: {
+        position: {
+            type: String,
+            default: 'bottom'
+        },
         model: {
             type: Array,
             default: null
@@ -45,60 +83,196 @@ export default {
             type: Boolean,
             default: true
         },
-        tooltipOptions: null
+        tooltipOptions: null,
+        menuId: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
+        }
     },
     data() {
         return {
-            currentIndex: -3
-        }
+            currentIndex: -3,
+            focused: false,
+            focusedOptionIndex: -1
+        };
     },
     methods: {
+        getItemId(index) {
+            return `${this.id}_${index}`;
+        },
+        getItemProp(processedItem, name) {
+            return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+        },
+        isSameMenuItem(event) {
+            return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('.p-menuitem')));
+        },
         onListMouseLeave() {
             this.currentIndex = -3;
         },
         onItemMouseEnter(index) {
             this.currentIndex = index;
         },
-        onItemClick(event, item, navigate) {
-            if (this.disabled(item)) {
-                event.preventDefault();
-                return;
-            }
+        onItemActionClick(event, navigate) {
+            navigate && navigate(event);
+        },
+        onItemClick(event, processedItem) {
+            if (this.isSameMenuItem(event)) {
+                const command = this.getItemProp(processedItem, 'command');
 
-            if (item.command) {
-                item.command({
-                    originalEvent: event,
-                    item: item
-                });
+                command && command({ originalEvent: event, item: processedItem.item });
             }
+        },
+        onListFocus(event) {
+            this.focused = true;
+            this.changeFocusedOptionIndex(0);
+            this.$emit('focus', event);
+        },
+        onListBlur(event) {
+            this.focused = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onListKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown': {
+                    if (this.position === 'left' || this.position === 'right') this.onArrowDownKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    if (this.position === 'left' || this.position === 'right') this.onArrowUpKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    if (this.position === 'top' || this.position === 'bottom') this.onArrowDownKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    if (this.position === 'top' || this.position === 'bottom') this.onArrowUpKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    this.onHomeKey();
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    this.onEndKey();
+                    event.preventDefault();
+                    break;
+                }
 
-            if (item.to && navigate) {
-                navigate(event);
+                case 'Enter':
+
+                case 'Space': {
+                    this.onSpaceKey(event);
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    break;
             }
         },
-        itemClass(index) {
-            return ['p-dock-item', {
-                'p-dock-item-second-prev': (this.currentIndex - 2) === index,
-                'p-dock-item-prev': (this.currentIndex - 1) === index,
-                'p-dock-item-current': this.currentIndex === index,
-                'p-dock-item-next': (this.currentIndex + 1) === index,
-                'p-dock-item-second-next': (this.currentIndex + 2) === index
-            }];
-        },
-        linkClass(item, routerProps) {
-            return ['p-dock-action', {
-                'p-disabled': this.disabled(item),
-                'router-link-active': routerProps && routerProps.isActive,
-                'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
-            }];
+        onArrowDownKey() {
+            const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+
+            this.changeFocusedOptionIndex(optionIndex);
+        },
+        onArrowUpKey() {
+            const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+
+            this.changeFocusedOptionIndex(optionIndex);
+        },
+        onHomeKey() {
+            this.changeFocusedOptionIndex(0);
+        },
+        onEndKey() {
+            this.changeFocusedOptionIndex(DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)').length - 1);
+        },
+        onSpaceKey() {
+            const element = DomHandler.findSingle(this.$refs.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
+            const anchorElement = element && DomHandler.findSingle(element, '.p-dock-link');
+
+            anchorElement ? anchorElement.click() : element && element.click();
+        },
+        findNextOptionIndex(index) {
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+        },
+        findPrevOptionIndex(index) {
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+            const matchedOptionIndex = [...menuitems].findIndex((link) => link.id === index);
+
+            return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+        },
+        changeFocusedOptionIndex(index) {
+            const menuitems = DomHandler.find(this.$refs.list, 'li.p-dock-item:not(.p-disabled)');
+
+            let order = index >= menuitems.length ? menuitems.length - 1 : index < 0 ? 0 : index;
+
+            this.focusedOptionIndex = menuitems[order].getAttribute('id');
+        },
+        itemClass(item, index, id) {
+            return [
+                'p-dock-item',
+                {
+                    'p-focus': id === this.focusedOptionIndex,
+                    'p-disabled': this.disabled(item),
+                    'p-dock-item-second-prev': this.currentIndex - 2 === index,
+                    'p-dock-item-prev': this.currentIndex - 1 === index,
+                    'p-dock-item-current': this.currentIndex === index,
+                    'p-dock-item-next': this.currentIndex + 1 === index,
+                    'p-dock-item-second-next': this.currentIndex + 2 === index
+                }
+            ];
+        },
+        linkClass(routerProps) {
+            return [
+                'p-dock-link',
+                {
+                    'router-link-active': routerProps && routerProps.isActive,
+                    'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
+                }
+            ];
         },
         disabled(item) {
-            return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+        }
+    },
+    computed: {
+        id() {
+            return this.menuId || UniqueComponentId();
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
         }
     },
     directives: {
-        'ripple': Ripple,
-        'tooltip': Tooltip
+        ripple: Ripple,
+        tooltip: Tooltip
     }
-}
+};
 </script>