primevue 3.16.2 → 3.17.0

package/rating/rating.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.rating = (function (vue) {
+this.primevue.rating = (function (utils, vue) {
     'use strict';
 
     var script = {
@@ -10,15 +10,11 @@ this.primevue.rating = (function (vue) {
                 type: Number,
                 default: null
             },
-            name: {
-                type: String,
-                default: null
-            },
-    		disabled: {
+            disabled: {
                 type: Boolean,
                 default: false
             },
-    		readonly: {
+            readonly: {
                 type: Boolean,
                 default: false
             },
@@ -29,62 +25,58 @@ this.primevue.rating = (function (vue) {
             cancel: {
                 type: Boolean,
                 default: true
+            },
+            onIcon: {
+                type: String,
+                default: 'pi pi-star-fill'
+            },
+            offIcon: {
+                type: String,
+                default: 'pi pi-star'
+            },
+            cancelIcon: {
+                type: String,
+                default: 'pi pi-ban'
             }
         },
         data() {
             return {
-                focusIndex: null
+                focusedOptionIndex: -1
             };
         },
         methods: {
-            onStarClick(event, value) {
+            onOptionClick(event, value) {
                 if (!this.readonly && !this.disabled) {
-                    this.updateModel(event, value);
-                    this.focusIndex = value;
-                }
-            },
-            onKeyDown(event, value) {
-                if (event.code === 'Space') {
-                    this.updateModel(event, value);
-                }
-                if (event.code === 'Tab') {
-                    this.focusIndex = null;
-                }
-            },
-            onFocus(event, index) {
-                if (!this.readonly) {
-                    if (this.modelValue === null && this.focusIndex === null) {
-                        this.cancel ? this.focusIndex = 0 : this.focusIndex = 1;
-                    }
-                    else if (this.modelValue !== null && this.focusIndex === null) {
-                        this.focusIndex = this.modelValue;
-                        this.updateModel(event, this.modelValue);
-                    }
-                    else {
-                        this.focusIndex = index;
-                        this.updateModel(event, index);
-                    }
+                    this.onOptionSelect(event, value);
+                    const firstFocusableEl = utils.DomHandler.getFirstFocusableElement(event.currentTarget);
 
-                    this.$emit('focus', event);
+                    firstFocusableEl && utils.DomHandler.focus(firstFocusableEl);
                 }
             },
+            onFocus(event, value) {
+                this.focusedOptionIndex = value;
+                this.$emit('focus', event);
+            },
             onBlur(event) {
+                this.focusedOptionIndex = -1;
                 this.$emit('blur', event);
             },
-            onCancelClick(event) {
-                if (!this.readonly && !this.disabled) {
-                    this.updateModel(event, null);
-                }
+            onChange(event, value) {
+                this.onOptionSelect(event, value);
+            },
+            onOptionSelect(event, value) {
+                this.focusedOptionIndex = value;
+                this.updateModel(event, value || null);
             },
             updateModel(event, value) {
                 this.$emit('update:modelValue', value);
-                this.$emit('change', {
-                    originalEvent: event,
-                    value: value
-                });
+                this.$emit('change', { originalEvent: event, value });
             },
-            ariaLabelTemplate(index) {
-                return index === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, index);
+            cancelAriaLabel() {
+                return this.$primevue.config.locale.clear;
+            },
+            starAriaLabel(value) {
+                return value === 1 ? this.$primevue.config.locale.aria.star : this.$primevue.config.locale.aria.stars.replace(/{star}/g, value);
             }
         },
         computed: {
@@ -96,68 +88,96 @@ this.primevue.rating = (function (vue) {
                         'p-disabled': this.disabled
                     }
                 ];
+            },
+            cancelIconClass() {
+                return ['p-rating-icon p-rating-cancel', this.cancelIcon];
+            },
+            onIconClass() {
+                return ['p-rating-icon', this.onIcon];
+            },
+            offIconClass() {
+                return ['p-rating-icon', this.offIcon];
+            },
+            name() {
+                return this.$attrs.name || utils.UniqueComponentId();
             }
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-hidden-accessible"
-    };
+    const _hoisted_1 = { class: "p-hidden-accessible" };
     const _hoisted_2 = ["name", "checked", "disabled", "readonly", "aria-label"];
     const _hoisted_3 = ["onClick"];
     const _hoisted_4 = { class: "p-hidden-accessible" };
-    const _hoisted_5 = ["value", "name", "checked", "disabled", "readonly", "aria-label", "onFocus", "onKeydown"];
+    const _hoisted_5 = ["value", "name", "checked", "disabled", "readonly", "aria-label", "onFocus", "onChange"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createElementBlock("div", {
         class: vue.normalizeClass($options.containerClass)
       }, [
         ($props.cancel)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
+          ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass(['p-rating-icon p-rating-cancel pi pi-ban', {'p-focus': $data.focusIndex === 0}]),
-              onClick: _cache[3] || (_cache[3] = (...args) => ($options.onCancelClick && $options.onCancelClick(...args))),
-              onKeydown: _cache[4] || (_cache[4] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
+              class: vue.normalizeClass(['p-rating-item p-rating-cancel-item', { 'p-focus': $data.focusedOptionIndex === 0 }]),
+              onClick: _cache[3] || (_cache[3] = $event => ($options.onOptionClick($event, 0)))
             }, [
-              ($props.cancel)
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
-                    vue.createElementVNode("input", {
-                      type: "radio",
-                      value: "0",
-                      name: $props.name,
-                      checked: $props.modelValue === 0,
-                      disabled: $props.disabled,
-                      readonly: $props.readonly,
-                      "aria-label": _ctx.$primevue.config.locale.clear,
-                      onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event, 0))),
-                      onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-                      onKeydown: _cache[2] || (_cache[2] = $event => ($options.onKeyDown($event, 0)))
-                    }, null, 40, _hoisted_2)
-                  ]))
-                : vue.createCommentVNode("", true)
-            ], 34))
+              vue.createElementVNode("span", _hoisted_1, [
+                vue.createElementVNode("input", {
+                  type: "radio",
+                  value: "0",
+                  name: $options.name,
+                  checked: $props.modelValue === 0,
+                  disabled: $props.disabled,
+                  readonly: $props.readonly,
+                  "aria-label": $options.cancelAriaLabel(),
+                  onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event, 0))),
+                  onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
+                  onChange: _cache[2] || (_cache[2] = $event => ($options.onChange($event, 0)))
+                }, null, 40, _hoisted_2)
+              ]),
+              vue.renderSlot(_ctx.$slots, "cancelicon", {}, () => [
+                vue.createElementVNode("span", {
+                  class: vue.normalizeClass($options.cancelIconClass)
+                }, null, 2)
+              ])
+            ], 2))
           : vue.createCommentVNode("", true),
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.stars, (i) => {
-          return (vue.openBlock(), vue.createElementBlock("span", {
-            key: i,
-            class: vue.normalizeClass(['p-rating-icon', {'pi pi-star': (i > $props.modelValue), 'pi pi-star-fill': (i <= $props.modelValue), 'p-focus': i === $data.focusIndex}]),
-            onClick: $event => ($options.onStarClick($event,i))
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.stars, (value) => {
+          return (vue.openBlock(), vue.createElementBlock("div", {
+            key: value,
+            class: vue.normalizeClass(['p-rating-item', { 'p-rating-item-active': value <= $props.modelValue, 'p-focus': value === $data.focusedOptionIndex }]),
+            onClick: $event => ($options.onOptionClick($event, value))
           }, [
             vue.createElementVNode("span", _hoisted_4, [
               vue.createElementVNode("input", {
                 type: "radio",
-                value: i,
-                name: $props.name,
-                checked: $props.modelValue === i,
+                value: value,
+                name: $options.name,
+                checked: $props.modelValue === value,
                 disabled: $props.disabled,
                 readonly: $props.readonly,
-                "aria-label": $options.ariaLabelTemplate(i),
-                onFocus: $event => ($options.onFocus($event, i)),
-                onBlur: _cache[5] || (_cache[5] = (...args) => ($options.onBlur && $options.onBlur(...args))),
-                onKeydown: $event => ($options.onKeyDown($event,i))
+                "aria-label": $options.starAriaLabel(value),
+                onFocus: $event => ($options.onFocus($event, value)),
+                onBlur: _cache[4] || (_cache[4] = (...args) => ($options.onBlur && $options.onBlur(...args))),
+                onChange: $event => ($options.onChange($event, value))
               }, null, 40, _hoisted_5)
-            ])
+            ]),
+            (value <= $props.modelValue)
+              ? vue.renderSlot(_ctx.$slots, "onicon", {
+                  key: 0,
+                  value: value
+                }, () => [
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass($options.onIconClass)
+                  }, null, 2)
+                ])
+              : vue.renderSlot(_ctx.$slots, "officon", {
+                  key: 1,
+                  value: value
+                }, () => [
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass($options.offIconClass)
+                  }, null, 2)
+                ])
           ], 10, _hoisted_3))
         }), 128))
       ], 2))
