From 123265b9b270da8f615d3b90bd6f9a1de3141574 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 17 Feb 2024 12:11:21 -0800
Subject: [PATCH 1/9] feat(pagination): Add component tokens

---
 .../src/components/pagination/pagination.scss | 101 ++++++++++++++----
 .../pagination/pagination.stories.ts          |  22 ++++
 .../src/demos/pagination.html                 |  67 +++++++++---
 3 files changed, 159 insertions(+), 31 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 3e99f956fe9..bdc9cb8787c 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -1,32 +1,80 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+
+ * @prop --calcite-pagination-background-color-active: Specifies the background color of the pagination items while active.
+ * @prop --calcite-pagination-background-color-hover: Specifies the background color of the pagination items while hovered.
+ * @prop --calcite-pagination-background-color: Specifies the background color of the pagination items.
+ * @prop --calcite-pagination-border-color-hover: Specifies the border color the pagination items while hovered.
+ * @prop --calcite-pagination-border-color-selected: Specifies the border color of the pagination items when selected.
+ * @prop --calcite-pagination-text-color-hover: Specifies the text color of the pagination items items while hovered.
+ * @prop --calcite-pagination-text-color-selected: Specifies the text color of the pagination items when selected.
+ * @prop --calcite-pagination-text-color: Specifies the text color of the pagination items.
+ * @prop --calcite-pagination-arrow-background-color-active: Specifies the background color of the arrow items while active.
+ * @prop --calcite-pagination-arrow-background-color-hover: Specifies the background color of the arrow items while hovered.
+ * @prop --calcite-pagination-arrow-background-color: Specifies the background color of the arrow items.
+ * @prop --calcite-pagination-arrow-color-hover: Specifies the background color of the arrow items while hovered.
+ * @prop --calcite-pagination-arrow-color: Specifies the background color of the arrow items.
+ *
+ */
+
+/**
+  * Local props
+  * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
+  *
+  * --calcite-internal-pagination-min-inline-size
+  * --calcite-internal-pagination-block-size
+*/
+
 :host {
   @apply flex;
   writing-mode: horizontal-tb;
+  --calcite-pagination-background-color-active: transparent;
+  --calcite-pagination-background-color-hover: transparent;
+  --calcite-pagination-background-color: transparent;
+  --calcite-pagination-border-color-hover: var(--calcite-color-border-2);
+  --calcite-pagination-border-color-selected: var(--calcite-color-brand);
+  --calcite-pagination-text-color-hover: var(--calcite-color-text-1);
+  --calcite-pagination-text-color-selected: var(--calcite-color-text-1);
+  --calcite-pagination-text-color: var(--calcite-color-text-3);
+  --calcite-pagination-arrow-background-color-active: var(--calcite-color-foreground-3);
+  --calcite-pagination-arrow-background-color-hover: var(--calcite-color-foreground-2);
+  --calcite-pagination-arrow-background-color: var(--calcite-pagination-background-color);
+  --calcite-pagination-arrow-text-color-hover: var(--calcite-color-brand);
+  --calcite-pagination-arrow-text-color: var(--calcite-pagination-text-color);
 }
 
 :host([scale="s"]) {
+  --calcite-internal-pagination-min-inline-size: theme("width.6");
+  --calcite-internal-pagination-block-size: theme("height.6");
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-n2h h-6 px-1;
-    min-inline-size: theme("width.6");
+    @apply text-n2h  px-1;
   }
 }
 
 :host([scale="m"]) {
+  --calcite-internal-pagination-min-inline-size: theme("width.8");
+  --calcite-internal-pagination-block-size: theme("height.8");
+
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-n1h h-8 px-2;
-    min-inline-size: theme("width.8");
+    @apply text-n1h px-2;
   }
 }
 
 :host([scale="l"]) {
+  --calcite-internal-pagination-min-inline-size: theme("width.11");
+  --calcite-internal-pagination-block-size: theme("height.11");
+
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-0h h-11;
-    min-inline-size: theme("width.11");
+    @apply text-0h;
   }
 
   & .chevron {
@@ -38,6 +86,12 @@
     @apply px-3;
   }
 }
