Pagination: disabled prev and next buttons should not trigger click (#10628)

packages/pagination/src/pagination.js

@@ -113,7 +113,8 @@ export default {
         return (
           <button
             type="button"
-            class={['btn-prev', { disabled: this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }]}
+            class="btn-prev"
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage <= 1 }
             on-click={ this.$parent.prev }>
             {
               this.$parent.prevText
@@ -130,10 +131,8 @@ export default {
         return (
           <button
             type="button"
-            class={[
-              'btn-next',
-              { disabled: this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
-            ]}
+            class="btn-next"
+            disabled={ this.$parent.disabled || this.$parent.internalCurrentPage === this.$parent.internalPageCount || this.$parent.internalPageCount === 0 }
             on-click={ this.$parent.next }>
             {
               this.$parent.nextText

packages/theme-chalk/src/pagination.scss

@@ -57,7 +57,7 @@
       color: $--pagination-hover-fill;
     }
 
-    &.disabled {
+    &:disabled {
       color: $--pagination-button-disabled-color;
       background-color: $--pagination-button-disabled-fill;
       cursor: not-allowed;
@@ -188,7 +188,7 @@
     .btn-prev, .btn-next {
       padding: 0;
 
-      &.disabled {
+      &:disabled {
         color: $--color-text-placeholder;
       }
     }