From 89841fc2f063557acd6e892a9fecf57212e3c963 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Fri, 25 Oct 2024 12:03:13 -0500
Subject: [PATCH 01/25] feat(djangocms-blog): pagination

---
 src/lib/_imports/djangocms-blog/README.md     |  6 +++++
 .../djangocms-blog/cms-pagination.postcss     | 26 +++++++++++++++++++
 .../cms-pagination/cms-pagination.hbs         |  5 ++++
 .../djangocms-blog/cms-pagination/config.yml  | 13 ++++++++++
 .../djangocms-blog/cms-pagination/readme.md   |  3 +++
 src/lib/_imports/djangocms-blog/config.yml    |  3 +++
 6 files changed, 56 insertions(+)
 create mode 100644 src/lib/_imports/djangocms-blog/README.md
 create mode 100644 src/lib/_imports/djangocms-blog/cms-pagination.postcss
 create mode 100644 src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs
 create mode 100644 src/lib/_imports/djangocms-blog/cms-pagination/config.yml
 create mode 100644 src/lib/_imports/djangocms-blog/cms-pagination/readme.md
 create mode 100644 src/lib/_imports/djangocms-blog/config.yml

diff --git a/src/lib/_imports/djangocms-blog/README.md b/src/lib/_imports/djangocms-blog/README.md
new file mode 100644
index 000000000..9711321d1
--- /dev/null
+++ b/src/lib/_imports/djangocms-blog/README.md
@@ -0,0 +1,6 @@
+# Django CMS Blog
+
+Known Clients
+- [TACC/Core-CMS]
+
+[tacc/core-cms]: https://github.com/TACC/Core-CMS
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination.postcss b/src/lib/_imports/djangocms-blog/cms-pagination.postcss
new file mode 100644
index 000000000..a9a797d8e
--- /dev/null
+++ b/src/lib/_imports/djangocms-blog/cms-pagination.postcss
@@ -0,0 +1,26 @@
+/*
+Pagination (Bootstrap)
+
+Style Bootstrap pagination. See:
+
+- [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/)
+
+Styleguide Components.Bootstrap.Pagination
+*/
+@import url("../components/c-page.postcss");
+
+
+.pagination {
+  @extend .c-page-list;
+
+  margin-block: var(--global-space--x-large);
+
+  width: fit-content;
+  margin-inline: auto;
+}
+.pagination a,
+.pagination span {
+  @extend .c-page-end;
+
+  padding-block: 0;
+}
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs b/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs
new file mode 100644
index 000000000..499754eb3
--- /dev/null
+++ b/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs
@@ -0,0 +1,5 @@
+<nav class="pagination">
+  <a href="?page=1">&lt; Previous</a>
+  <span class="current"> Page 2 of 36 </span>
+  <a href="?page=3">Next &gt;</a>
+</nav>
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination/config.yml b/src/lib/_imports/djangocms-blog/cms-pagination/config.yml
new file mode 100644
index 000000000..657741296
--- /dev/null
+++ b/src/lib/_imports/djangocms-blog/cms-pagination/config.yml
@@ -0,0 +1,13 @@
+label: Pagination
+variants:
+  - name: default
+    label: Unstyled
+    status: reference
+    context:
+      shouldSkipBase: true
+  - name: tacc-cms
+    label: TACC (CMS)
+    status: ready
+    context:
+      shouldSkipPattern: false
+      shouldLoadCMS: true
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination/readme.md b/src/lib/_imports/djangocms-blog/cms-pagination/readme.md
new file mode 100644
index 000000000..9ec40ae2a
--- /dev/null
+++ b/src/lib/_imports/djangocms-blog/cms-pagination/readme.md
@@ -0,0 +1,3 @@
+To style [Django CMS Blog](https://github.com/nephila/djangocms-blog/blob/1.1.1/djangocms_blog/templates/djangocms_blog/post_list.html) pagination.
+
+<script src="{{path '/assets/scripts/open-ext-links-in-new-window.js'}}" />
diff --git a/src/lib/_imports/djangocms-blog/config.yml b/src/lib/_imports/djangocms-blog/config.yml
new file mode 100644
index 000000000..3513defbd
--- /dev/null
+++ b/src/lib/_imports/djangocms-blog/config.yml
@@ -0,0 +1,3 @@
+label: Django CMS Blog
+context:
+  subdir: "djangocms-blog"

From b87be86ed1039658a7f07afb3ef9e67edbb7c8f2 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 13:28:53 -0600
Subject: [PATCH 02/25] feat(pagination): WIP See `TODO` and `XXX`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 🚧 bootstrap4 .pagination
    - ✅ default
    - 🐞 tacc (CMS/Portal)
        - UI bugs
        - consider combining
- ✅ djangocms-blog .pagination
- ❌ TACC .c-page
    - deleted out of ignorance
    - must be restored
    - reference provided
---
 .../_imports/bootstrap4/pagination.postcss    |  34 +++++
 .../_imports/bootstrap4/pagination/config.yml |  18 +++
 .../bootstrap4/pagination/pagination.hbs      |  25 ++++
 .../_imports/bootstrap4/pagination/readme.md  |   3 +
 .../pagination/reference/_pagination.scss     |  74 +++++++++++
 .../_imports/components/bootstrap/config.yml  |  30 -----
 .../_imports/components/bootstrap/demo.css    |   7 -
 src/lib/_imports/components/c-page.postcss    |  97 +-------------
 .../djangocms-blog/cms-pagination.postcss     |  22 ++--
 src/lib/_imports/tools/x-pagination.postcss   | 123 ++++++++++++++++++
 10 files changed, 289 insertions(+), 144 deletions(-)
 create mode 100644 src/lib/_imports/bootstrap4/pagination.postcss
 create mode 100644 src/lib/_imports/bootstrap4/pagination/config.yml
 create mode 100644 src/lib/_imports/bootstrap4/pagination/pagination.hbs
 create mode 100644 src/lib/_imports/bootstrap4/pagination/readme.md
 create mode 100644 src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss
 delete mode 100644 src/lib/_imports/components/bootstrap/config.yml
 delete mode 100644 src/lib/_imports/components/bootstrap/demo.css
 create mode 100644 src/lib/_imports/tools/x-pagination.postcss

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
new file mode 100644
index 000000000..dc6f8ef2a
--- /dev/null
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -0,0 +1,34 @@
+@import url("../tools/x-pagination.postcss");
+
+.pagination {
+  @mixin pagination;
+}
+
+.page-item:not( :first-child, :last-child ) {
+  @mixin pagination__item;
+}
+.page-item:is( :first-child, :last-child ) {
+  @mixin pagination__item--end;
+}
+
+.page-item.skip {
+  @mixin pagination__item--etc;
+}
+
+.page-link {
+  @mixin pagination__link;
+
+  .page-item:is( :first-child, :last-child ) & {
+    @mixin pagination__link--end;
+  }
+  .page-item.skip & {
+    @mixin pagination__link--etc;
+  }
+
+  .page-item.active & {
+    @mixin pagination__link--active;
+  }
+  .page-item.disabled & {
+    @mixin pagination__link--disabled;
+  }
+}
diff --git a/src/lib/_imports/bootstrap4/pagination/config.yml b/src/lib/_imports/bootstrap4/pagination/config.yml
new file mode 100644
index 000000000..5f4018fe0
--- /dev/null
+++ b/src/lib/_imports/bootstrap4/pagination/config.yml
@@ -0,0 +1,18 @@
+variants:
+  - name: default
+    label: Bootstrap
+    status: reference
+    context:
+      shouldSkipBase: true
+  - name: tacc-portal
+    label: TACC (Portal)
+    status: prototype
+    context:
+      shouldSkipPattern: false
+      shouldLoadPortal: true
+  - name: tacc-cms
+    label: TACC (CMS)
+    status: prototype
+    context:
+      shouldSkipPattern: false
+      shouldLoadCMS: true
diff --git a/src/lib/_imports/bootstrap4/pagination/pagination.hbs b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
new file mode 100644
index 000000000..31276b85d
--- /dev/null
+++ b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
@@ -0,0 +1,25 @@
+<nav aria-label="Page navigation example">
+    <ul class="pagination">
+        <li class="page-item">
+            <a class="page-link" href="#">&lt; Previous</a>
+        </li>
+        <li class="page-item active">
+            <a class="page-link" href="#">1</a>
+        </li>
+        <li class="page-item disabled">
+            <a class="page-link" href="#">2</a>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">3</a>
+        </li>
+        <li class="page-item skip">
+            <span class="page-link">...</span>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">14</a>
+        </li>
+        <li class="page-item">
+            <a class="page-link" href="#">Next &gt;</a>
+        </li>
+    </ul>
+</nav>
diff --git a/src/lib/_imports/bootstrap4/pagination/readme.md b/src/lib/_imports/bootstrap4/pagination/readme.md
new file mode 100644
index 000000000..37c9d58cc
--- /dev/null
+++ b/src/lib/_imports/bootstrap4/pagination/readme.md
@@ -0,0 +1,3 @@
+To override and extend [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/).
+
+<script src="{{path '/assets/scripts/open-ext-links-in-new-window.js'}}" />
diff --git a/src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss b/src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss
new file mode 100644
index 000000000..9313cc547
--- /dev/null
+++ b/src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss
@@ -0,0 +1,74 @@
+.pagination {
+  display: flex;
+  @include list-unstyled();
+  @include border-radius();
+}
+
+.page-link {
+  position: relative;
+  display: block;
+  padding: $pagination-padding-y $pagination-padding-x;
+  margin-left: -$pagination-border-width;
+  line-height: $pagination-line-height;
+  color: $pagination-color;
+  text-decoration: if($link-decoration == none, null, none);
+  background-color: $pagination-bg;
+  border: $pagination-border-width solid $pagination-border-color;
+
+  &:hover {
+    z-index: 2;
+    color: $pagination-hover-color;
+    text-decoration: none;
+    background-color: $pagination-hover-bg;
+    border-color: $pagination-hover-border-color;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: $pagination-focus-outline;
+    box-shadow: $pagination-focus-box-shadow;
+  }
+}
+
+.page-item {
+  &:first-child {
+    .page-link {
+      margin-left: 0;
+      @include border-left-radius($border-radius);
+    }
+  }
+  &:last-child {
+    .page-link {
+      @include border-right-radius($border-radius);
+    }
+  }
+
+  &.active .page-link {
+    z-index: 3;
+    color: $pagination-active-color;
+    background-color: $pagination-active-bg;
+    border-color: $pagination-active-border-color;
+  }
+
+  &.disabled .page-link {
+    color: $pagination-disabled-color;
+    pointer-events: none;
+    // Opinionated: remove the "hand" cursor set previously for .page-link
+    cursor: auto;
+    background-color: $pagination-disabled-bg;
+    border-color: $pagination-disabled-border-color;
+  }
+}
+
+
+//
+// Sizing
+//
+
+.pagination-lg {
+  @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
+}
+
+.pagination-sm {
+  @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
+}
diff --git a/src/lib/_imports/components/bootstrap/config.yml b/src/lib/_imports/components/bootstrap/config.yml
deleted file mode 100644
index 8dbd27ce1..000000000
--- a/src/lib/_imports/components/bootstrap/config.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-label: Bootstrap 4
-context:
-  shouldLoadBootstrap: true
-variants:
-  - name: default
-    label: README
-  - name: container
-    status: ready
-  - name: col
-    status: ready
-    context:
-      supportStyles:
-        - ../../assets/components/c-card.css
-        - ../../assets/components/bootstrap.col.css
-  - name: row
-    status: ready
-    context:
-      supportStyles:
-        - ../../assets/components/c-card.css
-        - ../../assets/components/bootstrap.row.css
-  - name: modal
-    status: prototype
-  - name: nav-tabs
-    status: prototype
-  - name: form
-    label: (Portal) Form
-    status: prototype
-    context:
-      supportStyles:
-        - ../../assets/components/bootstrap.form.css
diff --git a/src/lib/_imports/components/bootstrap/demo.css b/src/lib/_imports/components/bootstrap/demo.css
deleted file mode 100644
index a31895365..000000000
--- a/src/lib/_imports/components/bootstrap/demo.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* This CSS is ONLY for the pattern library. It is NOT part of the pattern. */
-
-/* All Bootstrap pattern library CSS loads for every component */
-/* FAQ: To support legacy client imports, Bootstrap file organization is odd */
-
-@import url("./bootstrap--form.demo.css");
-@import url("./bootstrap--modal.demo.css");
diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index 34cf7ad9e..f495bbb16 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -1,96 +1,7 @@
-/*
-Pagination
+@import url("../tools/x-pagination.postcss");
 
-A navigation list of sequential page toggles with end cap links.
+/* TODO: Support /c-page.html classes */
+/* FAQ: Core-Components Paginator module expects them */
+/* SEE: https://github.com/TACC/Core-Components/blob/v0.0.4/src/lib/Paginator/Paginator.module.css */
 
-Markup: c-page.html
 
-Styleguide Components.Pagination
-*/
-@import url("../components/c-button.selectors.postcss");
-
-
-
-/* Pagination: Variables */
-
-.c-page-list {
-  --item-width: 2em;
-  --item-buffer: 3px;
-  --item-border: var(--global-border-width--normal); /* WARNING: assumption */
-}
-
-
-
-/* Pagination: List */
-
-.c-page-list {
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  list-style: none;
-
-  font-size: 14px; /* TEMPORARY: Should be 14px and have commented rem value */
-}
-ul.c-page-list {
-  list-style: none;
-}
-
-/* Pagination: List: Constant Hover */
-
-.c-page-link--always-click {
-  position: relative;
-  box-sizing: content-box;
-}
-.c-page-link--always-click::before,
-.c-page-link--always-click::after {
-  --width: var(--item-buffer);
-  --vert-offset: calc( -1 * var(--item-border) );
-  --horz-offset: calc( 100% + var(--item-border) );
-
-  content: '';
-  width: var(--width);
-  position: absolute;
-  top: var(--vert-offset);
-  bottom: var(--vert-offset);
-}
-.c-page-link--always-click:--c-button {
-  overflow: visible; /* overwrite `.c-button` so pseudo elements show */
-}
-.c-page-link--always-click::before { right: var(--horz-offset) }
-.c-page-link--always-click::after { left: var(--horz-offset) }
-
-
-
-
-
-/* Pagination: Item */
-
-.c-page-item              { margin-inline: var(--item-buffer) }
-.c-page-item:first-child  { margin-left: 0 }
-.c-page-item:last-child   { margin-right: 0 }
-
-/* Pagination: Item: Truncated */
-
-.c-page-item--etcetera {
-  min-width: var(--item-width);
-  margin-inline: 2px;
-  text-align: center;
-
-  cursor: default;
-}
-
-
-
-/* Pagination: End */
-
-.c-page-end { padding: 4px 12px }
-
-
-
-/* Pagination: Link */
-
-.c-page-link {
-  padding: 5px 0;
-  min-width: var(--item-width);
-  line-height: 1.2;
-}
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination.postcss b/src/lib/_imports/djangocms-blog/cms-pagination.postcss
index a9a797d8e..caa2c4dd7 100644
--- a/src/lib/_imports/djangocms-blog/cms-pagination.postcss
+++ b/src/lib/_imports/djangocms-blog/cms-pagination.postcss
@@ -1,26 +1,20 @@
-/*
-Pagination (Bootstrap)
-
-Style Bootstrap pagination. See:
-
-- [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/)
-
-Styleguide Components.Bootstrap.Pagination
-*/
-@import url("../components/c-page.postcss");
-
+@import url("../tools/x-pagination.postcss");
 
 .pagination {
-  @extend .c-page-list;
+  @mixin pagination;
 
   margin-block: var(--global-space--x-large);
 
   width: fit-content;
   margin-inline: auto;
 }
-.pagination a,
+.pagination a {
+  @mixin pagination__item--end;
+
+  padding-block: 0;
+}
 .pagination span {
-  @extend .c-page-end;
+  @mixin pagination__item;
 
   padding-block: 0;
 }
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
new file mode 100644
index 000000000..c770ad8df
--- /dev/null
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -0,0 +1,123 @@
+@import url("../components/c-button.selectors.postcss");
+
+
+
+
+/* XXX:
+  - Style page links correctly (compare to Pagiantor module)
+    (maybe v3 color tokens are the culprit)
+    (maybe I just used the wrong `--global…` vars)
+  - Fix missing hover state on active link
+  - Fix hover state on pagination end hiding text
+  - Test hover and active states on all link types
+*/
+
+
+
+
+
+
+
+
+
+
+
+/* BASE */
+
+@define-mixin pagination {
+  display: flex;
+  flex-direction: row;
+  place-content: center;
+  place-items: center;
+
+  padding-top: 20px;
+  margin-bottom: unset; /* overwrites core-styles.base.css */
+
+  font-size: var(--global-font-size--small);
+
+  &:is(ol, ul) {
+    list-style: none;
+  }
+}
+
+
+
+
+/* ELEMENTS */
+
+
+/* Item */
+
+@define-mixin pagination__item {
+  min-width: 2em;
+
+  &:not(
+    :first-child,
+    :last-child
+  ) {
+    margin-inline: 0.25em;
+  }
+}
+@define-mixin pagination__item--end {
+  padding: 4px 12px;
+  min-width: auto;
+  white-space: nowrap;
+}
+
+@define-mixin pagination__item--etc {
+  display: flex;
+  place-content: center;
+
+  cursor: default;
+}
+
+
+/* Link */
+
+@define-mixin pagination__link {
+  display: flex;
+  place-content: center;
+
+  padding: 5px 0;
+  line-height: 1;
+
+  border: var(--global-border--normal);
+  color: var(--global-color-primary--x-dark);
+  background-color: var(--global-color-primary--xx-light);
+
+  &:hover,
+  &:focus {
+    color: var(--global-color-primary--xx-light);
+    background-color: var(--global-color-primary--normal);
+    border-color: var(--global-color-primary--normal);
+    text-decoration: none;
+  }
+}
+@define-mixin pagination__link--end {
+  border: none;
+  background-color: transparent;
+}
+
+@define-mixin pagination__link--etc {
+  border: none;
+  background-color: transparent;
+
+  &:is(a) {
+    pointer-events: none;
+  }
+}
+
+@define-mixin pagination__link--active {
+  background-color: var(--global-color-accent--x-light);
+  border-color: var(--global-color-primary--xx-dark);
+  color: var(--global-color-primary--xx-dark);
+}
+@define-mixin pagination__link--disabled {
+  color: var(--global-color-primary--light);
+  background-color: var(--global-color-primary--xx-light);
+  border-color: var(--global-color-primary--light);
+
+  &:is(a) {
+    pointer-events: none;
+  }
+}

From 7ba42f61d049782afa88db7c799d415a77c730bc Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 19:41:16 -0600
Subject: [PATCH 03/25] =?UTF-8?q?fix(pagination):=20skin=20(color,=20borde?=
 =?UTF-8?q?r,=20outline,=20=E2=80=A6)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 💡 bootstrap4 .pagination
    - ✅ default
    - ✅ tacc (CMS/Portal)
        - 💡 consider combining
- ✅ djangocms-blog .pagination
- ❌ TACC .c-page
    - deleted out of ignorance
    - must be restored
    - reference provided
---
 .../_imports/bootstrap4/pagination.postcss    |  4 ++
 src/lib/_imports/tools/x-pagination.postcss   | 65 ++++++++++++-------
 2 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index dc6f8ef2a..4ea0d57d3 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -18,6 +18,10 @@
 .page-link {
   @mixin pagination__link;
 
+  &:focus {
+    box-shadow: none;
+  }
+
   .page-item:is( :first-child, :last-child ) & {
     @mixin pagination__link--end;
   }
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index c770ad8df..dc474ae8e 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -3,21 +3,7 @@
 
 
 
-/* XXX:
-  - Style page links correctly (compare to Pagiantor module)
-    (maybe v3 color tokens are the culprit)
-    (maybe I just used the wrong `--global…` vars)
-  - Fix missing hover state on active link
-  - Fix hover state on pagination end hiding text
-  - Test hover and active states on all link types
-*/
-
-
-
-
-
-
-
+/* TODO: Use x-button and x-link (instead of copied styles) */
 
 
 
@@ -81,26 +67,54 @@
   padding: 5px 0;
   line-height: 1;
 
-  border: var(--global-border--normal);
-  color: var(--global-color-primary--x-dark);
-  background-color: var(--global-color-primary--xx-light);
+  background-color: var(--global-color-primary--x-light);
+  border-color: var(--global-color-primary--xx-dark);
+  color: var(--global-color-primary--xx-dark);
+
+  &:hover {
+    background-color: var(--global-color-accent--x-light);
+    border-color: var(--global-color-accent--normal);
+    color: var(--global-color-primary--xx-dark);
 
-  &:hover,
+    &:is(a) {
+      text-decoration: none;
+    }
+  }
   &:focus {
-    color: var(--global-color-primary--xx-light);
-    background-color: var(--global-color-primary--normal);
-    border-color: var(--global-color-primary--normal);
-    text-decoration: none;
+    background-color: var(--global-color-accent--x-light);
+    border-color: var(--global-color-primary--xx-dark);
+    color: var(--global-color-primary--xx-dark);
+
+    outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
+  }
+  &:active {
+    background-color: var(--global-color-accent--x-light);
+    border-color: var(--global-color-accent--dark);
+    border-width: var(--global-border-width--normal);
+    color: var(--global-color-primary--xx-dark);
+
+    outline: var(--global-border-width--normal) solid var(--global-color-accent--dark);
   }
 }
 @define-mixin pagination__link--end {
   border: none;
   background-color: transparent;
+  outline: none;
+
+  color: var(--global-color-accent--normal);
+
+  &:hover {
+    text-decoration: underline solid var(--global-border-width--normal);
+  }
+  &:active {
+    text-decoration-style: dotted;
+  }
 }
 
 @define-mixin pagination__link--etc {
   border: none;
   background-color: transparent;
+  outline: none;
 
   &:is(a) {
     pointer-events: none;
@@ -111,6 +125,11 @@
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-primary--xx-dark);
   color: var(--global-color-primary--xx-dark);
+
+  &:hover {
+    background-color: var(--global-color-accent--xx-light);
+    border-color: var(--global-color-accent--dark);
+  }
 }
 @define-mixin pagination__link--disabled {
   color: var(--global-color-primary--light);

From bcb021db6425e53b6630b6b24c8286717319ee2f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:08:37 -0600
Subject: [PATCH 04/25] refactor(pagination): link vs link--end

---
 .../_imports/bootstrap4/pagination.postcss    | 49 ++++++++++++-------
 .../bootstrap4/pagination/pagination.hbs      |  2 +-
 src/lib/_imports/tools/x-pagination.postcss   | 18 ++++---
 3 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 4ea0d57d3..557dd08bb 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -4,35 +4,50 @@
   @mixin pagination;
 }
 
-.page-item:not( :first-child, :last-child ) {
+.page-item:not(
+  :first-child,
+  :last-child
+) {
   @mixin pagination__item;
+
+  & .page-link {
+    @mixin pagination__link;
+  }
 }
-.page-item:is( :first-child, :last-child ) {
+
+.page-item:is(
+  :first-child,
+  :last-child
+) {
   @mixin pagination__item--end;
+
+  & .page-link {
+    @mixin pagination__link--end;
+  }
 }
 
 .page-item.skip {
   @mixin pagination__item--etc;
+
+  & .page-link {
+    @mixin pagination__link--etc;
+  }
 }
 
-.page-link {
-  @mixin pagination__link;
+.page-item.active .page-link {
+  @mixin pagination__link--active;
+}
 
-  &:focus {
-    box-shadow: none;
-  }
+.page-item.disabled {
+  @mixin pagination__item--disabled;
 
-  .page-item:is( :first-child, :last-child ) & {
-    @mixin pagination__link--end;
-  }
-  .page-item.skip & {
-    @mixin pagination__link--etc;
+  & .page-link {
+    @mixin pagination__link--disabled;
   }
+}
 
-  .page-item.active & {
-    @mixin pagination__link--active;
-  }
-  .page-item.disabled & {
-    @mixin pagination__link--disabled;
+.page-link {
+  &:focus {
+    box-shadow: none;
   }
 }
diff --git a/src/lib/_imports/bootstrap4/pagination/pagination.hbs b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
index 31276b85d..3edb5ed64 100644
--- a/src/lib/_imports/bootstrap4/pagination/pagination.hbs
+++ b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
@@ -7,7 +7,7 @@
             <a class="page-link" href="#">1</a>
         </li>
         <li class="page-item disabled">
-            <a class="page-link" href="#">2</a>
+            <a class="page-link">2</a>
         </li>
         <li class="page-item">
             <a class="page-link" href="#">3</a>
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index dc474ae8e..79715d999 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -44,6 +44,7 @@
     margin-inline: 0.25em;
   }
 }
+
 @define-mixin pagination__item--end {
   padding: 4px 12px;
   min-width: auto;
@@ -57,6 +58,10 @@
   cursor: default;
 }
 
+@define-mixin pagination__item--disabled {
+  pointer-events: none;
+}
+
 
 /* Link */
 
@@ -96,6 +101,7 @@
     outline: var(--global-border-width--normal) solid var(--global-color-accent--dark);
   }
 }
+
 @define-mixin pagination__link--end {
   border: none;
   background-color: transparent;
@@ -106,6 +112,9 @@
   &:hover {
     text-decoration: underline solid var(--global-border-width--normal);
   }
+  &:focus {
+    outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
+  }
   &:active {
     text-decoration-style: dotted;
   }
@@ -115,10 +124,6 @@
   border: none;
   background-color: transparent;
   outline: none;
-
-  &:is(a) {
-    pointer-events: none;
-  }
 }
 
 @define-mixin pagination__link--active {
@@ -131,12 +136,9 @@
     border-color: var(--global-color-accent--dark);
   }
 }
+
 @define-mixin pagination__link--disabled {
   color: var(--global-color-primary--light);
   background-color: var(--global-color-primary--xx-light);
   border-color: var(--global-color-primary--light);
-
-  &:is(a) {
-    pointer-events: none;
-  }
 }

From b199a3d72070ff81c106128fc6470b6485bcbaea Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:09:33 -0600
Subject: [PATCH 05/25] docs(pagination): TODO @import x-link x-button

---
 src/lib/_imports/tools/x-pagination.postcss | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 79715d999..5dc0c3d9c 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -1,9 +1,6 @@
 @import url("../components/c-button.selectors.postcss");
-
-
-
-
 /* TODO: Use x-button and x-link (instead of copied styles) */
+/* @import url("../tools/x-link.postcss"); */
 
 
 

From 19d4a58dd92a7c0e2e8f7ab8a766edb0eae35ad7 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:16:43 -0600
Subject: [PATCH 06/25] =?UTF-8?q?refactor(pagination):=20=5F=5Fitem=20&=20?=
 =?UTF-8?q?=5F=5Flink=20=E2=86=92=20vs=20=5F=5F=E2=80=A6-item=20&=20=5F=5F?=
 =?UTF-8?q?=E2=80=A6-link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_imports/bootstrap4/pagination.postcss    | 24 +++++++++++--------
 .../djangocms-blog/cms-pagination.postcss     |  4 ++--
 src/lib/_imports/tools/x-pagination.postcss   | 22 ++++++++++-------
 3 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 557dd08bb..13b00fe6e 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -8,10 +8,10 @@
   :first-child,
   :last-child
 ) {
-  @mixin pagination__item;
+  @mixin pagination__page-item;
 
   & .page-link {
-    @mixin pagination__link;
+    @mixin pagination__page-link;
   }
 }
 