+.chevron,
+.page,
+.ellipsis {
+  min-inline-size: var(--calcite-internal-pagination-min-inline-size);
+  block-size: var(--calcite-internal-pagination-block-size);
+}
 
 // focus styles
 :host button {
@@ -50,10 +104,7 @@
 .chevron,
 .page,
 .ellipsis {
-  @apply p-0
-    m-0
-    text-0h
-    text-color-3
+  @apply text-0h
     font-inherit
     box-border
     flex
@@ -61,8 +112,11 @@
     border-none
     border-opacity-0
     justify-center
-    align-baseline
-    bg-transparent;
+    align-baseline;
+  padding: 0;
+  margin: 0;
+  color: var(--calcite-pagination-text-color);
+  background-color: var(--calcite-pagination-background-color);
 }
 
 .chevron,
@@ -71,29 +125,38 @@
   border-block: 2px solid transparent;
 
   &:hover {
-    @apply text-color-1 transition-default;
+    @apply transition-default;
+    color: var(--calcite-pagination-text-color-hover);
+    background-color: var(--calcite-pagination-background-color-hover);
+  }
+  &:active {
+    background-color: var(--calcite-pagination-border-color-active);
   }
 }
 
 .page {
   &:hover {
-    @apply border-b-color-2;
+    border-block-end-color: var(--calcite-pagination-border-color-hover);
   }
   &.selected {
-    @apply text-color-1 border-b-color-brand font-medium;
+    font-weight: var(--calcite-font-weight-medium);
+    color: var(--calcite-pagination-text-color-selected);
+    border-block-end-color: var(--calcite-pagination-border-color-selected);
   }
 }
 
 .chevron {
+  background-color: var(--calcite-pagination-arrow-background-color);
   &:hover {
-    @apply bg-foreground-2;
-    color: theme("backgroundColor.brand");
+    background-color: var(--calcite-pagination-arrow-background-color-hover);
+    color: var(--calcite-pagination-arrow-text-color-hover);
   }
   &:active {
-    @apply bg-foreground-3;
+    background-color: var(--calcite-pagination-arrow-background-color-active);
+    color: var(--calcite-pagination-arrow-text-color-hover);
   }
   &.disabled {
-    @apply pointer-events-none bg-transparent;
+    @apply pointer-events-none;
     & > calcite-icon {
       @apply opacity-disabled;
     }
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index 8043fcdd94e..db947dc2447 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -116,3 +116,25 @@ export const arabicNumberingSystemAndRTL_TestOnly = (): string =>
 arabicNumberingSystemAndRTL_TestOnly.parameters = {
   chromatic: { diffThreshold: 1 },
 };
+
+export const theming_TestOnly = (): string => html`
+  <calcite-pagination
+    total-items="1200"
+    page-size="100"
+    start-item="1"
+    style="
+  --calcite-pagination-text-color: green;
+  --calcite-pagination-text-color-hover: darkgreen;
+  --calcite-pagination-text-color-selected:teal;
+  --calcite-pagination-background-color: lightyellow;
+  --calcite-pagination-background-color-hover: yellow;
+  --calcite-pagination-border-color-selected: green;
+  --calcite-pagination-border-color-hover:orange;
+  --calcite-pagination-arrow-text-color: blue;
+  --calcite-pagination-arrow-text-color-hover: pink;
+  --calcite-pagination-arrow-background-color: lightyellow;
+  --calcite-pagination-arrow-background-color-hover: orange;
+  --calcite-pagination-arrow-background-color-active: gold;
+        
+  ></calcite-pagination>
+`;
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index 76090b9c009..2e3cbb97da7 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -27,6 +27,21 @@
         padding: 15px;
         flex: 1;
       }
+
+      .themed-example {
+        --calcite-pagination-text-color: green;
+        --calcite-pagination-text-color-hover: darkgreen;
+        --calcite-pagination-text-color-selected: teal;
+        --calcite-pagination-background-color: lightyellow;
+        --calcite-pagination-background-color-hover: yellow;
+        --calcite-pagination-border-color-selected: green;
+        --calcite-pagination-border-color-hover: orange;
+        --calcite-pagination-arrow-text-color: blue;
+        --calcite-pagination-arrow-text-color-hover: pink;
+        --calcite-pagination-arrow-background-color: lightyellow;
+        --calcite-pagination-arrow-background-color-hover: orange;
+        --calcite-pagination-arrow-background-color-active: gold;
+      }
     </style>
   </head>
 
@@ -43,7 +58,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             <calcite-pagination total-items="300" page-size="100" start-item="1" scale="s"></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="s">Hello</calcite-pagination>
+            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="s"></calcite-pagination>
           </div>
 
           <div class="child">
@@ -51,6 +66,37 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
           </div>
         </div>
 
+        <!-- Medium -->
+        <div class="parent">
+          <div class="child">themed</div>
+
+          <div class="child">
+            <calcite-pagination
+              class="themed-example"
+              total-items="300"
+              page-size="100"
+              start-item="1"
+            ></calcite-pagination>
+          </div>
+          <div class="child">
+            <calcite-pagination
+              class="themed-example"
+              total-items="1200"
+              page-size="100"
+              start-item="1"
+            ></calcite-pagination>
+          </div>
+
+          <div class="child">
+            <calcite-pagination
+              class="themed-example"
+              total-items="150000"
+              page-size="100"
+              start-item="5400"
+            ></calcite-pagination>
+          </div>
+        </div>
+
         <!-- Medium -->
         <div class="parent">
           <div class="child">medium</div>
@@ -59,7 +105,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             <calcite-pagination total-items="300" page-size="100" start-item="1" scale="m"></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="m">Hello</calcite-pagination>
+            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="m"></calcite-pagination>
           </div>
 
           <div class="child">
@@ -75,7 +121,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             <calcite-pagination total-items="300" page-size="100" start-item="1" scale="l"></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="l">Hello</calcite-pagination>
+            <calcite-pagination total-items="1200" page-size="100" start-item="1" scale="l"></calcite-pagination>
           </div>
 
           <div class="child">
@@ -98,8 +144,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             ></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="s"
-              >Hello
+            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="s">
             </calcite-pagination>
           </div>
 
@@ -131,8 +176,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             ></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="m"
-              >Hello
+            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="m">
             </calcite-pagination>
           </div>
 
@@ -164,8 +208,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
             ></calcite-pagination>
           </div>
           <div class="child">
-            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="l"
-              >Hello
+            <calcite-pagination lang="fr" group-separator total-items="1200" page-size="100" start-item="1" scale="l">
             </calcite-pagination>
           </div>
 
@@ -204,7 +247,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               page-size="100"
               start-item="1"
               scale="s"
-              >Hello
+            >
             </calcite-pagination>
           </div>
 
@@ -243,7 +286,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               page-size="100"
               start-item="1"
               scale="m"
-              >Hello
+            >
             </calcite-pagination>
           </div>
 
@@ -282,7 +325,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               page-size="100"
               start-item="1"
               scale="l"
-              >Hello
+            >
             </calcite-pagination>
           </div>
 

From 5b044d6772b42385fd58b5f68100a87fe27dafd3 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 17 Feb 2024 12:13:36 -0800
Subject: [PATCH 2/9] Clean up

---
 .../src/components/pagination/pagination.scss                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index bdc9cb8787c..1feb0ae4105 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -15,8 +15,8 @@
  * @prop --calcite-pagination-arrow-background-color-active: Specifies the background color of the arrow items while active.
  * @prop --calcite-pagination-arrow-background-color-hover: Specifies the background color of the arrow items while hovered.
  * @prop --calcite-pagination-arrow-background-color: Specifies the background color of the arrow items.
- * @prop --calcite-pagination-arrow-color-hover: Specifies the background color of the arrow items while hovered.
- * @prop --calcite-pagination-arrow-color: Specifies the background color of the arrow items.
+ * @prop --calcite-pagination-arrow-text-color-hover: Specifies the text color of the arrow items while hovered.
+ * @prop --calcite-pagination-arrow-text-color: Specifies the text color of the arrow items.
  *
  */
 

From 7ee706b5739eb8312c2d762edcc3d64b2926463a Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sun, 18 Feb 2024 09:57:15 -0800
Subject: [PATCH 3/9] Clean up

---
 .../src/components/pagination/pagination.scss | 31 +++++++++----------
 .../pagination/pagination.stories.ts          | 25 +++++++--------
 2 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 1feb0ae4105..f6afd21b737 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -24,8 +24,8 @@
   * Local props
   * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
   *
-  * --calcite-internal-pagination-min-inline-size
-  * --calcite-internal-pagination-block-size
+  * --calcite-internal-pagination-item-size
+  * --calcite-internal-pagination-item-space
 */
 
 :host {
@@ -47,29 +47,30 @@
 }
 
 :host([scale="s"]) {
-  --calcite-internal-pagination-min-inline-size: theme("width.6");
-  --calcite-internal-pagination-block-size: theme("height.6");
+  --calcite-internal-pagination-item-size: theme("width.6");
+  --calcite-internal-pagination-item-space: theme("width.1");
+
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-n2h  px-1;
+    @apply text-n2h;
   }
 }
 
 :host([scale="m"]) {
-  --calcite-internal-pagination-min-inline-size: theme("width.8");
-  --calcite-internal-pagination-block-size: theme("height.8");
+  --calcite-internal-pagination-item-size: theme("width.8");
+  --calcite-internal-pagination-item-space: theme("width.2");
 
   & .chevron,
   & .page,
   & .ellipsis {
-    @apply text-n1h px-2;
+    @apply text-n1h;
   }
 }
 
 :host([scale="l"]) {
-  --calcite-internal-pagination-min-inline-size: theme("width.11");
-  --calcite-internal-pagination-block-size: theme("height.11");
+  --calcite-internal-pagination-item-size: theme("width.11");
+  --calcite-internal-pagination-item-space: theme("width.3");
 
   & .chevron,
   & .page,
@@ -80,17 +81,12 @@
   & .chevron {
     @apply px-2.5;
   }
-
-  & .page,
-  & .ellipsis {
-    @apply px-3;
-  }
 }
 .chevron,
 .page,
 .ellipsis {
-  min-inline-size: var(--calcite-internal-pagination-min-inline-size);
-  block-size: var(--calcite-internal-pagination-block-size);
+  inline-size: var(--calcite-internal-pagination-item-size);
+  block-size: var(--calcite-internal-pagination-item-size);
 }
 
 // focus styles