@@ -190,11 +210,11 @@ this.primevue.rating = (function (vue) {
       }
     }
 
-    var css_248z = "\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n.p-rating:not(.p-disabled) .p-rating-icon.p-focus {\n    outline: 0 none;\n    outline-offset: 0;\n    -webkit-box-shadow: 0 0 0 0.2rem #BFDBFE;\n            box-shadow: 0 0 0 0.2rem #BFDBFE;\n    border-color: #3B82F6;\n}\n";
+    var css_248z = "\n.p-rating {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-rating-item {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n}\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(Vue);
+})(primevue.utils, Vue);

package/rating/rating.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.rating=function(e){"use strict";var n={name:"Rating",emits:["update:modelValue","change","focus","blur"],props:{modelValue:{type:Number,default:null},name:{type:String,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0}},data:()=>({focusIndex:null}),methods:{onStarClick(e,n){this.readonly||this.disabled||(this.updateModel(e,n),this.focusIndex=n)},onKeyDown(e,n){"Space"===e.code&&this.updateModel(e,n),"Tab"===e.code&&(this.focusIndex=null)},onFocus(e,n){this.readonly||(null===this.modelValue&&null===this.focusIndex?this.cancel?this.focusIndex=0:this.focusIndex=1:null!==this.modelValue&&null===this.focusIndex?(this.focusIndex=this.modelValue,this.updateModel(e,this.modelValue)):(this.focusIndex=n,this.updateModel(e,n)),this.$emit("focus",e))},onBlur(e){this.$emit("blur",e)},onCancelClick(e){this.readonly||this.disabled||this.updateModel(e,null)},updateModel(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},ariaLabelTemplate(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},computed:{containerClass(){return["p-rating",{"p-readonly":this.readonly,"p-disabled":this.disabled}]}}};const l={key:0,class:"p-hidden-accessible"},a=["name","checked","disabled","readonly","aria-label"],o=["onClick"],t={class:"p-hidden-accessible"},i=["value","name","checked","disabled","readonly","aria-label","onFocus","onKeydown"];return function(e,n){void 0===n&&(n={});var l=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===l&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-rating-icon {\n    cursor: pointer;\n}\n.p-rating.p-rating-readonly .p-rating-icon {\n    cursor: default;\n}\n.p-rating:not(.p-disabled) .p-rating-icon.p-focus {\n    outline: 0 none;\n    outline-offset: 0;\n    -webkit-box-shadow: 0 0 0 0.2rem #BFDBFE;\n            box-shadow: 0 0 0 0.2rem #BFDBFE;\n    border-color: #3B82F6;\n}\n"),n.render=function(n,s,d,c,r,u){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(u.containerClass)},[d.cancel?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["p-rating-icon p-rating-cancel pi pi-ban",{"p-focus":0===r.focusIndex}]),onClick:s[3]||(s[3]=(...e)=>u.onCancelClick&&u.onCancelClick(...e)),onKeydown:s[4]||(s[4]=(...e)=>u.onKeyDown&&u.onKeyDown(...e))},[d.cancel?(e.openBlock(),e.createElementBlock("span",l,[e.createElementVNode("input",{type:"radio",value:"0",name:d.name,checked:0===d.modelValue,disabled:d.disabled,readonly:d.readonly,"aria-label":n.$primevue.config.locale.clear,onFocus:s[0]||(s[0]=e=>u.onFocus(e,0)),onBlur:s[1]||(s[1]=(...e)=>u.onBlur&&u.onBlur(...e)),onKeydown:s[2]||(s[2]=e=>u.onKeyDown(e,0))},null,40,a)])):e.createCommentVNode("",!0)],34)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.stars,(n=>(e.openBlock(),e.createElementBlock("span",{key:n,class:e.normalizeClass(["p-rating-icon",{"pi pi-star":n>d.modelValue,"pi pi-star-fill":n<=d.modelValue,"p-focus":n===r.focusIndex}]),onClick:e=>u.onStarClick(e,n)},[e.createElementVNode("span",t,[e.createElementVNode("input",{type:"radio",value:n,name:d.name,checked:d.modelValue===n,disabled:d.disabled,readonly:d.readonly,"aria-label":u.ariaLabelTemplate(n),onFocus:e=>u.onFocus(e,n),onBlur:s[5]||(s[5]=(...e)=>u.onBlur&&u.onBlur(...e)),onKeydown:e=>u.onKeyDown(e,n)},null,40,i)])],10,o)))),128))],2)},n}(Vue);
+this.primevue=this.primevue||{},this.primevue.rating=function(e,n){"use strict";var a={name:"Rating",emits:["update:modelValue","change","focus","blur"],props:{modelValue:{type:Number,default:null},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},stars:{type:Number,default:5},cancel:{type:Boolean,default:!0},onIcon:{type:String,default:"pi pi-star-fill"},offIcon:{type:String,default:"pi pi-star"},cancelIcon:{type:String,default:"pi pi-ban"}},data:()=>({focusedOptionIndex:-1}),methods:{onOptionClick(n,a){if(!this.readonly&&!this.disabled){this.onOptionSelect(n,a);const l=e.DomHandler.getFirstFocusableElement(n.currentTarget);l&&e.DomHandler.focus(l)}},onFocus(e,n){this.focusedOptionIndex=n,this.$emit("focus",e)},onBlur(e){this.focusedOptionIndex=-1,this.$emit("blur",e)},onChange(e,n){this.onOptionSelect(e,n)},onOptionSelect(e,n){this.focusedOptionIndex=n,this.updateModel(e,n||null)},updateModel(e,n){this.$emit("update:modelValue",n),this.$emit("change",{originalEvent:e,value:n})},cancelAriaLabel(){return this.$primevue.config.locale.clear},starAriaLabel(e){return 1===e?this.$primevue.config.locale.aria.star:this.$primevue.config.locale.aria.stars.replace(/{star}/g,e)}},computed:{containerClass(){return["p-rating",{"p-readonly":this.readonly,"p-disabled":this.disabled}]},cancelIconClass(){return["p-rating-icon p-rating-cancel",this.cancelIcon]},onIconClass(){return["p-rating-icon",this.onIcon]},offIconClass(){return["p-rating-icon",this.offIcon]},name(){return this.$attrs.name||e.UniqueComponentId()}}};const l={class:"p-hidden-accessible"},t=["name","checked","disabled","readonly","aria-label"],o=["onClick"],i={class:"p-hidden-accessible"},s=["value","name","checked","disabled","readonly","aria-label","onFocus","onChange"];return function(e,n){void 0===n&&(n={});var a=n.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css","top"===a&&l.firstChild?l.insertBefore(t,l.firstChild):l.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}("\n.p-rating {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-rating-item {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n}\n.p-rating.p-readonly .p-rating-item {\n    cursor: default;\n}\n"),a.render=function(e,a,r,c,d,u){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(u.containerClass)},[r.cancel?(n.openBlock(),n.createElementBlock("div",{key:0,class:n.normalizeClass(["p-rating-item p-rating-cancel-item",{"p-focus":0===d.focusedOptionIndex}]),onClick:a[3]||(a[3]=e=>u.onOptionClick(e,0))},[n.createElementVNode("span",l,[n.createElementVNode("input",{type:"radio",value:"0",name:u.name,checked:0===r.modelValue,disabled:r.disabled,readonly:r.readonly,"aria-label":u.cancelAriaLabel(),onFocus:a[0]||(a[0]=e=>u.onFocus(e,0)),onBlur:a[1]||(a[1]=(...e)=>u.onBlur&&u.onBlur(...e)),onChange:a[2]||(a[2]=e=>u.onChange(e,0))},null,40,t)]),n.renderSlot(e.$slots,"cancelicon",{},(()=>[n.createElementVNode("span",{class:n.normalizeClass(u.cancelIconClass)},null,2)]))],2)):n.createCommentVNode("",!0),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(r.stars,(l=>(n.openBlock(),n.createElementBlock("div",{key:l,class:n.normalizeClass(["p-rating-item",{"p-rating-item-active":l<=r.modelValue,"p-focus":l===d.focusedOptionIndex}]),onClick:e=>u.onOptionClick(e,l)},[n.createElementVNode("span",i,[n.createElementVNode("input",{type:"radio",value:l,name:u.name,checked:r.modelValue===l,disabled:r.disabled,readonly:r.readonly,"aria-label":u.starAriaLabel(l),onFocus:e=>u.onFocus(e,l),onBlur:a[4]||(a[4]=(...e)=>u.onBlur&&u.onBlur(...e)),onChange:e=>u.onChange(e,l)},null,40,s)]),l<=r.modelValue?n.renderSlot(e.$slots,"onicon",{key:0,value:l},(()=>[n.createElementVNode("span",{class:n.normalizeClass(u.onIconClass)},null,2)])):n.renderSlot(e.$slots,"officon",{key:1,value:l},(()=>[n.createElementVNode("span",{class:n.normalizeClass(u.offIconClass)},null,2)]))],10,o)))),128))],2)},a}(primevue.utils,Vue);

package/resources/themes/arya-blue/theme.css

@@ -1476,31 +1476,30 @@
   background: #2396f2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #64B5F6;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #93cbf9;
   border-color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #64B5F6;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #64B5F6;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3956,6 +3955,12 @@
 .p-scrollpanel .p-scrollpanel-bar {
   background: #383838;
   border: 0 none;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-scrollpanel .p-scrollpanel-bar:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
 }
 
 .p-splitter {
@@ -3970,6 +3975,12 @@
 }
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
 }
 .p-splitter .p-splitter-gutter-resizing {
   background: #383838;

package/resources/themes/arya-green/theme.css

@@ -1476,31 +1476,30 @@
   background: #54b358;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #81C784;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #a7d8a9;
   border-color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #81C784;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #81C784;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3956,6 +3955,12 @@
 .p-scrollpanel .p-scrollpanel-bar {
   background: #383838;
   border: 0 none;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-scrollpanel .p-scrollpanel-bar:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
 }
 
 .p-splitter {
@@ -3970,6 +3975,12 @@
 }
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
 }
 .p-splitter .p-splitter-gutter-resizing {
   background: #383838;

package/resources/themes/arya-orange/theme.css

@@ -1476,31 +1476,30 @@
   background: #ffc50c;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #FFD54F;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #ffe284;
   border-color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #FFD54F;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #FFD54F;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3956,6 +3955,12 @@
 .p-scrollpanel .p-scrollpanel-bar {
   background: #383838;
   border: 0 none;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-scrollpanel .p-scrollpanel-bar:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
 }
 
 .p-splitter {
@@ -3970,6 +3975,12 @@
 }
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
 }
 .p-splitter .p-splitter-gutter-resizing {
   background: #383838;

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

@@ -1476,31 +1476,30 @@
   background: #a241b2;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
-.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 {
+.p-rating .p-rating-item.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 {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #BA68C8;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #BA68C8;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #F48FB1;
 }
 
@@ -3956,6 +3955,12 @@
 .p-scrollpanel .p-scrollpanel-bar {
   background: #383838;
   border: 0 none;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-scrollpanel .p-scrollpanel-bar:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
 }
 
 .p-splitter {
@@ -3970,6 +3975,12 @@
 }
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #383838;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
 }
 .p-splitter .p-splitter-gutter-resizing {
   background: #383838;

package/resources/themes/bootstrap4-dark-blue/theme.css

@@ -1484,35 +1484,34 @@
   border-color: #151515;
 }
 
-.p-rating .p-rating-icon {
+.p-rating {
+  gap: 0.5rem;
+}
+.p-rating .p-rating-item .p-rating-icon {
   color: rgba(255, 255, 255, 0.87);
-  margin-left: 0.5rem;
   transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
   font-size: 1.143rem;
 }
-.p-rating .p-rating-icon.p-rating-cancel {
+.p-rating .p-rating-item .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
-.p-rating .p-rating-icon:first-child {
-  margin-left: 0;
-}
-.p-rating .p-rating-icon.pi-star-fill {
-  color: #8dd0ff;
-}
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-focus {
+.p-rating .p-rating-item.p-focus {
   outline: 0 none;
   outline-offset: 0;
   box-shadow: 0 0 0 1px #e3f3fe;
   border-color: #8dd0ff;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon:hover {
+.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
+  color: #8dd0ff;
+}
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon {
   color: #8dd0ff;
 }
-.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-icon.p-rating-cancel:hover {
+.p-rating:not(.p-disabled):not(.p-readonly) .p-rating-item:hover .p-rating-icon.p-rating-cancel {
   color: #f19ea6;
 }
 
-.p-highlight .p-rating .p-rating-icon {
+.p-highlight .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
   color: #151515;
 }
 
@@ -3968,6 +3967,12 @@
 .p-scrollpanel .p-scrollpanel-bar {
   background: #3f4b5b;
   border: 0 none;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.p-scrollpanel .p-scrollpanel-bar:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 
 .p-splitter {
@@ -3982,6 +3987,12 @@
 }
 .p-splitter .p-splitter-gutter .p-splitter-gutter-handle {
   background: #3f4b5b;
+  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
 }
 .p-splitter .p-splitter-gutter-resizing {
   background: #3f4b5b;