@@ -19,30 +19,34 @@
   :first-child,
   :last-child
 ) {
-  @mixin pagination__item--end;
+  @mixin pagination__end-item;
 
   & .page-link {
-    @mixin pagination__link--end;
+    @mixin pagination__end-link;
   }
 }
 
 .page-item.skip {
-  @mixin pagination__item--etc;
+  @mixin pagination__skipped-item;
 
   & .page-link {
-    @mixin pagination__link--etc;
+    @mixin pagination__skipped-link;
   }
 }
 
-.page-item.active .page-link {
-  @mixin pagination__link--active;
+.page-item.active {
+  @mixin pagination__active-item;
+
+  & .page-link {
+    @mixin pagination__active-link;
+  }
 }
 
 .page-item.disabled {
-  @mixin pagination__item--disabled;
+  @mixin pagination__disabled-item;
 
   & .page-link {
-    @mixin pagination__link--disabled;
+    @mixin pagination__disabled-link;
   }
 }
 
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination.postcss b/src/lib/_imports/djangocms-blog/cms-pagination.postcss
index caa2c4dd7..7c4ed4d84 100644
--- a/src/lib/_imports/djangocms-blog/cms-pagination.postcss
+++ b/src/lib/_imports/djangocms-blog/cms-pagination.postcss
@@ -9,12 +9,12 @@
   margin-inline: auto;
 }
 .pagination a {
-  @mixin pagination__item--end;
+  @mixin pagination__end-item;
 
   padding-block: 0;
 }
 .pagination span {
-  @mixin pagination__item;
+  @mixin pagination__page-item;
 
   padding-block: 0;
 }
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 5dc0c3d9c..5f2cba406 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -31,7 +31,7 @@
 
 /* Item */
 