@@ -115,6 +111,7 @@
     align-baseline;
   padding: 0;
   margin: 0;
+  padding-inline: var(--calcite-internal-pagination-item-space);
   color: var(--calcite-pagination-text-color);
   background-color: var(--calcite-pagination-background-color);
 }
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index db947dc2447..2b8957856f6 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -123,18 +123,17 @@ export const theming_TestOnly = (): string => html`
     page-size="100"
     start-item="1"
     style="
-  --calcite-pagination-text-color: green;
-  --calcite-pagination-text-color-hover: darkgreen;
-  --calcite-pagination-text-color-selected:teal;
-  --calcite-pagination-background-color: lightyellow;
-  --calcite-pagination-background-color-hover: yellow;
-  --calcite-pagination-border-color-selected: green;
-  --calcite-pagination-border-color-hover:orange;
-  --calcite-pagination-arrow-text-color: blue;
-  --calcite-pagination-arrow-text-color-hover: pink;
-  --calcite-pagination-arrow-background-color: lightyellow;
-  --calcite-pagination-arrow-background-color-hover: orange;
-  --calcite-pagination-arrow-background-color-active: gold;
-        
+    --calcite-pagination-text-color: green;
+    --calcite-pagination-text-color-hover: darkgreen;
+    --calcite-pagination-text-color-selected:teal;
+    --calcite-pagination-background-color: lightyellow;
+    --calcite-pagination-background-color-hover: yellow;
+    --calcite-pagination-border-color-selected: green;
+    --calcite-pagination-border-color-hover:orange;
+    --calcite-pagination-arrow-text-color: blue;
+    --calcite-pagination-arrow-text-color-hover: pink;
+    --calcite-pagination-arrow-background-color: lightyellow;
+    --calcite-pagination-arrow-background-color-hover: orange;
+    --calcite-pagination-arrow-background-color-active: gold;"
   ></calcite-pagination>
 `;

From eff5a9b2a5bd1587c7bf02c2f4ef75546b8ee1d0 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sun, 18 Feb 2024 10:29:37 -0800
Subject: [PATCH 4/9] Clean up

---
 .../src/components/pagination/pagination.scss | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index f6afd21b737..814bf614511 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -47,8 +47,8 @@
 }
 
 :host([scale="s"]) {
-  --calcite-internal-pagination-item-size: theme("width.6");
-  --calcite-internal-pagination-item-space: theme("width.1");
+  --calcite-internal-pagination-item-size: var(--calcite-size-xxl);
+  --calcite-internal-pagination-item-space: var(--calcite-size-xxs);
 
   & .chevron,
   & .page,
@@ -58,8 +58,8 @@
 }
 
 :host([scale="m"]) {
-  --calcite-internal-pagination-item-size: theme("width.8");
-  --calcite-internal-pagination-item-space: theme("width.2");
+  --calcite-internal-pagination-item-size: var(--calcite-size-xxxl);
+  --calcite-internal-pagination-item-space: var(--calcite-size-sm);
 
   & .chevron,
   & .page,
@@ -69,8 +69,8 @@
 }
 
 :host([scale="l"]) {
-  --calcite-internal-pagination-item-size: theme("width.11");
-  --calcite-internal-pagination-item-space: theme("width.3");
+  --calcite-internal-pagination-item-size: 44px;
+  --calcite-internal-pagination-item-space: var(--calcite-size-md);
 
   & .chevron,
   & .page,
@@ -82,12 +82,6 @@
     @apply px-2.5;
   }
 }
