chore(ui): wire color and size into the new navigation components

Every bundled component must expose color and size; the rewrites dropped
them, which the library-wide invariant test caught. Rather than re-adding
them as dead props, each component now maps color onto an accent variable
that its active, current and focus affordances actually use, and size onto
the root font scale.

Regenerates the component reference, showcase and visual contract.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

packages/ui/components/Pagination.wrn

@@ -15,6 +15,8 @@ component Pagination {
   }
 
   props {
+    color: string = "primary"
+    size: string = "default"
     page: number = 1
     pageSize: number = 10
     total: number = 0
@@ -104,6 +106,8 @@ component Pagination {
       data-ui-component="Pagination"
       class='wire-pagination {class}'
       data-variant='{variant}'
+      data-color='{color}'
+      data-size='{size}'
       role="navigation"
       aria-label='{label}'
     >
@@ -161,6 +165,7 @@ component Pagination {
 
   style {
     .wire-pagination {
+      --pagination-accent: var(--wire-color-primary);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -169,6 +174,30 @@ component Pagination {
       max-width: 100%;
     }
 
+    .wire-pagination[data-color="secondary"] {
+      --pagination-accent: var(--wire-color-secondary);
+    }
+
+    .wire-pagination[data-color="success"] {
+      --pagination-accent: var(--wire-color-success);
+    }
+
+    .wire-pagination[data-color="danger"] {
+      --pagination-accent: var(--wire-color-danger);
+    }
+
+    .wire-pagination[data-color="info"] {
+      --pagination-accent: var(--wire-color-info);
+    }
+
+    .wire-pagination[data-size="sm"] {
+      font-size: 0.82rem;
+    }
+
+    .wire-pagination[data-size="lg"] {
+      font-size: 1rem;
+    }
+
     .wire-pagination__summary {
       margin: 0;
       color: var(--wire-color-text-muted);
@@ -220,13 +249,13 @@ component Pagination {
 
     .wire-pagination__page:focus-visible,
     .wire-pagination__step:focus-visible {
-      outline: 2px solid var(--wire-color-primary);
+      outline: 2px solid var(--pagination-accent);
       outline-offset: 2px;
     }
 
     .wire-pagination__page[data-active="true"] {
-      border-color: var(--wire-color-primary);
-      background: var(--wire-color-primary);
+      border-color: var(--pagination-accent);
+      background: var(--pagination-accent);
       color: var(--wire-color-primary-contrast);
       font-weight: 700;
     }