-@define-mixin pagination__item {
+@define-mixin pagination__page-item {
   min-width: 2em;
 
   &:not(
@@ -42,27 +42,31 @@
   }
 }
 
-@define-mixin pagination__item--end {
+@define-mixin pagination__end-item {
   padding: 4px 12px;
   min-width: auto;
   white-space: nowrap;
 }
 
-@define-mixin pagination__item--etc {
+@define-mixin pagination__skipped-item {
   display: flex;
   place-content: center;
 
   cursor: default;
 }
 
-@define-mixin pagination__item--disabled {
+@define-mixin pagination__active-item {
+  /* no styles needed */
+}
+
+@define-mixin pagination__disabled-item {
   pointer-events: none;
 }
 
 
 /* Link */
 
-@define-mixin pagination__link {
+@define-mixin pagination__page-link {
   display: flex;
   place-content: center;
 
@@ -99,7 +103,7 @@
   }
 }
 
-@define-mixin pagination__link--end {
+@define-mixin pagination__end-link {
   border: none;
   background-color: transparent;
   outline: none;
@@ -117,13 +121,13 @@
   }
 }
 
-@define-mixin pagination__link--etc {
+@define-mixin pagination__skipped-link {
   border: none;
   background-color: transparent;
   outline: none;
 }
 
-@define-mixin pagination__link--active {
+@define-mixin pagination__active-link {
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-primary--xx-dark);
   color: var(--global-color-primary--xx-dark);
@@ -134,7 +138,7 @@
   }
 }
 
-@define-mixin pagination__link--disabled {
+@define-mixin pagination__disabled-link {
   color: var(--global-color-primary--light);
   background-color: var(--global-color-primary--xx-light);
   border-color: var(--global-color-primary--light);

From d4cd2def27d2e2bbe19c58698d9020bf8e9e9c24 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:22:16 -0600
Subject: [PATCH 07/25] fix(pagination): skipped bootstrap link blue

---
 src/lib/_imports/bootstrap4/pagination.postcss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 13b00fe6e..17dea260b 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -6,7 +6,8 @@
 
 .page-item:not(
   :first-child,
-  :last-child
+  :last-child,
+  .skip
 ) {
   @mixin pagination__page-item;
 
@@ -31,6 +32,8 @@
 
   & .page-link {
     @mixin pagination__skipped-link;
+
+    color: inherit;
   }
 }
 

From a3392a9a0ad84e23c81140968e66fe7cef66f060 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:37:43 -0600
Subject: [PATCH 08/25] chore(pagination): re-order style and remove cruft

---
 src/lib/_imports/tools/x-pagination.postcss | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 5f2cba406..c51a36b71 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -31,6 +31,13 @@
 
 /* Item */
 
+@define-mixin pagination__end-item {
+  padding: 4px 12px;
+  line-height: 1;
+
+  white-space: nowrap;
+}
+
 @define-mixin pagination__page-item {
   min-width: 2em;
 
@@ -42,12 +49,6 @@
   }
 }
 
-@define-mixin pagination__end-item {
-  padding: 4px 12px;
-  min-width: auto;
-  white-space: nowrap;
-}
-
 @define-mixin pagination__skipped-item {
   display: flex;
   place-content: center;

From f94f9555249097c78bcacbdde1708bb9862625e5 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 20:43:01 -0600
Subject: [PATCH 09/25] fix(pagination): button (as link) looses width

---
 src/lib/_imports/tools/x-pagination.postcss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index c51a36b71..eb65751aa 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -71,6 +71,10 @@
   display: flex;
   place-content: center;
 
+  &:is(button) {
+    width: 100%;
+  }
+
   padding: 5px 0;
   line-height: 1;
 

From df26eafefbf63cbf6ddb33c1fa538484e8490224 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 21:00:01 -0600
Subject: [PATCH 10/25] refactor(pagination): assume links are <a>

---
 .../_imports/bootstrap4/pagination.postcss    |  5 +++++
 src/lib/_imports/tools/x-pagination.postcss   | 22 +++++--------------
 2 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 17dea260b..60e299316 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -24,6 +24,9 @@
 
   & .page-link {
     @mixin pagination__end-link;
+
+    border: none;
+    background-color: transparent;
   }
 }
 
@@ -34,6 +37,8 @@
     @mixin pagination__skipped-link;
 
     color: inherit;
+    border: none;
+    background-color: transparent;
   }
 }
 
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index eb65751aa..b30256920 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -1,6 +1,6 @@
 @import url("../components/c-button.selectors.postcss");
-/* TODO: Use x-button and x-link (instead of copied styles) */
-/* @import url("../tools/x-link.postcss"); */
+/* TODO: Use x-button (instead of copied styles) */
+/* @import url("../tools/x-button.postcss"); */
 
 
 
@@ -109,27 +109,15 @@
 }
 
 @define-mixin pagination__end-link {
-  border: none;
-  background-color: transparent;
-  outline: none;
-
-  color: var(--global-color-accent--normal);
-
-  &:hover {
-    text-decoration: underline solid var(--global-border-width--normal);
-  }
   &:focus {
     outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
   }
-  &:active {
-    text-decoration-style: dotted;
-  }
 }
 
 @define-mixin pagination__skipped-link {
-  border: none;
-  background-color: transparent;
-  outline: none;
+  /* FAQ: If client applies this with other mixins,
+          then client must resolve conflicting styles
+          (like in Bootstrap4 pagination.css) */
 }
 
 @define-mixin pagination__active-link {

From 5139a2407ebeae7960000192933dc5cb0ba27cfd Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 21:17:26 -0600
Subject: [PATCH 11/25] enhance(pagination): edge cases

---
 .../bootstrap4/pagination/pagination.hbs      | 94 ++++++++++++++-----
 src/lib/_imports/tools/x-pagination.postcss   |  6 +-
 2 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination/pagination.hbs b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
index 3edb5ed64..2fbe99fef 100644
--- a/src/lib/_imports/bootstrap4/pagination/pagination.hbs
+++ b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
@@ -1,25 +1,69 @@
-<nav aria-label="Page navigation example">
-    <ul class="pagination">
-        <li class="page-item">
-            <a class="page-link" href="#">&lt; Previous</a>
-        </li>
-        <li class="page-item active">
-            <a class="page-link" href="#">1</a>
-        </li>
-        <li class="page-item disabled">
-            <a class="page-link">2</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" href="#">3</a>
-        </li>
-        <li class="page-item skip">
-            <span class="page-link">...</span>
-        </li>
-        <li class="page-item">
-            <a class="page-link" href="#">14</a>
-        </li>
-        <li class="page-item">
-            <a class="page-link" href="#">Next &gt;</a>
-        </li>
-    </ul>
-</nav>
+
+<ul class="pagination">
+    <li class="page-item">
+        <a class="page-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item active">
+        <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item skip">
+        <span class="page-link">...</span>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">10</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">Next &gt;</a>
+    </li>
+</ul>
+
+<ul class="pagination">
+    <li class="page-item disabled">
+        <span class="page-link">&lt; Previous</span>
+    </li>
+    <li class="page-item active">
+        <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">4</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">5</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">Next &gt;</a>
+    </li>
+</ul>
+
+<ul class="pagination">
+    <li class="page-item disabled">
+        <span class="page-link">&lt; Previous</span>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item disabled">
+        <span class="page-link">2</span>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">4</a>
+    </li>
+    <li class="page-item">
+        <a class="page-link" href="#">Next &gt;</a>
+    </li>
+</ul>
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index b30256920..5c2d35343 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -13,12 +13,16 @@
   place-content: center;
   place-items: center;
 
-  padding-top: 20px;
   margin-bottom: unset; /* overwrites core-styles.base.css */
 
   font-size: var(--global-font-size--small);
 
+  &:not(:first-child) {
+    padding-top: 20px;
+  }
+
   &:is(ol, ul) {
+    padding-left: unset;
     list-style: none;
   }
 }

From d97bb4fe3926369ae4db1971b5274692a6b3b89a Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Sat, 15 Feb 2025 21:20:00 -0600
Subject: [PATCH 12/25] fix(pagination): cms & portal match but are split

---
 src/lib/_imports/bootstrap4/pagination/config.yml | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination/config.yml b/src/lib/_imports/bootstrap4/pagination/config.yml
index 5f4018fe0..aebcba76d 100644
--- a/src/lib/_imports/bootstrap4/pagination/config.yml
+++ b/src/lib/_imports/bootstrap4/pagination/config.yml
@@ -4,15 +4,9 @@ variants:
     status: reference
     context:
       shouldSkipBase: true
-  - name: tacc-portal
-    label: TACC (Portal)
+  - name: tacc
+    label: TACC
     status: prototype
     context:
       shouldSkipPattern: false
-      shouldLoadPortal: true
-  - name: tacc-cms
-    label: TACC (CMS)
-    status: prototype
-    context:
-      shouldSkipPattern: false
-      shouldLoadCMS: true
+

From 33c942fb10e2eb0fb4fc35bb4f289096732e2a75 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 12:56:40 -0600
Subject: [PATCH 13/25] fix(pagination): easy button links & square links

---
 src/lib/_imports/bootstrap4/pagination.postcss |  2 ++
 src/lib/_imports/tools/x-pagination.postcss    | 11 ++++-------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 60e299316..e8bfe4745 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -13,6 +13,8 @@
 
   & .page-link {
     @mixin pagination__page-link;
+
+    margin-left: unset;
   }
 }
 
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 5c2d35343..e7ee103b2 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -43,8 +43,6 @@
 }
 
 @define-mixin pagination__page-item {
-  min-width: 2em;
-
   &:not(
     :first-child,
     :last-child
@@ -75,15 +73,14 @@
   display: flex;
   place-content: center;
 
-  &:is(button) {
-    width: 100%;
-  }
-
-  padding: 5px 0;
+  padding: 5px;
   line-height: 1;
+  min-width: 1em;
+  box-sizing: content-box;
 
   background-color: var(--global-color-primary--x-light);
   border-color: var(--global-color-primary--xx-dark);
+  border-width: var(--global-border-width--normal);
   color: var(--global-color-primary--xx-dark);
 
   &:hover {

From e4a29f3f92aeed37ee5aed13a6ef0170f99de9ac Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:04:09 -0600
Subject: [PATCH 14/25] fix(c-page): restore

---
 src/lib/_imports/components/c-page.postcss    | 29 +++++++-
 .../{c-page.html => c-page/c-page--v2.hbs}    | 70 +++++++++----------
 src/lib/_imports/components/c-page/c-page.hbs |  1 +
 src/lib/_imports/components/c-page/config.yml |  8 +++
 src/lib/_imports/components/c-page/readme.md  | 14 ++++
 5 files changed, 84 insertions(+), 38 deletions(-)
 rename src/lib/_imports/components/{c-page.html => c-page/c-page--v2.hbs} (73%)
 create mode 100644 src/lib/_imports/components/c-page/c-page.hbs
 create mode 100644 src/lib/_imports/components/c-page/config.yml
 create mode 100644 src/lib/_imports/components/c-page/readme.md

diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index f495bbb16..a05e4a82b 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -1,7 +1,30 @@
 @import url("../tools/x-pagination.postcss");
 
-/* TODO: Support /c-page.html classes */
-/* FAQ: Core-Components Paginator module expects them */
-/* SEE: https://github.com/TACC/Core-Components/blob/v0.0.4/src/lib/Paginator/Paginator.module.css */
+/* FAQ: Core-Components Paginator module expects these classes */
+/* https://github.com/TACC/Core-Components/blob/v0.0.4/src/lib/Paginator/Paginator.module.css */
 
+.c-page-list {
+  @mixin pagination;
+}
 
+.c-page-end {
+  @mixin pagination__end-item;
+  @mixin pagination__end-link;
+}
+
+.c-page-item {
+  @mixin pagination__page-item;
+}
+
+.c-page-link {
+  @mixin pagination__page-link;
+}
+
+.c-page-item--etcetera {
+  @mixin pagination__skipped-item;
+  @mixin pagination__skipped-link;
+}
+
+.c-button--is-active {
+  @mixin pagination__active-link;
+}
diff --git a/src/lib/_imports/components/c-page.html b/src/lib/_imports/components/c-page/c-page--v2.hbs
similarity index 73%
rename from src/lib/_imports/components/c-page.html
rename to src/lib/_imports/components/c-page/c-page--v2.hbs
index 66ba9d5dc..4e52ba1b3 100644
--- a/src/lib/_imports/components/c-page.html
+++ b/src/lib/_imports/components/c-page/c-page--v2.hbs
@@ -1,10 +1,10 @@
 <!-- Pagination with one page -->
-<div class="c-page-list">
+<nav class="c-page-list">
   <button class="c-button c-button--as-link c-page-end" disabled type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
     type="button"
   >
     1
@@ -12,33 +12,33 @@
   <button class="c-button c-button--as-link c-page-end" disabled type="button">
     Next &gt;
   </button>
-</div>
+</nav>
 
 <!-- Pagination with fewer than 7 pages -->
-<div class="c-page-list">
+<nav class="c-page-list">
   <button class="c-button c-button--as-link c-page-end" type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     1
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
     type="button"
   >
     2
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     3
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     4
@@ -46,76 +46,76 @@
   <button class="c-button c-button--as-link c-page-end" type="button">
     Next &gt;
   </button>
-</div>
+</nav>
 
 <!-- Pagination with current page near start -->
-<div class="c-page-list">
+<nav class="c-page-list">
   <button class="c-button c-button--as-link c-page-end" type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     1
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     2
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
     type="button"
   >
     3
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     4
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     5
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     6
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     7
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     8
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     9
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     10
   </button>
   <span class="c-page-item--etcetera">...</span>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     20
@@ -123,76 +123,76 @@
   <button class="c-button c-button--as-link c-page-end" type="button">
     Next &gt;
   </button>
-</div>
+</nav>
 
 <!-- Pagination with current page near end -->
-<div class="c-page-list">
+<nav class="c-page-list">
   <button class="c-button c-button--as-link c-page-end" type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     1
   </button>
   <span class="c-page-item--etcetera">...</span>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     11
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     12
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     13
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     14
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     15
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     16
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     17
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
     type="button"
   >
     18
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     19
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link c-page-link--always-click"
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
   >
     20
@@ -200,4 +200,4 @@
   <button class="c-button c-button--as-link c-page-end" type="button">
     Next &gt;
   </button>
-</div>
+</nav>
diff --git a/src/lib/_imports/components/c-page/c-page.hbs b/src/lib/_imports/components/c-page/c-page.hbs
new file mode 100644
index 000000000..c8d10918e
--- /dev/null
+++ b/src/lib/_imports/components/c-page/c-page.hbs
@@ -0,0 +1 @@
+⚠️ Not built yet.
diff --git a/src/lib/_imports/components/c-page/config.yml b/src/lib/_imports/components/c-page/config.yml
new file mode 100644
index 000000000..ab7f5a55c
--- /dev/null
+++ b/src/lib/_imports/components/c-page/config.yml
@@ -0,0 +1,8 @@
+label: C Page / C Pagination
+variants:
+  - name: default
+    label: v3 (C Pagination)
+    status: prototype
+  - name: v2
+    label: v2 (C Page)
+    status: ready
diff --git a/src/lib/_imports/components/c-page/readme.md b/src/lib/_imports/components/c-page/readme.md
new file mode 100644
index 000000000..d335a9d3a
--- /dev/null
+++ b/src/lib/_imports/components/c-page/readme.md
@@ -0,0 +1,14 @@
+Pagination component for navigating through multiple pages of content.
+
+> **⚠️ Warning**
+>
+> Naming does **not** _accurately_ reflect [BEM](https://getbem.com/).
+
+| Class                   | Description
+| - | - |
+| `.c-page-list`         | container for pagination controls
+| `.c-page-end`          | previous/next navigation buttons
+| `.c-page-item`         | individual page number button
+| `.c-page-link`         | clickable page number link
+| `.c-page-item--etcetera` | ellipsis between page numbers
+| `.c-button--is-active` | indicates current page

From 33d5cc23530849aeefeb531903a68543ab1e040b Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:22:45 -0600
Subject: [PATCH 15/25] fix(c-page): restore it as it was, no c-pagination

---
 src/lib/_imports/components/c-page.postcss    |  12 ++
 .../_imports/components/c-page/c-page--v2.hbs | 203 -----------------
 src/lib/_imports/components/c-page/c-page.hbs | 204 +++++++++++++++++-
 src/lib/_imports/components/c-page/config.yml |   8 -
 src/lib/_imports/tools/x-pagination.postcss   |   2 +
 5 files changed, 217 insertions(+), 212 deletions(-)
 delete mode 100644 src/lib/_imports/components/c-page/c-page--v2.hbs
 delete mode 100644 src/lib/_imports/components/c-page/config.yml

diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index a05e4a82b..8fb7abdb0 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -10,6 +10,18 @@
 .c-page-end {
   @mixin pagination__end-item;
   @mixin pagination__end-link;
+
+  margin-inline: 12px;
+
+  /* to mimic Bootsrap4 default pagination */
+  &:first-child {
+    border-top-left-radius: .25rem;
+    border-bottom-left-radius: .25rem;
+  }
+  &:last-child {
+    border-top-right-radius: .25rem;
+    border-bottom-right-radius: .25rem;
+  }
 }
 
 .c-page-item {
diff --git a/src/lib/_imports/components/c-page/c-page--v2.hbs b/src/lib/_imports/components/c-page/c-page--v2.hbs
deleted file mode 100644
index 4e52ba1b3..000000000
--- a/src/lib/_imports/components/c-page/c-page--v2.hbs
+++ /dev/null
@@ -1,203 +0,0 @@
-<!-- Pagination with one page -->
-<nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" disabled type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    1
-  </button>
-  <button class="c-button c-button--as-link c-page-end" disabled type="button">
-    Next &gt;
-  </button>
-</nav>
-
-<!-- Pagination with fewer than 7 pages -->
-<nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    1
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    2
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    3
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    4
-  </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    Next &gt;
-  </button>
-</nav>
-
-<!-- Pagination with current page near start -->
-<nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    1
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    2
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    3
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    4
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    5
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    6
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    7
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    8
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    9
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    10
-  </button>
-  <span class="c-page-item--etcetera">...</span>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    20
-  </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    Next &gt;
-  </button>
-</nav>
-
-<!-- Pagination with current page near end -->
-<nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    &lt; Previous
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    1
-  </button>
-  <span class="c-page-item--etcetera">...</span>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    11
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    12
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    13
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    14
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    15
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    16
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    17
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    18
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    19
-  </button>
-  <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
-    type="button"
-  >
-    20
-  </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
-    Next &gt;
-  </button>
-</nav>
diff --git a/src/lib/_imports/components/c-page/c-page.hbs b/src/lib/_imports/components/c-page/c-page.hbs
index c8d10918e..4e52ba1b3 100644
--- a/src/lib/_imports/components/c-page/c-page.hbs
+++ b/src/lib/_imports/components/c-page/c-page.hbs
@@ -1 +1,203 @@
-⚠️ Not built yet.
+<!-- Pagination with one page -->
+<nav class="c-page-list">
+  <button class="c-button c-button--as-link c-page-end" disabled type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button class="c-button c-button--as-link c-page-end" disabled type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Pagination with fewer than 7 pages -->
+<nav class="c-page-list">
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    4
+  </button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Pagination with current page near start -->
+<nav class="c-page-list">
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    4
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    5
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    6
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    7
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    8
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    9
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    10
+  </button>
+  <span class="c-page-item--etcetera">...</span>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Pagination with current page near end -->
+<nav class="c-page-list">
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <span class="c-page-item--etcetera">...</span>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    11
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    12
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    13
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    14
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    15
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    16
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    17
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    18
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    19
+  </button>
+  <button
+    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    type="button"
+  >
+    20
+  </button>
+  <button class="c-button c-button--as-link c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
diff --git a/src/lib/_imports/components/c-page/config.yml b/src/lib/_imports/components/c-page/config.yml
deleted file mode 100644
index ab7f5a55c..000000000
--- a/src/lib/_imports/components/c-page/config.yml
+++ /dev/null
@@ -1,8 +0,0 @@
-label: C Page / C Pagination
-variants:
-  - name: default
-    label: v3 (C Pagination)
-    status: prototype
-  - name: v2
-    label: v2 (C Page)
-    status: ready
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index e7ee103b2..98b13d3c4 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -110,6 +110,8 @@
 }
 
 @define-mixin pagination__end-link {
+  padding: 5px;
+
   &:focus {
     outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
   }

From 6a3f0c2abf7e706eb074df6b03e40e5eea40321f Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:50:48 -0600
Subject: [PATCH 16/25] feat(pagination): tools/x-pagination demo

---
 src/lib/_imports/elements/links.postcss       |  8 +--
 src/lib/_imports/tools/x-pagination.postcss   | 45 ++++++++++++++
 src/lib/_imports/tools/x-pagination/readme.md | 15 +++++
 .../tools/x-pagination/x-pagination.hbs       | 62 +++++++++++++++++++
 4 files changed, 126 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/_imports/tools/x-pagination/readme.md
 create mode 100644 src/lib/_imports/tools/x-pagination/x-pagination.hbs

diff --git a/src/lib/_imports/elements/links.postcss b/src/lib/_imports/elements/links.postcss
index 3f025d6de..4ac3a2004 100644
--- a/src/lib/_imports/elements/links.postcss
+++ b/src/lib/_imports/elements/links.postcss
@@ -2,15 +2,15 @@
 @import url("../tools/selectors.postcss");
 @import url("../tools/x-link.postcss");
 
-a:not(:--c-button) {
+a:where(:not(:--c-button)) {
   @mixin link;
 }
-a:not([href]) {
+a:where(:not([href])) {
   @mixin link--disabled;
 }
-a:not(:--c-button):hover {
+a:where(:not(:--c-button)):hover {
   @mixin link--hover;
 }
-a:not(:--c-button):active {
+a:where(:not(:--c-button)):active {
   @mixin link--active;
 }
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 98b13d3c4..ea78ccc27 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -26,6 +26,10 @@
     list-style: none;
   }
 }
+/* DEMO-USE ONLY */
+.x-pagination {
+  @mixin pagination;
+}
 
 
 
@@ -41,6 +45,10 @@
 
   white-space: nowrap;
 }
+/* DEMO-USE ONLY */
+.x-pagination__end-item {
+  @mixin pagination__end-item;
+}
 
 @define-mixin pagination__page-item {
   &:not(
@@ -50,6 +58,10 @@
     margin-inline: 0.25em;
   }
 }
+/* DEMO-USE ONLY */
+.x-pagination__page-item {
+  @mixin pagination__page-item;
+}
 
 @define-mixin pagination__skipped-item {
   display: flex;
@@ -57,14 +69,26 @@
 
   cursor: default;
 }
+/* DEMO-USE ONLY */
+.x-pagination__skipped-item {
+  @mixin pagination__skipped-item;
+}
 
 @define-mixin pagination__active-item {
   /* no styles needed */
 }
+/* DEMO-USE ONLY */
+.x-pagination__active-item {
+  @mixin pagination__active-item;
+}
 
 @define-mixin pagination__disabled-item {
   pointer-events: none;
 }
+/* DEMO-USE ONLY */
+.x-pagination__disabled-item {
+  @mixin pagination__disabled-item;
+}
 
 
 /* Link */
@@ -80,6 +104,7 @@
 
   background-color: var(--global-color-primary--x-light);
   border-color: var(--global-color-primary--xx-dark);
+  border-style: solid;
   border-width: var(--global-border-width--normal);
   color: var(--global-color-primary--xx-dark);
 
@@ -108,6 +133,10 @@
     outline: var(--global-border-width--normal) solid var(--global-color-accent--dark);
   }
 }
+/* DEMO-USE ONLY */
+.x-pagination__page-link {
+  @mixin pagination__page-link;
+}
 
 @define-mixin pagination__end-link {
   padding: 5px;
@@ -116,12 +145,20 @@
     outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
   }
 }
+/* DEMO-USE ONLY */
+.x-pagination__end-link {
+  @mixin pagination__end-link;
+}
 
 @define-mixin pagination__skipped-link {
   /* FAQ: If client applies this with other mixins,
           then client must resolve conflicting styles
           (like in Bootstrap4 pagination.css) */
 }
+/* DEMO-USE ONLY */
+.x-pagination__skipped-link {
+  @mixin pagination__skipped-link;
+}
 
 @define-mixin pagination__active-link {
   background-color: var(--global-color-accent--x-light);
@@ -133,9 +170,17 @@
     border-color: var(--global-color-accent--dark);
   }
 }
+/* DEMO-USE ONLY */
+.x-pagination__active-link {
+  @mixin pagination__active-link;
+}
 
 @define-mixin pagination__disabled-link {
   color: var(--global-color-primary--light);
   background-color: var(--global-color-primary--xx-light);
   border-color: var(--global-color-primary--light);
 }
+/* DEMO-USE ONLY */
+.x-pagination__disabled-link {
+  @mixin pagination__disabled-link;
+}
diff --git a/src/lib/_imports/tools/x-pagination/readme.md b/src/lib/_imports/tools/x-pagination/readme.md
new file mode 100644
index 000000000..f097fb523
--- /dev/null
+++ b/src/lib/_imports/tools/x-pagination/readme.md
@@ -0,0 +1,15 @@
+Mixins for creating consistent pagination components.
+
+| Mixin | Description
+| - | -
+| `pagination` | Base styles for pagination container
+| `pagination__end-item` | Styles for previous/next items
+| `pagination__page-item` | Styles for numbered page items
+| `pagination__skipped-item` | Styles for ellipsis/skip items
+| `pagination__active-item` | Styles for current page item
+| `pagination__disabled-item` | Styles for disabled items
+| `pagination__page-link` | Styles for numbered page links
+| `pagination__end-link` | Styles for previous/next links
+| `pagination__skipped-link` | Styles for ellipsis/skip indicators
+| `pagination__active-link` | Styles for current page link
+| `pagination__disabled-link` | Styles for disabled links
diff --git a/src/lib/_imports/tools/x-pagination/x-pagination.hbs b/src/lib/_imports/tools/x-pagination/x-pagination.hbs
new file mode 100644
index 000000000..d2d26f06b
--- /dev/null
+++ b/src/lib/_imports/tools/x-pagination/x-pagination.hbs
@@ -0,0 +1,62 @@
+<!-- Basic Pagination -->
+<ul class="x-pagination">
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__disabled-link">&lt; Previous</span>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <a class="x-pagination__page-link x-pagination__active-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">3</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+</ul>
+
+<!-- Pagination with Skip -->
+<ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <a class="x-pagination__page-link x-pagination__active-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">3</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">10</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+</ul>
+
+<!-- Pagination with Disabled State -->
+<ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__disabled-item">
+        <span class="x-pagination__page-link x-pagination__disabled-link">2</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">3</a>
+    </li>
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__disabled-link">Next &gt;</span>
+    </li>
+</ul> 
\ No newline at end of file

From ccc1fbf71a042270853d7280addec87f9c0575d2 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 13:52:26 -0600
Subject: [PATCH 17/25] fix(pagination): consistent border-radius

- components/c-page
- bootstrap4/pagination
- tools/x-pagination
---
 src/lib/_imports/bootstrap4/pagination.postcss |  1 +
 src/lib/_imports/components/c-page.postcss     | 10 ----------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index e8bfe4745..41025d1af 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -29,6 +29,7 @@
 
     border: none;
     background-color: transparent;
+    border-radius: unset;
   }
 }
 
diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index 8fb7abdb0..15ad56dc1 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -12,16 +12,6 @@
   @mixin pagination__end-link;
 
   margin-inline: 12px;
-
-  /* to mimic Bootsrap4 default pagination */
-  &:first-child {
-    border-top-left-radius: .25rem;
-    border-bottom-left-radius: .25rem;
-  }
-  &:last-child {
-    border-top-right-radius: .25rem;
-    border-bottom-right-radius: .25rem;
-  }
 }
 
 .c-page-item {

From d920d3e9e498edb9f034c5db7aa73b3dc0d21fca Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:03:10 -0600
Subject: [PATCH 18/25] fix(pagination): consistent skip/etc links

---
 src/lib/_imports/tools/x-pagination.postcss   | 11 ++++++++---
 src/lib/_imports/tools/x-pagination/readme.md |  1 +
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index ea78ccc27..1242a535b 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -93,14 +93,17 @@
 
 /* Link */
 
-@define-mixin pagination__page-link {
+@define-mixin pagination__link {
   display: flex;
   place-content: center;
 
   padding: 5px;
   line-height: 1;
   min-width: 1em;
-  box-sizing: content-box;
+  box-sizing: content-box; /* to support square links and button links */
+}
+@define-mixin pagination__page-link {
+  @mixin pagination__link;
 
   background-color: var(--global-color-primary--x-light);
   border-color: var(--global-color-primary--xx-dark);
@@ -139,7 +142,7 @@
 }
 
 @define-mixin pagination__end-link {
-  padding: 5px;
+  @mixin pagination__link;
 
   &:focus {
     outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
@@ -151,6 +154,8 @@
 }
 
 @define-mixin pagination__skipped-link {
+  @mixin pagination__link;
+
   /* FAQ: If client applies this with other mixins,
           then client must resolve conflicting styles
           (like in Bootstrap4 pagination.css) */
diff --git a/src/lib/_imports/tools/x-pagination/readme.md b/src/lib/_imports/tools/x-pagination/readme.md
index f097fb523..c75e76227 100644
--- a/src/lib/_imports/tools/x-pagination/readme.md
+++ b/src/lib/_imports/tools/x-pagination/readme.md
@@ -8,6 +8,7 @@ Mixins for creating consistent pagination components.
 | `pagination__skipped-item` | Styles for ellipsis/skip items
 | `pagination__active-item` | Styles for current page item
 | `pagination__disabled-item` | Styles for disabled items
+| `pagination__link` | Base styles for pagination links
 | `pagination__page-link` | Styles for numbered page links
 | `pagination__end-link` | Styles for previous/next links
 | `pagination__skipped-link` | Styles for ellipsis/skip indicators

From c5e1af5f21b74aa1fa2863684f7229acafb59202 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:06:05 -0600
Subject: [PATCH 19/25] =?UTF-8?q?refactor(pag=E2=80=A6):=20disabled/active?=
 =?UTF-8?q?=20links=20=E2=86=92=20modifiers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/_imports/bootstrap4/pagination.postcss       |  4 ++--
 src/lib/_imports/components/c-page.postcss           |  2 +-
 src/lib/_imports/tools/x-pagination.postcss          | 12 ++++++------
 src/lib/_imports/tools/x-pagination/readme.md        |  4 ++--
 src/lib/_imports/tools/x-pagination/x-pagination.hbs | 10 +++++-----
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 41025d1af..8f01fc812 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -49,7 +49,7 @@
   @mixin pagination__active-item;
 
   & .page-link {
-    @mixin pagination__active-link;
+    @mixin pagination__page-link--active;
   }
 }
 
@@ -57,7 +57,7 @@
   @mixin pagination__disabled-item;
 
   & .page-link {
-    @mixin pagination__disabled-link;
+    @mixin pagination__page-link--disabled;
   }
 }
 
diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index 15ad56dc1..ef76588ad 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -28,5 +28,5 @@
 }
 
 .c-button--is-active {
-  @mixin pagination__active-link;
+  @mixin pagination__page-link--active;
 }
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 1242a535b..7a1e8be76 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -165,7 +165,7 @@
   @mixin pagination__skipped-link;
 }
 