-.chevron,
-.page,
-.ellipsis {
-  inline-size: var(--calcite-internal-pagination-item-size);
-  block-size: var(--calcite-internal-pagination-item-size);
-}
 
 // focus styles
 :host button {
@@ -111,6 +105,8 @@
     align-baseline;
   padding: 0;
   margin: 0;
+  min-inline-size: var(--calcite-internal-pagination-item-size);
+  block-size: var(--calcite-internal-pagination-item-size);
   padding-inline: var(--calcite-internal-pagination-item-space);
   color: var(--calcite-pagination-text-color);
   background-color: var(--calcite-pagination-background-color);

From 242260fac037da8b2efc47f9a698d5a55b790dd1 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sun, 18 Feb 2024 12:04:10 -0800
Subject: [PATCH 5/9] Clean up

---
 .../src/components/pagination/pagination.scss |  12 +-
 .../pagination/pagination.stories.ts          |   4 +-
 .../src/demos/pagination.html                 | 199 +++++++++++++++++-
 3 files changed, 205 insertions(+), 10 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 814bf614511..bcc6e42f9fd 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -15,8 +15,8 @@
  * @prop --calcite-pagination-arrow-background-color-active: Specifies the background color of the arrow items while active.
  * @prop --calcite-pagination-arrow-background-color-hover: Specifies the background color of the arrow items while hovered.
  * @prop --calcite-pagination-arrow-background-color: Specifies the background color of the arrow items.
- * @prop --calcite-pagination-arrow-text-color-hover: Specifies the text color of the arrow items while hovered.
- * @prop --calcite-pagination-arrow-text-color: Specifies the text color of the arrow items.
+ * @prop --calcite-pagination-arrow-icon-color-hover: Specifies the icon color of the arrow items while hovered.
+ * @prop --calcite-pagination-arrow-icon-color: Specifies the icon color of the arrow items.
  *
  */
 
@@ -42,8 +42,8 @@
   --calcite-pagination-arrow-background-color-active: var(--calcite-color-foreground-3);
   --calcite-pagination-arrow-background-color-hover: var(--calcite-color-foreground-2);
   --calcite-pagination-arrow-background-color: var(--calcite-pagination-background-color);
-  --calcite-pagination-arrow-text-color-hover: var(--calcite-color-brand);
-  --calcite-pagination-arrow-text-color: var(--calcite-pagination-text-color);
+  --calcite-pagination-arrow-icon-color-hover: var(--calcite-color-brand);
+  --calcite-pagination-arrow-icon-color: var(--calcite-pagination-text-color);
 }
 
 :host([scale="s"]) {
@@ -142,11 +142,11 @@
   background-color: var(--calcite-pagination-arrow-background-color);
   &:hover {
     background-color: var(--calcite-pagination-arrow-background-color-hover);
-    color: var(--calcite-pagination-arrow-text-color-hover);
+    color: var(--calcite-pagination-arrow-icon-color-hover);
   }
   &:active {
     background-color: var(--calcite-pagination-arrow-background-color-active);
-    color: var(--calcite-pagination-arrow-text-color-hover);
+    color: var(--calcite-pagination-arrow-icon-color-hover);
   }
   &.disabled {
     @apply pointer-events-none;
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index 2b8957856f6..5b934a23b46 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -130,8 +130,8 @@ export const theming_TestOnly = (): string => html`
     --calcite-pagination-background-color-hover: yellow;
     --calcite-pagination-border-color-selected: green;
     --calcite-pagination-border-color-hover:orange;
-    --calcite-pagination-arrow-text-color: blue;
-    --calcite-pagination-arrow-text-color-hover: pink;
+    --calcite-pagination-arrow-icon-color: blue;
+    --calcite-pagination-arrow-icon-color-hover: pink;
     --calcite-pagination-arrow-background-color: lightyellow;
     --calcite-pagination-arrow-background-color-hover: orange;
     --calcite-pagination-arrow-background-color-active: gold;"
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index 2e3cbb97da7..eab2a235db7 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -36,8 +36,8 @@
         --calcite-pagination-background-color-hover: yellow;
         --calcite-pagination-border-color-selected: green;
         --calcite-pagination-border-color-hover: orange;
-        --calcite-pagination-arrow-text-color: blue;
-        --calcite-pagination-arrow-text-color-hover: pink;
+        --calcite-pagination-arrow-icon-color: blue;
+        --calcite-pagination-arrow-icon-color-hover: pink;
         --calcite-pagination-arrow-background-color: lightyellow;
         --calcite-pagination-arrow-background-color-hover: orange;
         --calcite-pagination-arrow-background-color-active: gold;
@@ -48,9 +48,204 @@
   <body>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
+      <!-- responsive testing from storybook-->
 
       <!-- Small -->
       <div class="flex">
+        <div class="breakpoint-stories-container">
+          <style>
+            .breakpoint-stories-container {
+              display: flex;
+              flex-direction: column;
+              gap: 10px;
+              justify-content: flex-start;
+            }
+
+            .breakpoint-story-container {
+              display: flex;
+            }
+
+            .breakpoint-story-container > * {
+              flex: 1;
+            }
+          </style>
+          <calcite-pagination
+            scale="m"
+            start-item="1"
+            lang="en"
+            numbering-system="latn"
+            total-items="123456789"
+            page-size="10"
+          ></calcite-pagination>
+          <strong>scale = s</strong>
+          <strong>breakpoint = xxsmall</strong>
+          <div class="breakpoint-story-container" style="width: 319px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="s"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = xsmall</strong>
+          <div class="breakpoint-story-container" style="width: 475px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="s"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = small</strong>
+          <div class="breakpoint-story-container" style="width: 767px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="s"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = medium</strong>
+          <div class="breakpoint-story-container" style="width: 1151px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="s"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = large</strong>
+          <div class="breakpoint-story-container" style="width: 1439px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="s"
+            ></calcite-pagination>
+          </div>
+          <strong>scale = m</strong>
+          <strong>breakpoint = xxsmall</strong>
+          <div class="breakpoint-story-container" style="width: 319px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="m"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = xsmall</strong>
+          <div class="breakpoint-story-container" style="width: 475px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="m"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = small</strong>
+          <div class="breakpoint-story-container" style="width: 767px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="m"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = medium</strong>
+          <div class="breakpoint-story-container" style="width: 1151px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="m"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = large</strong>
+          <div class="breakpoint-story-container" style="width: 1439px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="m"
+            ></calcite-pagination>
+          </div>
+          <strong>scale = l</strong>
+          <strong>breakpoint = xxsmall</strong>
+          <div class="breakpoint-story-container" style="width: 319px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="l"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = xsmall</strong>
+          <div class="breakpoint-story-container" style="width: 475px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="l"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = small</strong>
+          <div class="breakpoint-story-container" style="width: 767px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="l"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = medium</strong>
+          <div class="breakpoint-story-container" style="width: 1151px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="l"
+            ></calcite-pagination>
+          </div>
+          <strong>breakpoint = large</strong>
+          <div class="breakpoint-story-container" style="width: 1439px">
+            <calcite-pagination
+              lang="en"
+              numbering-system="latn"
+              total-items="150000"
+              page-size="100"
+              start-item="149901"
+              scale="l"
+            ></calcite-pagination>
+          </div>
+        </div>
         <div class="parent">
           <div class="child">small</div>
 

From 13522c186c4103076641f025fe72847cb86a56cb Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sun, 18 Feb 2024 12:21:12 -0800
Subject: [PATCH 6/9] Clean up

---
 .../src/components/pagination/pagination.scss |  7 +++--
 .../pagination/pagination.stories.ts          | 27 ++++++++++---------
 .../src/demos/pagination.html                 | 24 +++++++++++++++++
 3 files changed, 44 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index bcc6e42f9fd..532f5d1bd39 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -15,6 +15,7 @@
  * @prop --calcite-pagination-arrow-background-color-active: Specifies the background color of the arrow items while active.
  * @prop --calcite-pagination-arrow-background-color-hover: Specifies the background color of the arrow items while hovered.
  * @prop --calcite-pagination-arrow-background-color: Specifies the background color of the arrow items.
+ * @prop --calcite-pagination-arrow-icon-color-active: Specifies the icon color of the arrow items while active.
  * @prop --calcite-pagination-arrow-icon-color-hover: Specifies the icon color of the arrow items while hovered.
  * @prop --calcite-pagination-arrow-icon-color: Specifies the icon color of the arrow items.
  *
@@ -42,6 +43,7 @@
   --calcite-pagination-arrow-background-color-active: var(--calcite-color-foreground-3);
   --calcite-pagination-arrow-background-color-hover: var(--calcite-color-foreground-2);
   --calcite-pagination-arrow-background-color: var(--calcite-pagination-background-color);
+  --calcite-pagination-arrow-icon-color-active: var(--calcite-color-brand);
   --calcite-pagination-arrow-icon-color-hover: var(--calcite-color-brand);
   --calcite-pagination-arrow-icon-color: var(--calcite-pagination-text-color);
 }
@@ -123,7 +125,7 @@
     background-color: var(--calcite-pagination-background-color-hover);
   }
   &:active {
-    background-color: var(--calcite-pagination-border-color-active);
+    background-color: var(--calcite-pagination-background-color-active);
   }
 }
 
@@ -131,6 +133,7 @@
   &:hover {
     border-block-end-color: var(--calcite-pagination-border-color-hover);
   }
+
   &.selected {
     font-weight: var(--calcite-font-weight-medium);
     color: var(--calcite-pagination-text-color-selected);
@@ -146,7 +149,7 @@
   }
   &:active {
     background-color: var(--calcite-pagination-arrow-background-color-active);
-    color: var(--calcite-pagination-arrow-icon-color-hover);
+    color: var(--calcite-pagination-arrow-icon-color-active);
   }
   &.disabled {
     @apply pointer-events-none;
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index 5b934a23b46..057f2440163 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -123,17 +123,20 @@ export const theming_TestOnly = (): string => html`
     page-size="100"
     start-item="1"
     style="
-    --calcite-pagination-text-color: green;
-    --calcite-pagination-text-color-hover: darkgreen;
-    --calcite-pagination-text-color-selected:teal;
-    --calcite-pagination-background-color: lightyellow;
-    --calcite-pagination-background-color-hover: yellow;
-    --calcite-pagination-border-color-selected: green;
-    --calcite-pagination-border-color-hover:orange;
-    --calcite-pagination-arrow-icon-color: blue;
-    --calcite-pagination-arrow-icon-color-hover: pink;
-    --calcite-pagination-arrow-background-color: lightyellow;
-    --calcite-pagination-arrow-background-color-hover: orange;
-    --calcite-pagination-arrow-background-color-active: gold;"
+      --calcite-pagination-text-color: green;
+      --calcite-pagination-text-color-hover: darkgreen;
+      --calcite-pagination-text-color-selected: teal;
+      --calcite-pagination-background-color: lightyellow;
+      --calcite-pagination-background-color-hover: yellow;
+      --calcite-pagination-background-color-active: gold;
+      --calcite-pagination-border-color-selected: green;
+      --calcite-pagination-border-color-hover: orange;
+      --calcite-pagination-arrow-icon-color: blue;
+      --calcite-pagination-arrow-icon-color-hover: pink;
+      --calcite-pagination-arrow-icon-color-active: red;
+      --calcite-pagination-arrow-background-color: lightyellow;
+      --calcite-pagination-arrow-background-color-hover: orange;
+      --calcite-pagination-arrow-background-color-active: gold;
+    "
   ></calcite-pagination>
 `;
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index eab2a235db7..74ab07faff3 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -34,10 +34,12 @@
         --calcite-pagination-text-color-selected: teal;
         --calcite-pagination-background-color: lightyellow;
         --calcite-pagination-background-color-hover: yellow;
+        --calcite-pagination-background-color-active: gold;
         --calcite-pagination-border-color-selected: green;
         --calcite-pagination-border-color-hover: orange;
         --calcite-pagination-arrow-icon-color: blue;
         --calcite-pagination-arrow-icon-color-hover: pink;
+        --calcite-pagination-arrow-icon-color-active: red;
         --calcite-pagination-arrow-background-color: lightyellow;
         --calcite-pagination-arrow-background-color-hover: orange;
         --calcite-pagination-arrow-background-color-active: gold;
@@ -69,6 +71,28 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
               flex: 1;
             }
           </style>
+          <calcite-pagination
+            total-items="1200"
+            page-size="100"
+            start-item="1"
+            style="
+              --calcite-pagination-text-color: green;
+              --calcite-pagination-text-color-hover: darkgreen;
+              --calcite-pagination-text-color-selected: teal;
+              --calcite-pagination-background-color: lightyellow;
+              --calcite-pagination-background-color-hover: yellow;
+              --calcite-pagination-background-color-active: gold;
+              --calcite-pagination-border-color-selected: green;
+              --calcite-pagination-border-color-hover: orange;
+              --calcite-pagination-arrow-icon-color: blue;
+              --calcite-pagination-arrow-icon-color-hover: pink;
+              --calcite-pagination-arrow-icon-color-active: red;
+              --calcite-pagination-arrow-background-color: lightyellow;
+              --calcite-pagination-arrow-background-color-hover: orange;
+              --calcite-pagination-arrow-background-color-active: gold;
+            "
+          ></calcite-pagination>
+
           <calcite-pagination
             scale="m"
             start-item="1"

From b931ad47af99706a68a69655c4ced36ea455d7f6 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 20 Feb 2024 17:43:47 -0800
Subject: [PATCH 7/9] Clean up

---
 .../src/components/pagination/pagination.scss               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
index 532f5d1bd39..3b34d4e7e6e 100644
--- a/packages/calcite-components/src/components/pagination/pagination.scss
+++ b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -1,3 +1,5 @@
+@import "~@esri/calcite-design-tokens/dist/scss/core";
+
 /**
  * CSS Custom Properties
  *
@@ -20,7 +22,6 @@
  * @prop --calcite-pagination-arrow-icon-color: Specifies the icon color of the arrow items.
  *
  */
-
 /**
   * Local props
   * These properties are intended for internal component use only. It is not recommended that these properties be overwritten.
@@ -28,7 +29,6 @@
   * --calcite-internal-pagination-item-size
   * --calcite-internal-pagination-item-space
 */
-
 :host {
   @apply flex;
   writing-mode: horizontal-tb;
@@ -71,7 +71,7 @@
 }
 
 :host([scale="l"]) {
-  --calcite-internal-pagination-item-size: 44px;
+  --calcite-internal-pagination-item-size: #{$calcite-size-44};
   --calcite-internal-pagination-item-space: var(--calcite-size-md);
 
   & .chevron,

From 3b7800ee2fe73d18fb701e15d2c631f7d4e27af9 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 20 Feb 2024 19:10:22 -0800
Subject: [PATCH 8/9] Clean up

---
 .../calcite-components/src/components.d.ts    |  84 ----
 .../pagination/pagination.stories.ts          |  59 +--
 .../src/demos/pagination.html                 | 416 +++++++++---------
 3 files changed, 242 insertions(+), 317 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 93e23ce88dc..8f6fcd21905 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -779,36 +779,6 @@ export namespace Components {
          */
         "thumbnailPosition": LogicalFlowPosition;
     }
-    interface CalciteCardGroup {
-        /**
-          * When `true`, interaction is prevented and the component is displayed with lower opacity.
-         */
-        "disabled": boolean;
-        /**
-          * Accessible name for the component.
-         */
-        "label": string;
-        /**
-          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
-         */
-        "scale": Scale;
-        /**
-          * Specifies the component's selected items.
-          * @readonly
-         */
-        "selectedItems": HTMLCalciteCardElement[];
-        /**
-          * Specifies the selection mode of the component.
-         */
-        "selectionMode": Extract<
-    "multiple" | "single" | "single-persist" | "none",
-    SelectionMode
-  >;
-        /**
-          * Sets focus on the component's first focusable element.
-         */
-        "setFocus": () => Promise<void>;
-    }
     interface CalciteCheckbox {
         /**
           * When `true`, the component is checked.
@@ -5449,10 +5419,6 @@ export interface CalciteCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteCardElement;
 }
-export interface CalciteCardGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLCalciteCardGroupElement;
-}
 export interface CalciteCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteCheckboxElement;
@@ -5913,23 +5879,6 @@ declare global {
         prototype: HTMLCalciteCardElement;
         new (): HTMLCalciteCardElement;
     };
-    interface HTMLCalciteCardGroupElementEventMap {
-        "calciteCardGroupSelect": void;
-    }
-    interface HTMLCalciteCardGroupElement extends Components.CalciteCardGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLCalciteCardGroupElementEventMap>(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent<HTMLCalciteCardGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLCalciteCardGroupElementEventMap>(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent<HTMLCalciteCardGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLCalciteCardGroupElement: {
-        prototype: HTMLCalciteCardGroupElement;
-        new (): HTMLCalciteCardGroupElement;
-    };
     interface HTMLCalciteCheckboxElementEventMap {
         "calciteInternalCheckboxBlur": boolean;
         "calciteCheckboxChange": void;
@@ -7410,7 +7359,6 @@ declare global {
         "calcite-block-section": HTMLCalciteBlockSectionElement;
         "calcite-button": HTMLCalciteButtonElement;
         "calcite-card": HTMLCalciteCardElement;
-        "calcite-card-group": HTMLCalciteCardGroupElement;
         "calcite-checkbox": HTMLCalciteCheckboxElement;
         "calcite-chip": HTMLCalciteChipElement;
         "calcite-chip-group": HTMLCalciteChipGroupElement;
@@ -8135,36 +8083,6 @@ declare namespace LocalJSX {
          */
         "thumbnailPosition"?: LogicalFlowPosition;
     }
-    interface CalciteCardGroup {
-        /**
-          * When `true`, interaction is prevented and the component is displayed with lower opacity.
-         */
-        "disabled"?: boolean;
-        /**
-          * Accessible name for the component.
-         */
-        "label": string;
-        /**
-          * Emits when the component's selection changes and the selectionMode is not `none`.
-         */
-        "onCalciteCardGroupSelect"?: (event: CalciteCardGroupCustomEvent<void>) => void;
-        /**
-          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
-         */
-        "scale"?: Scale;
-        /**
-          * Specifies the component's selected items.
-          * @readonly
-         */
-        "selectedItems"?: HTMLCalciteCardElement[];
-        /**
-          * Specifies the selection mode of the component.
-         */
-        "selectionMode"?: Extract<
-    "multiple" | "single" | "single-persist" | "none",
-    SelectionMode
-  >;
-    }
     interface CalciteCheckbox {
         /**
           * When `true`, the component is checked.
@@ -13025,7 +12943,6 @@ declare namespace LocalJSX {
         "calcite-block-section": CalciteBlockSection;
         "calcite-button": CalciteButton;
         "calcite-card": CalciteCard;
-        "calcite-card-group": CalciteCardGroup;
         "calcite-checkbox": CalciteCheckbox;
         "calcite-chip": CalciteChip;
         "calcite-chip-group": CalciteChipGroup;
@@ -13139,7 +13056,6 @@ declare module "@stencil/core" {
             "calcite-block-section": LocalJSX.CalciteBlockSection & JSXBase.HTMLAttributes<HTMLCalciteBlockSectionElement>;
             "calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes<HTMLCalciteButtonElement>;
             "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes<HTMLCalciteCardElement>;
-            "calcite-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes<HTMLCalciteCardGroupElement>;
             "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes<HTMLCalciteCheckboxElement>;
             "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes<HTMLCalciteChipElement>;
             "calcite-chip-group": LocalJSX.CalciteChipGroup & JSXBase.HTMLAttributes<HTMLCalciteChipGroupElement>;
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index 057f2440163..0f04ba54c2d 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -88,41 +88,47 @@ export const responsiveTinyNumberLastPage_TestOnly = (): string =>
   createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "last" }));
 
 export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
-  <calcite-pagination
-    class="calcite-mode-dark"
-    start-item="1"
-    lang="fr"
-    group-separator
-    total-items="123456789"
-    page-size="10"
-    scale="l"
-  >
-  </calcite-pagination>
+  <div style="width:100%">
+    <calcite-pagination
+      class="calcite-mode-dark"
+      start-item="1"
+      lang="fr"
+      group-separator
+      total-items="123456789"
+      page-size="10"
+      scale="l"
+    >
+    </calcite-pagination>
+  </div>
 `;
 
 darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const arabicNumberingSystemAndRTL_TestOnly = (): string =>
-  html`<calcite-pagination
-    dir="rtl"
-    numbering-system="arab"
-    start-item="1"
-    lang="fr"
-    total-items="123456789"
-    page-size="10"
-  >
-  </calcite-pagination>`;
+export const arabicNumberingSystemAndRTL_TestOnly = (): string => html`
+  <div style="width:100%">
+    <calcite-pagination
+      dir="rtl"
+      numbering-system="arab"
+      start-item="1"
+      lang="fr"
+      total-items="123456789"
+      page-size="10"
+    >
+    </calcite-pagination>
+  </div>
+`;
 
 arabicNumberingSystemAndRTL_TestOnly.parameters = {
   chromatic: { diffThreshold: 1 },
 };
 
 export const theming_TestOnly = (): string => html`
-  <calcite-pagination
-    total-items="1200"
-    page-size="100"
-    start-item="1"
-    style="
+  <div style="width:100%">
+    <calcite-pagination
+      total-items="1200"
+      page-size="100"
+      start-item="1"
+      style="
       --calcite-pagination-text-color: green;
       --calcite-pagination-text-color-hover: darkgreen;
       --calcite-pagination-text-color-selected: teal;
@@ -138,5 +144,6 @@ export const theming_TestOnly = (): string => html`
       --calcite-pagination-arrow-background-color-hover: orange;
       --calcite-pagination-arrow-background-color-active: gold;
     "
-  ></calcite-pagination>
+    ></calcite-pagination>
+  </div>
 `;
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index 74ab07faff3..9b636bf6590 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -53,221 +53,223 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
       <!-- responsive testing from storybook-->
 
       <!-- Small -->
-      <div class="flex">
-        <div class="breakpoint-stories-container">
-          <style>
-            .breakpoint-stories-container {
-              display: flex;
-              flex-direction: column;
-              gap: 10px;
-              justify-content: flex-start;
-            }
-
-            .breakpoint-story-container {
-              display: flex;
-            }
-
-            .breakpoint-story-container > * {
-              flex: 1;
-            }
-          </style>
-          <calcite-pagination
-            total-items="1200"
-            page-size="100"
-            start-item="1"
-            style="
-              --calcite-pagination-text-color: green;
-              --calcite-pagination-text-color-hover: darkgreen;
-              --calcite-pagination-text-color-selected: teal;
-              --calcite-pagination-background-color: lightyellow;
-              --calcite-pagination-background-color-hover: yellow;
-              --calcite-pagination-background-color-active: gold;
-              --calcite-pagination-border-color-selected: green;
-              --calcite-pagination-border-color-hover: orange;
-              --calcite-pagination-arrow-icon-color: blue;
-              --calcite-pagination-arrow-icon-color-hover: pink;
-              --calcite-pagination-arrow-icon-color-active: red;
-              --calcite-pagination-arrow-background-color: lightyellow;
-              --calcite-pagination-arrow-background-color-hover: orange;
-              --calcite-pagination-arrow-background-color-active: gold;
-            "
-          ></calcite-pagination>
-
-          <calcite-pagination
-            scale="m"
-            start-item="1"
-            lang="en"
-            numbering-system="latn"
-            total-items="123456789"
-            page-size="10"
-          ></calcite-pagination>
-          <strong>scale = s</strong>
-          <strong>breakpoint = xxsmall</strong>
-          <div class="breakpoint-story-container" style="width: 319px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="s"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = xsmall</strong>
-          <div class="breakpoint-story-container" style="width: 475px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="s"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = small</strong>
-          <div class="breakpoint-story-container" style="width: 767px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="s"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = medium</strong>
-          <div class="breakpoint-story-container" style="width: 1151px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="s"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = large</strong>
-          <div class="breakpoint-story-container" style="width: 1439px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="s"
-            ></calcite-pagination>
-          </div>
-          <strong>scale = m</strong>
-          <strong>breakpoint = xxsmall</strong>
-          <div class="breakpoint-story-container" style="width: 319px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="m"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = xsmall</strong>
-          <div class="breakpoint-story-container" style="width: 475px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="m"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = small</strong>
-          <div class="breakpoint-story-container" style="width: 767px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="m"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = medium</strong>
-          <div class="breakpoint-story-container" style="width: 1151px">
+      <div class="parent">
+        <div class="flex">
+          <div class="breakpoint-stories-container">
+            <style>
+              .breakpoint-stories-container {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                justify-content: flex-start;
+              }
+
+              .breakpoint-story-container {
+                display: flex;
+              }
+
+              .breakpoint-story-container > * {
+                flex: 1;
+              }
+            </style>
             <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
+              total-items="1200"
               page-size="100"
-              start-item="149901"
-              scale="m"
+              start-item="1"
+              style="
+                --calcite-pagination-text-color: green;
+                --calcite-pagination-text-color-hover: darkgreen;
+                --calcite-pagination-text-color-selected: teal;
+                --calcite-pagination-background-color: lightyellow;
+                --calcite-pagination-background-color-hover: yellow;
+                --calcite-pagination-background-color-active: gold;
+                --calcite-pagination-border-color-selected: green;
+                --calcite-pagination-border-color-hover: orange;
+                --calcite-pagination-arrow-icon-color: blue;
+                --calcite-pagination-arrow-icon-color-hover: pink;
+                --calcite-pagination-arrow-icon-color-active: red;
+                --calcite-pagination-arrow-background-color: lightyellow;
+                --calcite-pagination-arrow-background-color-hover: orange;
+                --calcite-pagination-arrow-background-color-active: gold;
+              "
             ></calcite-pagination>
-          </div>
-          <strong>breakpoint = large</strong>
-          <div class="breakpoint-story-container" style="width: 1439px">
+
             <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
               scale="m"
-            ></calcite-pagination>
-          </div>
-          <strong>scale = l</strong>
-          <strong>breakpoint = xxsmall</strong>
-          <div class="breakpoint-story-container" style="width: 319px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="l"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = xsmall</strong>
-          <div class="breakpoint-story-container" style="width: 475px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="l"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = small</strong>
-          <div class="breakpoint-story-container" style="width: 767px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="l"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = medium</strong>
-          <div class="breakpoint-story-container" style="width: 1151px">
-            <calcite-pagination
-              lang="en"
-              numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="l"
-            ></calcite-pagination>
-          </div>
-          <strong>breakpoint = large</strong>
-          <div class="breakpoint-story-container" style="width: 1439px">
-            <calcite-pagination
+              start-item="1"
               lang="en"
               numbering-system="latn"
-              total-items="150000"
-              page-size="100"
-              start-item="149901"
-              scale="l"
+              total-items="123456789"
+              page-size="10"
             ></calcite-pagination>
+            <strong>scale = s</strong>
+            <strong>breakpoint = xxsmall</strong>
+            <div class="breakpoint-story-container" style="width: 319px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = xsmall</strong>
+            <div class="breakpoint-story-container" style="width: 475px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = small</strong>
+            <div class="breakpoint-story-container" style="width: 767px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = medium</strong>
+            <div class="breakpoint-story-container" style="width: 1151px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = large</strong>
+            <div class="breakpoint-story-container" style="width: 1439px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="s"
+              ></calcite-pagination>
+            </div>
+            <strong>scale = m</strong>
+            <strong>breakpoint = xxsmall</strong>
+            <div class="breakpoint-story-container" style="width: 319px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = xsmall</strong>
+            <div class="breakpoint-story-container" style="width: 475px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = small</strong>
+            <div class="breakpoint-story-container" style="width: 767px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = medium</strong>
+            <div class="breakpoint-story-container" style="width: 1151px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = large</strong>
+            <div class="breakpoint-story-container" style="width: 1439px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="m"
+              ></calcite-pagination>
+            </div>
+            <strong>scale = l</strong>
+            <strong>breakpoint = xxsmall</strong>
+            <div class="breakpoint-story-container" style="width: 319px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = xsmall</strong>
+            <div class="breakpoint-story-container" style="width: 475px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = small</strong>
+            <div class="breakpoint-story-container" style="width: 767px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = medium</strong>
+            <div class="breakpoint-story-container" style="width: 1151px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
+            <strong>breakpoint = large</strong>
+            <div class="breakpoint-story-container" style="width: 1439px">
+              <calcite-pagination
+                lang="en"
+                numbering-system="latn"
+                total-items="150000"
+                page-size="100"
+                start-item="149901"
+                scale="l"
+              ></calcite-pagination>
+            </div>
           </div>
         </div>
         <div class="parent">

From fd33c684bbc64758f2112256a908603bf5cd782c Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 20 Feb 2024 19:19:27 -0800
Subject: [PATCH 9/9] Clean up

---
 .../calcite-components/src/components.d.ts    | 84 +++++++++++++++++++
 .../pagination/pagination.stories.ts          |  6 +-
 .../src/demos/pagination.html                 |  2 +-
 3 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 8f6fcd21905..93e23ce88dc 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -779,6 +779,36 @@ export namespace Components {
          */
         "thumbnailPosition": LogicalFlowPosition;
     }
+    interface CalciteCardGroup {
+        /**
+          * When `true`, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled": boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
+         */
+        "scale": Scale;
+        /**
+          * Specifies the component's selected items.
+          * @readonly
+         */
+        "selectedItems": HTMLCalciteCardElement[];
+        /**
+          * Specifies the selection mode of the component.
+         */
+        "selectionMode": Extract<
+    "multiple" | "single" | "single-persist" | "none",
+    SelectionMode
+  >;
+        /**
+          * Sets focus on the component's first focusable element.
+         */
+        "setFocus": () => Promise<void>;
+    }
     interface CalciteCheckbox {
         /**
           * When `true`, the component is checked.
@@ -5419,6 +5449,10 @@ export interface CalciteCardCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteCardElement;
 }
+export interface CalciteCardGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteCardGroupElement;
+}
 export interface CalciteCheckboxCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteCheckboxElement;
@@ -5879,6 +5913,23 @@ declare global {
         prototype: HTMLCalciteCardElement;
         new (): HTMLCalciteCardElement;
     };
+    interface HTMLCalciteCardGroupElementEventMap {
+        "calciteCardGroupSelect": void;
+    }
+    interface HTMLCalciteCardGroupElement extends Components.CalciteCardGroup, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCalciteCardGroupElementEventMap>(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent<HTMLCalciteCardGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCalciteCardGroupElementEventMap>(type: K, listener: (this: HTMLCalciteCardGroupElement, ev: CalciteCardGroupCustomEvent<HTMLCalciteCardGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCalciteCardGroupElement: {
+        prototype: HTMLCalciteCardGroupElement;
+        new (): HTMLCalciteCardGroupElement;
+    };
     interface HTMLCalciteCheckboxElementEventMap {
         "calciteInternalCheckboxBlur": boolean;
         "calciteCheckboxChange": void;
@@ -7359,6 +7410,7 @@ declare global {
         "calcite-block-section": HTMLCalciteBlockSectionElement;
         "calcite-button": HTMLCalciteButtonElement;
         "calcite-card": HTMLCalciteCardElement;
+        "calcite-card-group": HTMLCalciteCardGroupElement;
         "calcite-checkbox": HTMLCalciteCheckboxElement;
         "calcite-chip": HTMLCalciteChipElement;
         "calcite-chip-group": HTMLCalciteChipGroupElement;
@@ -8083,6 +8135,36 @@ declare namespace LocalJSX {
          */
         "thumbnailPosition"?: LogicalFlowPosition;
     }
+    interface CalciteCardGroup {
+        /**
+          * When `true`, interaction is prevented and the component is displayed with lower opacity.
+         */
+        "disabled"?: boolean;
+        /**
+          * Accessible name for the component.
+         */
+        "label": string;
+        /**
+          * Emits when the component's selection changes and the selectionMode is not `none`.
+         */
+        "onCalciteCardGroupSelect"?: (event: CalciteCardGroupCustomEvent<void>) => void;
+        /**
+          * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
+         */
+        "scale"?: Scale;
+        /**
+          * Specifies the component's selected items.
+          * @readonly
+         */
+        "selectedItems"?: HTMLCalciteCardElement[];
+        /**
+          * Specifies the selection mode of the component.
+         */
+        "selectionMode"?: Extract<
+    "multiple" | "single" | "single-persist" | "none",
+    SelectionMode
+  >;
+    }
     interface CalciteCheckbox {
         /**
           * When `true`, the component is checked.
@@ -12943,6 +13025,7 @@ declare namespace LocalJSX {
         "calcite-block-section": CalciteBlockSection;
         "calcite-button": CalciteButton;
         "calcite-card": CalciteCard;
+        "calcite-card-group": CalciteCardGroup;
         "calcite-checkbox": CalciteCheckbox;
         "calcite-chip": CalciteChip;
         "calcite-chip-group": CalciteChipGroup;
@@ -13056,6 +13139,7 @@ declare module "@stencil/core" {
             "calcite-block-section": LocalJSX.CalciteBlockSection & JSXBase.HTMLAttributes<HTMLCalciteBlockSectionElement>;
             "calcite-button": LocalJSX.CalciteButton & JSXBase.HTMLAttributes<HTMLCalciteButtonElement>;
             "calcite-card": LocalJSX.CalciteCard & JSXBase.HTMLAttributes<HTMLCalciteCardElement>;
+            "calcite-card-group": LocalJSX.CalciteCardGroup & JSXBase.HTMLAttributes<HTMLCalciteCardGroupElement>;
             "calcite-checkbox": LocalJSX.CalciteCheckbox & JSXBase.HTMLAttributes<HTMLCalciteCheckboxElement>;
             "calcite-chip": LocalJSX.CalciteChip & JSXBase.HTMLAttributes<HTMLCalciteChipElement>;
             "calcite-chip-group": LocalJSX.CalciteChipGroup & JSXBase.HTMLAttributes<HTMLCalciteChipGroupElement>;
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
index 0f04ba54c2d..8cf02792fb9 100644
--- a/packages/calcite-components/src/components/pagination/pagination.stories.ts
+++ b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -88,7 +88,7 @@ export const responsiveTinyNumberLastPage_TestOnly = (): string =>
   createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "last" }));
 
 export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
-  <div style="width:100%">
+  <div style="width:480px;">
     <calcite-pagination
       class="calcite-mode-dark"
       start-item="1"
@@ -105,7 +105,7 @@ export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): s
 darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const arabicNumberingSystemAndRTL_TestOnly = (): string => html`
-  <div style="width:100%">
+  <div style="width:480px;">
     <calcite-pagination
       dir="rtl"
       numbering-system="arab"
@@ -123,7 +123,7 @@ arabicNumberingSystemAndRTL_TestOnly.parameters = {
 };
 
 export const theming_TestOnly = (): string => html`
-  <div style="width:100%">
+  <div style="width:480px;">
     <calcite-pagination
       total-items="1200"
       page-size="100"
diff --git a/packages/calcite-components/src/demos/pagination.html b/packages/calcite-components/src/demos/pagination.html
index 9b636bf6590..8f2855623f5 100644
--- a/packages/calcite-components/src/demos/pagination.html
+++ b/packages/calcite-components/src/demos/pagination.html
@@ -54,7 +54,7 @@ <h1 style="margin: 0 auto; text-align: center">Pagination</h1>
 
       <!-- Small -->
       <div class="parent">
-        <div class="flex">
+        <div class="child">
           <div class="breakpoint-stories-container">
             <style>
               .breakpoint-stories-container {