[fix] Decorator & CSS Class of Nav & Pagination components

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-rc.2",
+    "version": "2.0.0-rc.4",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",

source/Navigator/Nav.tsx

@@ -7,6 +7,7 @@ import {
     WebCellProps,
     attribute,
     component,
+    observer,
     reaction
 } from 'web-cell';
 import { CustomElement } from 'web-utility';
@@ -63,6 +64,7 @@ export interface Nav extends WebCell<NavProps> {}
     tagName: 'bs-nav',
     mode: 'open'
 })
+@observer
 export class Nav extends HTMLElement implements CustomElement {
     @attribute
     @observable
@@ -77,7 +79,7 @@ export class Nav extends HTMLElement implements CustomElement {
     accessor justify = false;
 
     @reaction(({ variant, fill, justify }) => ({ variant, fill, justify }))
-    protected updateClass({ variant, fill, justify }: this) {
+    protected updateClass({ variant, fill, justify } = this) {
         this.className = classNames('nav', this.className, {
             [`nav-${variant}`]: variant,
             'nav-fill': fill,
@@ -86,6 +88,7 @@ export class Nav extends HTMLElement implements CustomElement {
     }
 
     connectedCallback() {
+        this.updateClass();
         this.role = 'tablist';
 
         const navBar = this.closest<OffcanvasNavbar>(

source/Navigator/Pagination.tsx

@@ -75,7 +75,7 @@ export const Pager: FC<PagerProps> = ({
 
     return (
         <form
-            className="m-0 d-flex align-items-center gap-3"
+            className="m-0 d-flex align-items-center gap-2"
             onSubmit={onChange && (event => event.preventDefault())}
         >
             <FormControl