-@define-mixin pagination__active-link {
+@define-mixin pagination__page-link--active {
   background-color: var(--global-color-accent--x-light);
   border-color: var(--global-color-primary--xx-dark);
   color: var(--global-color-primary--xx-dark);
@@ -176,16 +176,16 @@
   }
 }
 /* DEMO-USE ONLY */
-.x-pagination__active-link {
-  @mixin pagination__active-link;
+.x-pagination__page-link--active {
+  @mixin pagination__page-link--active;
 }
 
-@define-mixin pagination__disabled-link {
+@define-mixin pagination__page-link--disabled {
   color: var(--global-color-primary--light);
   background-color: var(--global-color-primary--xx-light);
   border-color: var(--global-color-primary--light);
 }
 /* DEMO-USE ONLY */
-.x-pagination__disabled-link {
-  @mixin pagination__disabled-link;
+.x-pagination__page-link--disabled {
+  @mixin pagination__page-link--disabled;
 }
diff --git a/src/lib/_imports/tools/x-pagination/readme.md b/src/lib/_imports/tools/x-pagination/readme.md
index c75e76227..6a259545d 100644
--- a/src/lib/_imports/tools/x-pagination/readme.md
+++ b/src/lib/_imports/tools/x-pagination/readme.md
@@ -12,5 +12,5 @@ Mixins for creating consistent pagination components.
 | `pagination__page-link` | Styles for numbered page links
 | `pagination__end-link` | Styles for previous/next links
 | `pagination__skipped-link` | Styles for ellipsis/skip indicators
-| `pagination__active-link` | Styles for current page link
-| `pagination__disabled-link` | Styles for disabled links
+| `pagination__page-link--active` | Styles for current page link
+| `pagination__page-link--disabled` | Styles for disabled links
diff --git a/src/lib/_imports/tools/x-pagination/x-pagination.hbs b/src/lib/_imports/tools/x-pagination/x-pagination.hbs
index d2d26f06b..87268cd92 100644
--- a/src/lib/_imports/tools/x-pagination/x-pagination.hbs
+++ b/src/lib/_imports/tools/x-pagination/x-pagination.hbs
@@ -1,10 +1,10 @@
 <!-- Basic Pagination -->
 <ul class="x-pagination">
     <li class="x-pagination__end-item x-pagination__disabled-item">
-        <span class="x-pagination__end-link x-pagination__disabled-link">&lt; Previous</span>
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">&lt; Previous</span>
     </li>
     <li class="x-pagination__page-item x-pagination__active-item">
-        <a class="x-pagination__page-link x-pagination__active-link" href="#">1</a>
+        <a class="x-pagination__page-link x-pagination__page-link--active" href="#">1</a>
     </li>
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">2</a>
@@ -26,7 +26,7 @@
         <a class="x-pagination__page-link" href="#">1</a>
     </li>
     <li class="x-pagination__page-item x-pagination__active-item">
-        <a class="x-pagination__page-link x-pagination__active-link" href="#">2</a>
+        <a class="x-pagination__page-link x-pagination__page-link--active" href="#">2</a>
     </li>
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">3</a>
@@ -51,12 +51,12 @@
         <a class="x-pagination__page-link" href="#">1</a>
     </li>
     <li class="x-pagination__page-item x-pagination__disabled-item">
-        <span class="x-pagination__page-link x-pagination__disabled-link">2</span>
+        <span class="x-pagination__page-link x-pagination__page-link--disabled">2</span>
     </li>
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">3</a>
     </li>
     <li class="x-pagination__end-item x-pagination__disabled-item">
-        <span class="x-pagination__end-link x-pagination__disabled-link">Next &gt;</span>
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
     </li>
 </ul> 
\ No newline at end of file

From 08f5cb0cb541cae66c4a3dcdee54a63b486628e9 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:12:01 -0600
Subject: [PATCH 20/25] enhance(pagination): disabled link for c-page

---
 src/lib/_imports/components/c-page.postcss    | 4 ++++
 src/lib/_imports/components/c-page/c-page.hbs | 1 +
 2 files changed, 5 insertions(+)

diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index ef76588ad..2c929209b 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -20,6 +20,10 @@
 
 .c-page-link {
   @mixin pagination__page-link;
+
+  &:disabled {
+    @mixin pagination__page-link--disabled;
+  }
 }
 
 .c-page-item--etcetera {
diff --git a/src/lib/_imports/components/c-page/c-page.hbs b/src/lib/_imports/components/c-page/c-page.hbs
index 4e52ba1b3..b8c21c2c1 100644
--- a/src/lib/_imports/components/c-page/c-page.hbs
+++ b/src/lib/_imports/components/c-page/c-page.hbs
@@ -158,6 +158,7 @@
   <button
     class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
     type="button"
+    disabled
   >
     14
   </button>

From bcde2e0ebba98111dd79c62d6e82be47e2e04241 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:36:41 -0600
Subject: [PATCH 21/25] =?UTF-8?q?fix(pag=E2=80=A6):=20c-page=20should=20NO?=
 =?UTF-8?q?T=20use=20button=20class?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/_imports/components/c-page.postcss    |  9 +++
 src/lib/_imports/components/c-page/c-page.hbs | 70 +++++++++----------
 src/lib/_imports/tools/x-pagination.postcss   | 18 ++++-
 3 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/lib/_imports/components/c-page.postcss b/src/lib/_imports/components/c-page.postcss
index 2c929209b..acadc2773 100644
--- a/src/lib/_imports/components/c-page.postcss
+++ b/src/lib/_imports/components/c-page.postcss
@@ -17,6 +17,9 @@
 .c-page-item {
   @mixin pagination__page-item;
 }
+.c-page-item--is-active {
+  @mixin pagination__active-item;
+}
 
 .c-page-link {
   @mixin pagination__page-link;
@@ -24,6 +27,12 @@
   &:disabled {
     @mixin pagination__page-link--disabled;
   }
+
+  &.c-page-link--is-active,
+  &.c-page-item--is-active,
+  .c-page-item--is-active & {
+    @mixin pagination__page-link--active;
+  }
 }
 
 .c-page-item--etcetera {
diff --git a/src/lib/_imports/components/c-page/c-page.hbs b/src/lib/_imports/components/c-page/c-page.hbs
index b8c21c2c1..4e3162c0d 100644
--- a/src/lib/_imports/components/c-page/c-page.hbs
+++ b/src/lib/_imports/components/c-page/c-page.hbs
@@ -1,204 +1,204 @@
 <!-- Pagination with one page -->
 <nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" disabled type="button">
+  <button class="c-page-end" disabled type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
     1
   </button>
-  <button class="c-button c-button--as-link c-page-end" disabled type="button">
+  <button class="c-page-end" disabled type="button">
     Next &gt;
   </button>
 </nav>
 
 <!-- Pagination with fewer than 7 pages -->
 <nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
+  <button class="c-page-end" type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     1
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
     2
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     3
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     4
   </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
+  <button class="c-page-end" type="button">
     Next &gt;
   </button>
 </nav>
 
 <!-- Pagination with current page near start -->
 <nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
+  <button class="c-page-end" type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     1
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     2
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
     3
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     4
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     5
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     6
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     7
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     8
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     9
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     10
   </button>
   <span class="c-page-item--etcetera">...</span>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     20
   </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
+  <button class="c-page-end" type="button">
     Next &gt;
   </button>
 </nav>
 
 <!-- Pagination with current page near end -->
 <nav class="c-page-list">
-  <button class="c-button c-button--as-link c-page-end" type="button">
+  <button class="c-page-end" type="button">
     &lt; Previous
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     1
   </button>
   <span class="c-page-item--etcetera">...</span>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     11
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     12
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     13
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
     disabled
   >
     14
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     15
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     16
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     17
   </button>
   <button
-    class="c-button c-button--secondary c-button--is-active c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
     18
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     19
   </button>
   <button
-    class="c-button c-button--secondary c-button--size-small c-page-item c-page-link"
+    class="c-page-item c-page-link"
     type="button"
   >
     20
   </button>
-  <button class="c-button c-button--as-link c-page-end" type="button">
+  <button class="c-page-end" type="button">
     Next &gt;
   </button>
 </nav>
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 7a1e8be76..8abb9c9ac 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -1,4 +1,4 @@
-@import url("../components/c-button.selectors.postcss");
+@import url("../tools/x-link.postcss");
 /* TODO: Use x-button (instead of copied styles) */
 /* @import url("../tools/x-button.postcss"); */
 
@@ -44,6 +44,12 @@
   line-height: 1;
 
   white-space: nowrap;
+
+  &:is(button) {
+    background-color: transparent;
+    border: none;
+    border-radius: unset;
+  }
 }
 /* DEMO-USE ONLY */
 .x-pagination__end-item {
@@ -101,6 +107,10 @@
   line-height: 1;
   min-width: 1em;
   box-sizing: content-box; /* to support square links and button links */
+
+  &:is(button) {
+    cursor: pointer;
+  }
 }
 @define-mixin pagination__page-link {
   @mixin pagination__link;
@@ -147,6 +157,12 @@
   &:focus {
     outline: var(--global-border-width--thick) solid var(--global-color-accent--light);
   }
+
+  &:is(button):not(:disabled) {
+    @mixin link;
+    &:hover { @mixin link--hover; }
+    &:active { @mixin link--active; }
+  }
 }
 /* DEMO-USE ONLY */
 .x-pagination__end-link {

From adcdd867ad6fd86344fc96c4f3de89ff09e9f344 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 14:37:14 -0600
Subject: [PATCH 22/25] =?UTF-8?q?fix(pag=E2=80=A6):=20list=20too=20tall,?=
 =?UTF-8?q?=20inconsistentent=20w/=20x-=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/_imports/tools/x-pagination.postcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index 8abb9c9ac..eac3a30ec 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -40,7 +40,7 @@
 /* Item */
 
 @define-mixin pagination__end-item {
-  padding: 4px 12px;
+  padding: 0 12px;
   line-height: 1;
 
   white-space: nowrap;

From a32678fae936f6745e761fd1f3a48fd481fb0247 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 15:13:35 -0600
Subject: [PATCH 23/25] enhancepagination): consistent demos

---
 .../_imports/bootstrap4/pagination/demo.css   |   3 +
 .../bootstrap4/pagination/pagination.hbs      | 185 +++++++++++++++---
 src/lib/_imports/components/c-page/c-page.hbs | 107 ++++++++--
 src/lib/_imports/components/c-page/demo.css   |   3 +
 .../cms-pagination/cms-pagination.hbs         |  38 +++-
 src/lib/_imports/tools/x-pagination.postcss   |   4 -
 src/lib/_imports/tools/x-pagination/demo.css  |   3 +
 .../tools/x-pagination/x-pagination.hbs       | 166 ++++++++++++++--
 8 files changed, 438 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/_imports/bootstrap4/pagination/demo.css
 create mode 100644 src/lib/_imports/components/c-page/demo.css
 create mode 100644 src/lib/_imports/tools/x-pagination/demo.css

diff --git a/src/lib/_imports/bootstrap4/pagination/demo.css b/src/lib/_imports/bootstrap4/pagination/demo.css
new file mode 100644
index 000000000..4bca2585f
--- /dev/null
+++ b/src/lib/_imports/bootstrap4/pagination/demo.css
@@ -0,0 +1,3 @@
+nav + nav {
+  padding-top: 20px;
+}
diff --git a/src/lib/_imports/bootstrap4/pagination/pagination.hbs b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
index 2fbe99fef..204907632 100644
--- a/src/lib/_imports/bootstrap4/pagination/pagination.hbs
+++ b/src/lib/_imports/bootstrap4/pagination/pagination.hbs
@@ -1,69 +1,194 @@
+<!-- Single Page -->
+<nav>
+  <ul class="pagination">
+    <li class="page-item disabled">
+      <span class="page-link">&lt; Previous</span>
+    </li>
+    <li class="page-item active">
+      <span class="page-link">1</span>
+    </li>
+    <li class="page-item disabled">
+      <span class="page-link">Next &gt;</span>
+    </li>
+  </ul>
+</nav>
 
-<ul class="pagination">
+<!-- Few Pages (Current: 2 of 4) -->
+<nav>
+  <ul class="pagination">
     <li class="page-item">
-        <a class="page-link" href="#">&lt; Previous</a>
+      <a class="page-link" href="#">&lt; Previous</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">1</a>
+      <a class="page-link" href="#">1</a>
     </li>
     <li class="page-item active">
-        <a class="page-link" href="#">2</a>
+      <span class="page-link">2</span>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">3</a>
-    </li>
-    <li class="page-item skip">
-        <span class="page-link">...</span>
+      <a class="page-link" href="#">3</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">10</a>
+      <a class="page-link" href="#">4</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">Next &gt;</a>
+      <a class="page-link" href="#">Next &gt;</a>
     </li>
-</ul>
+  </ul>
+</nav>
 
-<ul class="pagination">
+<!-- Few Pages (Current: Last) -->
+<nav>
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">3</a>
+    </li>
+    <li class="page-item active">
+      <span class="page-link">4</span>
+    </li>
     <li class="page-item disabled">
-        <span class="page-link">&lt; Previous</span>
+      <span class="page-link">Next &gt;</span>
+    </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
+<nav>
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">2</a>
     </li>
     <li class="page-item active">
-        <a class="page-link" href="#">1</a>
+      <span class="page-link">3</span>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">4</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">5</a>
+    </li>
+    <li class="page-item skip">
+      <span class="page-link">...</span>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">2</a>
+      <a class="page-link" href="#">20</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">3</a>
+      <a class="page-link" href="#">Next &gt;</a>
     </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav>
+  <ul class="pagination">
     <li class="page-item">
-        <a class="page-link" href="#">4</a>
+      <a class="page-link" href="#">&lt; Previous</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">5</a>
+      <a class="page-link" href="#">1</a>
+    </li>
+    <li class="page-item skip">
+      <span class="page-link">...</span>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">8</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">Next &gt;</a>
+      <a class="page-link" href="#">9</a>
     </li>
-</ul>
+    <li class="page-item active">
+      <span class="page-link">10</span>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">11</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">12</a>
+    </li>
+    <li class="page-item skip">
+      <span class="page-link">...</span>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">20</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
 
-<ul class="pagination">
-    <li class="page-item disabled">
-        <span class="page-link">&lt; Previous</span>
+<!-- Many Pages - Near End (Current: 18 of 20) -->
+<nav>
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#">&lt; Previous</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">1</a>
+      <a class="page-link" href="#">1</a>
     </li>
-    <li class="page-item disabled">
-        <span class="page-link">2</span>
+    <li class="page-item skip">
+      <span class="page-link">...</span>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">16</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">17</a>
+    </li>
+    <li class="page-item active">
+      <span class="page-link">18</span>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">19</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">20</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Example with Disabled Link -->
+<nav>
+  <ul class="pagination">
+    <li class="page-item">
+      <a class="page-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="page-item">
+      <a class="page-link" href="#">1</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">3</a>
+      <a class="page-link" href="#">2</a>
+    </li>
+    <li class="page-item active">
+      <span class="page-link">3</span>
+    </li>
+    <li class="page-item disabled">
+      <span class="page-link">4</span>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">4</a>
+      <a class="page-link" href="#">5</a>
     </li>
     <li class="page-item">
-        <a class="page-link" href="#">Next &gt;</a>
+      <a class="page-link" href="#">Next &gt;</a>
     </li>
-</ul>
+  </ul>
+</nav>
diff --git a/src/lib/_imports/components/c-page/c-page.hbs b/src/lib/_imports/components/c-page/c-page.hbs
index 4e3162c0d..496d0e4e6 100644
--- a/src/lib/_imports/components/c-page/c-page.hbs
+++ b/src/lib/_imports/components/c-page/c-page.hbs
@@ -1,10 +1,11 @@
-<!-- Pagination with one page -->
+<!-- Single Page -->
 <nav class="c-page-list">
   <button class="c-page-end" disabled type="button">
     &lt; Previous
   </button>
   <button
     class="c-page-item c-page-item--is-active c-page-link"
+    disabled
     type="button"
   >
     1
@@ -14,7 +15,7 @@
   </button>
 </nav>
 
-<!-- Pagination with fewer than 7 pages -->
+<!-- Few Pages (Current: 2 of 4) -->
 <nav class="c-page-list">
   <button class="c-page-end" type="button">
     &lt; Previous
@@ -48,7 +49,41 @@
   </button>
 </nav>
 
-<!-- Pagination with current page near start -->
+<!-- Few Pages (Current: Last) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    1
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    2
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    3
+  </button>
+  <button
+    class="c-page-item c-page-item--is-active c-page-link"
+    type="button"
+  >
+    4
+  </button>
+  <button class="c-page-end" disabled type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
 <nav class="c-page-list">
   <button class="c-page-end" type="button">
     &lt; Previous
@@ -83,18 +118,30 @@
   >
     5
   </button>
+  <span class="c-page-item--etcetera">...</span>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    6
+    20
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    7
+    1
   </button>
+  <span class="c-page-item--etcetera">...</span>
   <button
     class="c-page-item c-page-link"
     type="button"
@@ -108,11 +155,23 @@
     9
   </button>
   <button
-    class="c-page-item c-page-link"
+    class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
     10
   </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    11
+  </button>
+  <button
+    class="c-page-item c-page-link"
+    type="button"
+  >
+    12
+  </button>
   <span class="c-page-item--etcetera">...</span>
   <button
     class="c-page-item c-page-link"
@@ -125,7 +184,7 @@
   </button>
 </nav>
 
-<!-- Pagination with current page near end -->
+<!-- Many Pages - Near End (Current: 18 of 20) -->
 <nav class="c-page-list">
   <button class="c-page-end" type="button">
     &lt; Previous
@@ -141,62 +200,72 @@
     class="c-page-item c-page-link"
     type="button"
   >
-    11
+    16
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    12
+    17
   </button>
   <button
-    class="c-page-item c-page-link"
+    class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
-    13
+    18
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
-    disabled
   >
-    14
+    19
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    15
+    20
+  </button>
+  <button class="c-page-end" type="button">
+    Next &gt;
+  </button>
+</nav>
+
+<!-- Example with Disabled Link -->
+<nav class="c-page-list">
+  <button class="c-page-end" type="button">
+    &lt; Previous
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    16
+    1
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    17
+    2
   </button>
   <button
     class="c-page-item c-page-item--is-active c-page-link"
     type="button"
   >
-    18
+    3
   </button>
   <button
     class="c-page-item c-page-link"
+    disabled
     type="button"
   >
-    19
+    4
   </button>
   <button
     class="c-page-item c-page-link"
     type="button"
   >
-    20
+    5
   </button>
   <button class="c-page-end" type="button">
     Next &gt;
diff --git a/src/lib/_imports/components/c-page/demo.css b/src/lib/_imports/components/c-page/demo.css
new file mode 100644
index 000000000..4bca2585f
--- /dev/null
+++ b/src/lib/_imports/components/c-page/demo.css
@@ -0,0 +1,3 @@
+nav + nav {
+  padding-top: 20px;
+}
diff --git a/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs b/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs
index 499754eb3..3b1db4281 100644
--- a/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs
+++ b/src/lib/_imports/djangocms-blog/cms-pagination/cms-pagination.hbs
@@ -1,5 +1,41 @@
+<!-- Single Page -->
+<nav class="pagination">
+  <a>&lt; Previous</a>
+  <span class="current">Page 1 of 1</span>
+  <a>Next &gt;</a>
+</nav>
+
+<!-- Few Pages (Current: 2 of 4) -->
 <nav class="pagination">
   <a href="?page=1">&lt; Previous</a>
-  <span class="current"> Page 2 of 36 </span>
+  <span class="current">Page 2 of 4</span>
   <a href="?page=3">Next &gt;</a>
 </nav>
+
+<!-- Few Pages (Current: Last) -->
+<nav class="pagination">
+  <a href="?page=3">&lt; Previous</a>
+  <span class="current">Page 4 of 4</span>
+  <a>Next &gt;</a>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
+<nav class="pagination">
+  <a href="?page=2">&lt; Previous</a>
+  <span class="current">Page 3 of 20</span>
+  <a href="?page=4">Next &gt;</a>
+</nav>
+
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav class="pagination">
+  <a href="?page=9">&lt; Previous</a>
+  <span class="current">Page 10 of 20</span>
+  <a href="?page=11">Next &gt;</a>
+</nav>
+
+<!-- Many Pages - Near End (Current: 18 of 20) -->
+<nav class="pagination">
+  <a href="?page=17">&lt; Previous</a>
+  <span class="current">Page 18 of 20</span>
+  <a href="?page=19">Next &gt;</a>
+</nav>
diff --git a/src/lib/_imports/tools/x-pagination.postcss b/src/lib/_imports/tools/x-pagination.postcss
index eac3a30ec..695e3e940 100644
--- a/src/lib/_imports/tools/x-pagination.postcss
+++ b/src/lib/_imports/tools/x-pagination.postcss
@@ -17,10 +17,6 @@
 
   font-size: var(--global-font-size--small);
 
-  &:not(:first-child) {
-    padding-top: 20px;
-  }
-
   &:is(ol, ul) {
     padding-left: unset;
     list-style: none;
diff --git a/src/lib/_imports/tools/x-pagination/demo.css b/src/lib/_imports/tools/x-pagination/demo.css
new file mode 100644
index 000000000..4bca2585f
--- /dev/null
+++ b/src/lib/_imports/tools/x-pagination/demo.css
@@ -0,0 +1,3 @@
+nav + nav {
+  padding-top: 20px;
+}
diff --git a/src/lib/_imports/tools/x-pagination/x-pagination.hbs b/src/lib/_imports/tools/x-pagination/x-pagination.hbs
index 87268cd92..0879028cf 100644
--- a/src/lib/_imports/tools/x-pagination/x-pagination.hbs
+++ b/src/lib/_imports/tools/x-pagination/x-pagination.hbs
@@ -1,10 +1,50 @@
-<!-- Basic Pagination -->
-<ul class="x-pagination">
+<!-- Single Page -->
+<nav>
+  <ul class="x-pagination">
     <li class="x-pagination__end-item x-pagination__disabled-item">
         <span class="x-pagination__end-link x-pagination__page-link--disabled">&lt; Previous</span>
     </li>
     <li class="x-pagination__page-item x-pagination__active-item">
-        <a class="x-pagination__page-link x-pagination__page-link--active" href="#">1</a>
+        <span class="x-pagination__page-link x-pagination__page-link--active">1</span>
+    </li>
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
+    </li>
+  </ul>
+</nav>
+
+<!-- Few Pages (Current: 2 of 4) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">2</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">3</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">4</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Few Pages (Current: Last) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
     </li>
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">2</a>
@@ -12,51 +52,143 @@
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">3</a>
     </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">4</span>
+    </li>
+    <li class="x-pagination__end-item x-pagination__disabled-item">
+        <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
+    </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Near Start (Current: 3 of 20) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">3</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">4</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">5</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">20</a>
+    </li>
     <li class="x-pagination__end-item">
         <a class="x-pagination__end-link" href="#">Next &gt;</a>
     </li>
-</ul>
+  </ul>
+</nav>
 
-<!-- Pagination with Skip -->
-<ul class="x-pagination">
+<!-- Many Pages - Middle (Current: 10 of 20) -->
+<nav>
+  <ul class="x-pagination">
     <li class="x-pagination__end-item">
         <a class="x-pagination__end-link" href="#">&lt; Previous</a>
     </li>
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">1</a>
     </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">8</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">9</a>
+    </li>
     <li class="x-pagination__page-item x-pagination__active-item">
-        <a class="x-pagination__page-link x-pagination__page-link--active" href="#">2</a>
+        <span class="x-pagination__page-link x-pagination__page-link--active">10</span>
     </li>
     <li class="x-pagination__page-item">
-        <a class="x-pagination__page-link" href="#">3</a>
+        <a class="x-pagination__page-link" href="#">11</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">12</a>
+    </li>
+    <li class="x-pagination__skipped-item">
+        <span class="x-pagination__skipped-link">...</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">20</a>
+    </li>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
+    </li>
+  </ul>
+</nav>
+
+<!-- Many Pages - Near End (Current: 18 of 20) -->
+<nav>
+  <ul class="x-pagination">
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">&lt; Previous</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">1</a>
     </li>
     <li class="x-pagination__skipped-item">
         <span class="x-pagination__skipped-link">...</span>
     </li>
     <li class="x-pagination__page-item">
-        <a class="x-pagination__page-link" href="#">10</a>
+        <a class="x-pagination__page-link" href="#">16</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">17</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">18</span>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">19</a>
+    </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">20</a>
     </li>
     <li class="x-pagination__end-item">
         <a class="x-pagination__end-link" href="#">Next &gt;</a>
     </li>
-</ul>
+  </ul>
+</nav>
 
-<!-- Pagination with Disabled State -->
-<ul class="x-pagination">
+<!-- Example with Disabled Link -->
+<nav>
+  <ul class="x-pagination">
     <li class="x-pagination__end-item">
         <a class="x-pagination__end-link" href="#">&lt; Previous</a>
     </li>
     <li class="x-pagination__page-item">
         <a class="x-pagination__page-link" href="#">1</a>
     </li>
+    <li class="x-pagination__page-item">
+        <a class="x-pagination__page-link" href="#">2</a>
+    </li>
+    <li class="x-pagination__page-item x-pagination__active-item">
+        <span class="x-pagination__page-link x-pagination__page-link--active">3</span>
+    </li>
     <li class="x-pagination__page-item x-pagination__disabled-item">
-        <span class="x-pagination__page-link x-pagination__page-link--disabled">2</span>
+        <span class="x-pagination__page-link x-pagination__page-link--disabled">4</span>
     </li>
     <li class="x-pagination__page-item">
-        <a class="x-pagination__page-link" href="#">3</a>
+        <a class="x-pagination__page-link" href="#">5</a>
     </li>
-    <li class="x-pagination__end-item x-pagination__disabled-item">
-        <span class="x-pagination__end-link x-pagination__page-link--disabled">Next &gt;</span>
+    <li class="x-pagination__end-item">
+        <a class="x-pagination__end-link" href="#">Next &gt;</a>
     </li>
-</ul> 
\ No newline at end of file
+  </ul>
+</nav> 
\ No newline at end of file

From dc38145a6f23b9c044058d8a7e0b099967296e42 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 15:24:02 -0600
Subject: [PATCH 24/25] chore(pagination): mark all demos as ready

---
 src/lib/_imports/bootstrap4/pagination/config.yml | 2 +-
 src/lib/_imports/components/c-page/config.yml     | 1 +
 src/lib/_imports/tools/x-pagination/config.yml    | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/_imports/components/c-page/config.yml
 create mode 100644 src/lib/_imports/tools/x-pagination/config.yml

diff --git a/src/lib/_imports/bootstrap4/pagination/config.yml b/src/lib/_imports/bootstrap4/pagination/config.yml
index aebcba76d..e21c78740 100644
--- a/src/lib/_imports/bootstrap4/pagination/config.yml
+++ b/src/lib/_imports/bootstrap4/pagination/config.yml
@@ -6,7 +6,7 @@ variants:
       shouldSkipBase: true
   - name: tacc
     label: TACC
-    status: prototype
+    status: ready
     context:
       shouldSkipPattern: false
 
diff --git a/src/lib/_imports/components/c-page/config.yml b/src/lib/_imports/components/c-page/config.yml
new file mode 100644
index 000000000..df0aed805
--- /dev/null
+++ b/src/lib/_imports/components/c-page/config.yml
@@ -0,0 +1 @@
+status: ready
diff --git a/src/lib/_imports/tools/x-pagination/config.yml b/src/lib/_imports/tools/x-pagination/config.yml
new file mode 100644
index 000000000..df0aed805
--- /dev/null
+++ b/src/lib/_imports/tools/x-pagination/config.yml
@@ -0,0 +1 @@
+status: ready

From 2f1573752693d53007f3c16221a94aaef5bed612 Mon Sep 17 00:00:00 2001
From: Wesley B <62723358+wesleyboar@users.noreply.github.com>
Date: Mon, 17 Feb 2025 15:32:09 -0600
Subject: [PATCH 25/25] fix(pagination): bootstrap discrepancy

---
 src/lib/_imports/bootstrap4/pagination.postcss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/_imports/bootstrap4/pagination.postcss b/src/lib/_imports/bootstrap4/pagination.postcss
index 8f01fc812..81b46ec87 100644
--- a/src/lib/_imports/bootstrap4/pagination.postcss
+++ b/src/lib/_imports/bootstrap4/pagination.postcss
@@ -13,8 +13,6 @@
 
   & .page-link {
     @mixin pagination__page-link;
-
-    margin-left: unset;
   }
 }
 
@@ -62,6 +60,8 @@
 }
 
 .page-link {
+  margin-left: unset;
+
   &:focus {
     box-shadow: none;
   }