From 0018fe607442b1ff4c447422c7d84ce3412f74d0 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Fri, 13 Sep 2024 18:46:07 -0700
Subject: [PATCH 01/15] feat(carousel): Improve support for high item counts

---
 .../src/components/carousel/carousel.scss     |  30 ++
 .../src/components/carousel/carousel.tsx      | 121 ++++++--
 .../src/components/carousel/resources.ts      |   3 +
 .../src/demos/carousel.html                   | 288 +++++++++++++++++-
 4 files changed, 412 insertions(+), 30 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index 0b5efba059f..ad7a4dc765e 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -219,6 +219,36 @@ calcite-carousel-item:not([selected]) {
     --calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);
     color: var(--calcite-internal-internal-carousel-item-icon-color-selected);
   }
+  &.pagination-item--edge {
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.pagination-item--individual {
+  inline-size: 0;
+  padding: 0;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    0.15s ease-in-out inline-size,
+    0.15s ease-in-out padding,
+    0.25s ease-in-out opacity;
+  &.visible {
+    @apply w-8;
+    pointer-events: all;
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.pagination-item--range-edge calcite-icon {
+  scale: 0.75;
+  opacity: 0.75;
+  transition: 0.25s ease-in-out scale;
 }
 
 .container--overlaid .pagination-item {
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index c8d397278f0..da43c900bbe 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -38,6 +38,8 @@ import {
   T9nComponent,
   updateMessages,
 } from "../../utils/t9n";
+import { createObserver } from "../../utils/observers";
+import { breakpoints } from "../../utils/responsive";
 import { getRoundRobinIndex } from "../../utils/array";
 import { CSS, DURATION, ICONS } from "./resources";
 import { CarouselMessages } from "./assets/carousel/t9n";
@@ -46,6 +48,15 @@ import { ArrowType, AutoplayType } from "./interfaces";
 /**
  * @slot - A slot for adding `calcite-carousel-item`s.
  */
+
+const maxItemBreakpoints = {
+  large: 11,
+  medium: 9,
+  small: 7,
+  xsmall: 5,
+  xxsmall: 3,
+};
+
 @Component({
   tag: "calcite-carousel",
   styleUrl: "carousel.scss",
@@ -140,10 +151,12 @@ export class Carousel
   connectedCallback(): void {
     connectLocalized(this);
     connectMessages(this);
+    this.resizeObserver?.observe(this.el);
   }
 
   componentDidLoad(): void {
     setComponentLoaded(this);
+    this.setMaxItemsToBreakpoint(this.el.clientWidth);
   }
 
   componentDidRender(): void {
@@ -154,6 +167,7 @@ export class Carousel
     disconnectLocalized(this);
     disconnectMessages(this);
     this.clearIntervals();
+    this.resizeObserver?.disconnect();
   }
 
   async componentWillLoad(): Promise<void> {
@@ -263,6 +277,8 @@ export class Carousel
 
   @State() slideDurationRemaining = 1;
 
+  @State() maxItems = maxItemBreakpoints.xxsmall;
+
   private container: HTMLDivElement;
 
   private containerId = `calcite-carousel-container-${guid()}`;
@@ -273,6 +289,10 @@ export class Carousel
 
   private tabList: HTMLDivElement;
 
+  private resizeObserver = createObserver("resize", (entries) =>
+    entries.forEach(this.resizeHandler),
+  );
+
   // --------------------------------------------------------------------------
   //
   //  Events
@@ -300,6 +320,26 @@ export class Carousel
   //
   // --------------------------------------------------------------------------
 
+  private setMaxItemsToBreakpoint(width: number): void {
+    if (!breakpoints || !width) {
+      return;
+    }
+
+    const breakpointKeys = ["medium", "small", "xsmall", "xxsmall"];
+    for (const key of breakpointKeys) {
+      if (width >= breakpoints.width[key]) {
+        this.maxItems = maxItemBreakpoints[key];
+        return;
+      }
+    }
+
+    this.maxItems = maxItemBreakpoints.xxsmall;
+  }
+
+  private resizeHandler = ({ contentRect: { width } }: ResizeObserverEntry): void => {
+    this.setMaxItemsToBreakpoint(width);
+  };
+
   private clearIntervals() {
     clearInterval(this.slideDurationInterval);
     clearInterval(this.slideInterval);
@@ -379,11 +419,13 @@ export class Carousel
     const requestedSelectedIndex = activeItemIndex > -1 ? activeItemIndex : 0;
 
     this.items = items;
+
     this.setSelectedItem(requestedSelectedIndex, false);
   };
 
   private setSelectedItem = (requestedIndex: number, emit: boolean): void => {
     const previousSelected = this.selectedIndex;
+
     this.items.forEach((el, index) => {
       const isMatch = requestedIndex === index;
       el.selected = isMatch;
@@ -501,10 +543,12 @@ export class Carousel
         }
         break;
       case "ArrowRight":
+        event.preventDefault();
         this.direction = "forward";
         this.nextItem(true);
         break;
       case "ArrowLeft":
+        event.preventDefault();
         this.direction = "backward";
         this.previousItem();
         break;
@@ -609,31 +653,58 @@ export class Carousel
     </div>
   );
 
-  renderPaginationItems = (): VNode => (
-    <div aria-label={this.label} class={CSS.paginationItems} role="tablist">
-      {this.items.map((item, index) => {
-        const isMatch = index === this.selectedIndex;
-        return (
-          <button
-            aria-controls={!isMatch ? item.id : undefined}
-            aria-selected={toAriaBoolean(isMatch)}
-            class={{
-              [CSS.paginationItem]: true,
-              [CSS.paginationItemIndividual]: true,
-              [CSS.paginationItemSelected]: isMatch,
-            }}
-            data-index={index}
-            key={item.id}
-            onClick={this.handleItemSelection}
-            role="tab"
-            title={item.label}
-          >
-            <calcite-icon icon={isMatch ? ICONS.active : ICONS.inactive} scale="l" />
-          </button>
-        );
-      })}
-    </div>
-  );
+  renderPaginationItems = (): VNode => {
+    const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
+    // todo handle arrow navigation for non-visible pagination items when overflowing
+    // todo handle 3 example
+    return (
+      <div aria-label={label} class={CSS.paginationItems} role="tablist">
+        {items.map((item, index) => {
+          const isMatch = index === selectedIndex;
+          const isFirst = index === 0;
+          const isLast = index === items.length - 1;
+          const length = items.length;
+          const halfMaxItems = Math.floor(maxItems / 2);
+          const sliceLowBound =
+            selectedIndex < maxItems
+              ? 0
+              : selectedIndex > length - maxItems
+                ? length - maxItems - 1
+                : Math.max(0, selectedIndex - halfMaxItems);
+          const sliceHighBound =
+            selectedIndex < maxItems ? maxItems + 1 : Math.min(length, sliceLowBound + maxItems);
+          const icon = isMatch ? ICONS.active : ICONS.inactive;
+          const isEdge =
+            !isFirst &&
+            !isLast &&
+            !isMatch &&
+            (index === sliceLowBound - 1 || index === sliceHighBound);
+          const isVisible = isMatch || (index <= sliceHighBound && index >= sliceLowBound - 1);
+
+          return (
+            <button
+              aria-controls={!isMatch ? item.id : undefined}
+              aria-selected={toAriaBoolean(isMatch)}
+              class={{
+                [CSS.paginationItem]: true,
+                [CSS.paginationItemIndividual]: true,
+                [CSS.paginationItemSelected]: isMatch,
+                [CSS.paginationItemRangeEdge]: length - 1 > maxItems && isEdge,
+                visible: length - 1 <= maxItems || isVisible,
+              }}
+              data-index={index}
+              key={item.id}
+              onClick={handleItemSelection}
+              role="tab"
+              title={item.label}
+            >
+              <calcite-icon icon={icon} scale={"l"} />
+            </button>
+          );
+        })}
+      </div>
+    );
+  };
 
   renderArrow = (direction: "previous" | "next"): VNode => {
     const isPrev = direction === "previous";
diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts
index 088997a1a50..b939cc4fdf4 100644
--- a/packages/calcite-components/src/components/carousel/resources.ts
+++ b/packages/calcite-components/src/components/carousel/resources.ts
@@ -11,7 +11,10 @@ export const CSS = {
   paginationItems: "pagination-items",
   paginationItem: "pagination-item",
   paginationItemIndividual: "pagination-item--individual",
+  paginationItemVisible: "pagination-item--visible",
   paginationItemSelected: "pagination-item--selected",
+  paginationItemEdge: "pagination-item--edge",
+  paginationItemRangeEdge: "pagination-item--range-edge",
   pageNext: "page-next",
   pagePrevious: "page-previous",
   autoplayControl: "autoplay-control",
diff --git a/packages/calcite-components/src/demos/carousel.html b/packages/calcite-components/src/demos/carousel.html
index 4fb500a67fc..060262e27f4 100644
--- a/packages/calcite-components/src/demos/carousel.html
+++ b/packages/calcite-components/src/demos/carousel.html
@@ -116,7 +116,13 @@ <h3>Interactive Demo</h3>
             </calcite-label>
             <calcite-label
               >duration
-              <calcite-input id="input-duration" placeholder="6000"></calcite-input>
+              <calcite-input-number
+                id="input-duration"
+                placeholder="6000"
+                min="1000"
+                step="1000"
+                value="6000"
+              ></calcite-input-number>
             </calcite-label>
             <calcite-label
               >play() (if autoplay is present)
@@ -156,8 +162,281 @@ <h3>Interactive Demo</h3>
                   An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
                 </p>
               </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
+              <calcite-carousel-item label="The Red Rocks and Blue Water">
+                <p>
+                  <calcite-icon scale="l" icon="layer"></calcite-icon>
+                  An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                </p>
+              </calcite-carousel-item>
             </calcite-carousel>
           </div>
+          <div class="child">
+            <h3>Max items overlap prevention</h3>
+            <calcite-shell
+              style="
+                position: relative;
+                height: 500px;
+                --calcite-shell-panel-min-width: 200px;
+                --calcite-shell-panel-max-width: 400px;
+              "
+            >
+              <calcite-shell-panel
+                slot="panel-start"
+                resizable
+                width-scale="l"
+                style="--calcite-shell-panel-min-width: 120px; --calcite-shell-panel-max-width: 240px"
+              >
+                <calcite-panel heading="Narrow resizable" description="middle item on load">
+                  <calcite-carousel id="example-carousel">
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-1"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Long Trees">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-2"></calcite-icon>
+                        Another bit of content about this unbelievable item can go here on the second carousel item as
+                        an example
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-3"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-4"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item selected label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-8"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-9"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                  </calcite-carousel>
+                </calcite-panel>
+              </calcite-shell-panel>
+
+              <calcite-shell-panel
+                slot="panel-end"
+                resizable
+                position="end"
+                width-scale="l"
+                style="position: relative; --calcite-shell-panel-min-width: 0; --calcite-shell-panel-max-width: 800px"
+              >
+                <calcite-panel heading="Example resizable" description="preventing overlap with edge of container">
+                  <calcite-carousel id="example-carousel">
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-1"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Long Trees">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-2"></calcite-icon>
+                        Another bit of content about this unbelievable item can go here on the second carousel item as
+                        an example
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-3"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-4"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-8"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="number-circle-9"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                    <calcite-carousel-item label="The Red Rocks and Blue Water">
+                      <p>
+                        <calcite-icon scale="l" icon="layer"></calcite-icon>
+                        An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+                      </p>
+                    </calcite-carousel-item>
+                  </calcite-carousel>
+                </calcite-panel>
+              </calcite-shell-panel>
+            </calcite-shell>
+          </div>
+
           <div class="child">
             <hr />
             <h3>Themed</h3>
@@ -286,7 +565,7 @@ <h3>autoplay</h3>
               <calcite-panel heading="Content">
                 <calcite-block open style="height: 400px">
                   <calcite-button style="margin: 1rem" id="example-popover">Launch onboarding</calcite-button>
-                  <calcite-popover open reference-element="example-popover" heading="Welcome to the show!" closable>
+                  <calcite-popover reference-element="example-popover" heading="Welcome to the show!" closable>
                     <calcite-carousel>
                       <calcite-carousel-item label="The Red Rocks and Blue Water">
                         <p>
@@ -386,7 +665,7 @@ <h3>autoplay</h3>
                   </calcite-block>
                   <calcite-block open>
                     <calcite-button style="margin: 1rem" id="example-popover-2">Launch onboarding</calcite-button>
-                    <calcite-popover open reference-element="example-popover-2" heading="Welcome to the show!" closable>
+                    <calcite-popover reference-element="example-popover-2" heading="Welcome to the show!" closable>
                       <calcite-carousel>
                         <calcite-carousel-item label="The Red Rocks and Blue Water">
                           <p>
@@ -462,8 +741,7 @@ <h3>autoplay</h3>
           carousel.controlOverlay = event.target.checked;
         });
 
-        durationInput.addEventListener("calciteInputInput", function () {
-          console.log(event.target.value);
+        durationInput.addEventListener("calciteInputNumberInput", function () {
           carousel.autoplayDuration = event.target.value;
         });
 

From b9b6a7dc1d18a07816096a9b8f564803850de19c Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 14 Sep 2024 10:21:53 -0700
Subject: [PATCH 02/15] WIP

---
 .../src/components/carousel/carousel.e2e.ts   |  74 +++++++
 .../src/components/carousel/carousel.scss     |   4 +-
 .../components/carousel/carousel.stories.ts   | 194 ++++++++++++++++++
 .../src/components/carousel/carousel.tsx      |  18 +-
 4 files changed, 279 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
index 64867a6d3df..8c51fd2a98b 100644
--- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
@@ -1055,3 +1055,77 @@ describe("calcite-carousel", () => {
     expect(animationEndSpy).toHaveReceivedEventTimes(8);
   });
 });
+describe("handles overflow of pagination items", () => {
+  it("correctly limits the number of slide pagination items shown when overflowing", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:400px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(3);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing selected middle", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:400px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4" selected><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(5);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing selected last", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:400px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(3);
+  });
+  it("correctly adjusts as the container or carousel width changes", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:400px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(3);
+  });
+});
diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index ad7a4dc765e..fd80eef6d8d 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -236,7 +236,7 @@ calcite-carousel-item:not([selected]) {
   transition:
     0.15s ease-in-out inline-size,
     0.15s ease-in-out padding,
-    0.25s ease-in-out opacity;
+    0.3s ease-in-out opacity;
   &.visible {
     @apply w-8;
     pointer-events: all;
@@ -248,7 +248,7 @@ calcite-carousel-item:not([selected]) {
 .pagination-item--range-edge calcite-icon {
   scale: 0.75;
   opacity: 0.75;
-  transition: 0.25s ease-in-out scale;
+  transition: 0.3s ease-in-out scale;
 }
 
 .container--overlaid .pagination-item {
diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index a6812b7f86b..7fad5781b7c 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -76,6 +76,200 @@ export const simple = (args: CarouselStoryArgs): string =>
     </calcite-carousel>
   </div>`;
 
+export const simpleManyItems = (args: CarouselStoryArgs): string =>
+  html` <div style="width:600px;height:400px;">
+    <calcite-carousel
+      control-overlay="${args.controlOverlay}"
+      ${boolean("disabled", args.disabled)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
+      label="${args.label}"
+      arrow-type="${args.arrowType}"
+    >
+      <calcite-carousel-item label="Carousel Item 1">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 2">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 3">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 4">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 5">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 6">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 7">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 8">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 9">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+    </calcite-carousel>
+  </div>`;
+
+export const simpleManyItemsResizable = (args: CarouselStoryArgs): string =>
+  html` <calcite-shell
+    style="
+      position: relative;
+      height: 500px;
+      --calcite-shell-panel-min-width: 200px;
+      --calcite-shell-panel-max-width: 400px;"
+    ><calcite-shell-panel
+      slot="panel-end"
+      resizable
+      position="end"
+      width-scale="l"
+      style="position: relative; --calcite-shell-panel-min-width: 0; --calcite-shell-panel-max-width: 800px"
+    >
+      <calcite-panel heading="Example resizable" description="preventing overlap with edge of container">
+        <calcite-carousel
+          control-overlay="${args.controlOverlay}"
+          ${boolean("disabled", args.disabled)}
+          autoplay-duration="${args.autoplayDuration}"
+          ${args.autoplay ? "autoplay" : ""}
+          label="${args.label}"
+          arrow-type="${args.arrowType}"
+        >
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-1"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Long Trees">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-2"></calcite-icon>
+              Another bit of content about this unbelievable item can go here on the second carousel item as an example
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-3"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-4"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-8"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="number-circle-9"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="layer"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="layer"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="layer"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="layer"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="layer"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+          <calcite-carousel-item label="The Red Rocks and Blue Water">
+            <p>
+              <calcite-icon scale="l" icon="layer"></calcite-icon>
+              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
+            </p>
+          </calcite-carousel-item>
+        </calcite-carousel>
+      </calcite-panel>
+    </calcite-shell-panel>
+  </calcite-shell>`;
+
 export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
   html` <div style="width:600px;height:400px;">
     <style>
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index da43c900bbe..0846177a0fc 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -50,11 +50,11 @@ import { ArrowType, AutoplayType } from "./interfaces";
  */
 
 const maxItemBreakpoints = {
-  large: 11,
-  medium: 9,
-  small: 7,
-  xsmall: 5,
-  xxsmall: 3,
+  large: 9,
+  medium: 7,
+  small: 5,
+  xsmall: 3,
+  xxsmall: 1,
 };
 
 @Component({
@@ -156,7 +156,6 @@ export class Carousel
 
   componentDidLoad(): void {
     setComponentLoaded(this);
-    this.setMaxItemsToBreakpoint(this.el.clientWidth);
   }
 
   componentDidRender(): void {
@@ -171,6 +170,8 @@ export class Carousel
   }
 
   async componentWillLoad(): Promise<void> {
+    this.setMaxItemsToBreakpoint(this.el.clientWidth);
+
     /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
     if ((this.autoplay === "" || this.autoplay) && this.autoplay !== "paused") {
       this.handlePlay(false);
@@ -178,7 +179,6 @@ export class Carousel
       this.paused = true;
     }
     setUpLoadableComponent(this);
-
     await setUpMessages(this);
   }
 
@@ -228,6 +228,8 @@ export class Carousel
 
   @State() direction: "forward" | "backward" | "standby" = "standby";
 
+  @State() paginationDirection: "forward" | "backward" | "standby" = "standby";
+
   @Watch("direction")
   async directionWatcher(direction: string): Promise<void> {
     if (direction === "standby") {
@@ -655,8 +657,6 @@ export class Carousel
 
   renderPaginationItems = (): VNode => {
     const { selectedIndex, maxItems, items, label, handleItemSelection } = this;
-    // todo handle arrow navigation for non-visible pagination items when overflowing
-    // todo handle 3 example
     return (
       <div aria-label={label} class={CSS.paginationItems} role="tablist">
         {items.map((item, index) => {

From 667ef0fb19d3db60afcf8ef84e8a856c135a65cb Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 14 Sep 2024 12:04:07 -0700
Subject: [PATCH 03/15] WIP

---
 .../src/components/carousel/carousel.scss     |  24 +---
 .../components/carousel/carousel.stories.ts   | 126 +-----------------
 .../src/components/carousel/carousel.tsx      |  50 ++++---
 .../src/components/carousel/resources.ts      |   2 +-
 4 files changed, 35 insertions(+), 167 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index fd80eef6d8d..32579833a2f 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -219,36 +219,26 @@ calcite-carousel-item:not([selected]) {
     --calcite-color-foreground-3: var(--calcite-internal-internal-carousel-item-background-color-selected);
     color: var(--calcite-internal-internal-carousel-item-icon-color-selected);
   }
-  &.pagination-item--edge {
-    opacity: 0.5;
-    &:hover {
-      opacity: 1;
-    }
-  }
 }
 
 .pagination-item--individual {
-  inline-size: 0;
-  padding: 0;
-  opacity: 0;
-  pointer-events: none;
+  @apply w-0 p-0 opacity-0 pointer-events-none;
   visibility: hidden;
   transition:
     0.15s ease-in-out inline-size,
     0.15s ease-in-out padding,
-    0.3s ease-in-out opacity;
-  &.visible {
-    @apply w-8;
-    pointer-events: all;
+    0.15s ease-in-out opacity;
+
+  &.pagination-item--visible {
+    @apply w-8 opacity-100 pointer-events-auto;
     visibility: visible;
-    opacity: 1;
   }
 }
 
 .pagination-item--range-edge calcite-icon {
+  @apply opacity-75;
   scale: 0.75;
-  opacity: 0.75;
-  transition: 0.3s ease-in-out scale;
+  transition: 0.15s ease-in-out scale;
 }
 
 .container--overlaid .pagination-item {
diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index 7fad5781b7c..aa7891ed025 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -125,151 +125,33 @@ export const simpleManyItems = (args: CarouselStoryArgs): string =>
         <calcite-card>
           <span slot="title">Some kind of carousel item content</span>
           <span slot="subtitle">In this case, in a card</span>
-          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
         </calcite-card>
       </calcite-carousel-item>
       <calcite-carousel-item label="Carousel Item 7">
         <calcite-card>
           <span slot="title">Some kind of carousel item content</span>
           <span slot="subtitle">In this case, in a card</span>
-          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
         </calcite-card>
       </calcite-carousel-item>
       <calcite-carousel-item label="Carousel Item 8">
         <calcite-card>
           <span slot="title">Some kind of carousel item content</span>
           <span slot="subtitle">In this case, in a card</span>
-          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
         </calcite-card>
       </calcite-carousel-item>
       <calcite-carousel-item label="Carousel Item 9">
         <calcite-card>
           <span slot="title">Some kind of carousel item content</span>
           <span slot="subtitle">In this case, in a card</span>
-          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
         </calcite-card>
       </calcite-carousel-item>
     </calcite-carousel>
   </div>`;
 
-export const simpleManyItemsResizable = (args: CarouselStoryArgs): string =>
-  html` <calcite-shell
-    style="
-      position: relative;
-      height: 500px;
-      --calcite-shell-panel-min-width: 200px;
-      --calcite-shell-panel-max-width: 400px;"
-    ><calcite-shell-panel
-      slot="panel-end"
-      resizable
-      position="end"
-      width-scale="l"
-      style="position: relative; --calcite-shell-panel-min-width: 0; --calcite-shell-panel-max-width: 800px"
-    >
-      <calcite-panel heading="Example resizable" description="preventing overlap with edge of container">
-        <calcite-carousel
-          control-overlay="${args.controlOverlay}"
-          ${boolean("disabled", args.disabled)}
-          autoplay-duration="${args.autoplayDuration}"
-          ${args.autoplay ? "autoplay" : ""}
-          label="${args.label}"
-          arrow-type="${args.arrowType}"
-        >
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-1"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Long Trees">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-2"></calcite-icon>
-              Another bit of content about this unbelievable item can go here on the second carousel item as an example
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-3"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-4"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-5"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-6"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-7"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-8"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="number-circle-9"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="layer"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="layer"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="layer"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="layer"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="layer"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-          <calcite-carousel-item label="The Red Rocks and Blue Water">
-            <p>
-              <calcite-icon scale="l" icon="layer"></calcite-icon>
-              An unbelievable new feature has arrived in this exciting product category. It's pretty neat.
-            </p>
-          </calcite-carousel-item>
-        </calcite-carousel>
-      </calcite-panel>
-    </calcite-shell-panel>
-  </calcite-shell>`;
-
 export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
   html` <div style="width:600px;height:400px;">
     <style>
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 0846177a0fc..29e8ebd2a8a 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -429,9 +429,9 @@ export class Carousel
     const previousSelected = this.selectedIndex;
 
     this.items.forEach((el, index) => {
-      const isMatch = requestedIndex === index;
-      el.selected = isMatch;
-      if (isMatch) {
+      const match = requestedIndex === index;
+      el.selected = match;
+      if (match) {
         this.selectedItem = el;
         this.selectedIndex = index;
       }
@@ -574,7 +574,8 @@ export class Carousel
   };
 
   private tabListKeyDownHandler = (event: KeyboardEvent): void => {
-    const interactiveItems = Array(...this.tabList.querySelectorAll("button"));
+    const targetEls = `button:not(.${CSS.paginationItemOutOfRange})`;
+    const interactiveItems = Array(...this.tabList.querySelectorAll(targetEls));
     const currentEl = event.target as HTMLCalciteActionElement;
     switch (event.key) {
       case "ArrowRight":
@@ -660,37 +661,32 @@ export class Carousel
     return (
       <div aria-label={label} class={CSS.paginationItems} role="tablist">
         {items.map((item, index) => {
-          const isMatch = index === selectedIndex;
-          const isFirst = index === 0;
-          const isLast = index === items.length - 1;
           const length = items.length;
-          const halfMaxItems = Math.floor(maxItems / 2);
-          const sliceLowBound =
-            selectedIndex < maxItems
-              ? 0
-              : selectedIndex > length - maxItems
-                ? length - maxItems - 1
-                : Math.max(0, selectedIndex - halfMaxItems);
-          const sliceHighBound =
-            selectedIndex < maxItems ? maxItems + 1 : Math.min(length, sliceLowBound + maxItems);
-          const icon = isMatch ? ICONS.active : ICONS.inactive;
-          const isEdge =
-            !isFirst &&
-            !isLast &&
-            !isMatch &&
-            (index === sliceLowBound - 1 || index === sliceHighBound);
-          const isVisible = isMatch || (index <= sliceHighBound && index >= sliceLowBound - 1);
+          const match = index === selectedIndex;
+          const first = index === 0;
+          const last = index === items.length - 1;
+          const endRangeStart = length - maxItems - 1;
+          const inStartRange = selectedIndex < maxItems;
+          const inEndRange = selectedIndex > endRangeStart;
+          const rangeStart = Math.max(0, selectedIndex - Math.floor(maxItems / 2));
+          const rangeEnd = Math.min(length, rangeStart + maxItems);
+          const low = inStartRange ? 0 : inEndRange ? endRangeStart : rangeStart;
+          const high = inStartRange ? maxItems + 1 : rangeEnd;
+          const isEdge = !first && !last && !match && (index === low - 1 || index === high);
+          const visible = match || (index <= high && index >= low - 1);
+          const icon = match ? ICONS.active : ICONS.inactive;
 
           return (
             <button
-              aria-controls={!isMatch ? item.id : undefined}
-              aria-selected={toAriaBoolean(isMatch)}
+              aria-controls={!match ? item.id : undefined}
+              aria-selected={toAriaBoolean(match)}
               class={{
                 [CSS.paginationItem]: true,
                 [CSS.paginationItemIndividual]: true,
-                [CSS.paginationItemSelected]: isMatch,
+                [CSS.paginationItemSelected]: match,
                 [CSS.paginationItemRangeEdge]: length - 1 > maxItems && isEdge,
-                visible: length - 1 <= maxItems || isVisible,
+                [CSS.paginationItemOutOfRange]: !(length - 1 <= maxItems || visible),
+                [CSS.paginationItemVisible]: length - 1 <= maxItems || visible,
               }}
               data-index={index}
               key={item.id}
diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts
index b939cc4fdf4..9140258d9aa 100644
--- a/packages/calcite-components/src/components/carousel/resources.ts
+++ b/packages/calcite-components/src/components/carousel/resources.ts
@@ -12,8 +12,8 @@ export const CSS = {
   paginationItem: "pagination-item",
   paginationItemIndividual: "pagination-item--individual",
   paginationItemVisible: "pagination-item--visible",
+  paginationItemOutOfRange: "pagination-item--out-of-range",
   paginationItemSelected: "pagination-item--selected",
-  paginationItemEdge: "pagination-item--edge",
   paginationItemRangeEdge: "pagination-item--range-edge",
   pageNext: "page-next",
   pagePrevious: "page-previous",

From 99d2bfddc84d2e31635aab3d648d2e42e9d1ee06 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 14 Sep 2024 17:27:28 -0700
Subject: [PATCH 04/15] Clean up

---
 .../src/components/carousel/carousel.e2e.ts   | 39 ++++++-------------
 .../src/components/carousel/carousel.tsx      | 10 +----
 .../src/components/carousel/resources.ts      |  8 ++++
 3 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
index 8c51fd2a98b..f153af9401b 100644
--- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
@@ -1,7 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { CSS, DURATION } from "./resources";
+import { breakpoints } from "../../utils/responsive";
+import { CSS, DURATION, maxItemBreakpoints } from "./resources";
 
 const slideDurationWaitTimer = DURATION + 250;
 
@@ -1056,10 +1057,10 @@ describe("calcite-carousel", () => {
   });
 });
 describe("handles overflow of pagination items", () => {
-  it("correctly limits the number of slide pagination items shown when overflowing", async () => {
+  it("correctly limits the number of slide pagination items shown when overflowing xxsmall first selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:400px">
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xxsmall"]}px">
         <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
@@ -1072,12 +1073,12 @@ describe("handles overflow of pagination items", () => {
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(3);
+    expect(items).toHaveLength(maxItemBreakpoints["xxsmall"] + 2);
   });
-  it("correctly limits the number of slide pagination items shown when overflowing selected middle", async () => {
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:400px">
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xsmall"]}px">
         <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
@@ -1090,12 +1091,12 @@ describe("handles overflow of pagination items", () => {
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(5);
+    expect(items).toHaveLength(maxItemBreakpoints["xsmall"] + 2);
   });
-  it("correctly limits the number of slide pagination items shown when overflowing selected last", async () => {
+  it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:400px">
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["small"]}px">
         <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
@@ -1108,24 +1109,6 @@ describe("handles overflow of pagination items", () => {
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(3);
-  });
-  it("correctly adjusts as the container or carousel width changes", async () => {
-    const page = await newE2EPage();
-    await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:400px">
-        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
-      </calcite-carousel>`,
-    );
-
-    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(3);
+    expect(items).toHaveLength(maxItemBreakpoints["small"] + 2);
   });
 });
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 29e8ebd2a8a..45c204b6aaf 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -41,7 +41,7 @@ import {
 import { createObserver } from "../../utils/observers";
 import { breakpoints } from "../../utils/responsive";
 import { getRoundRobinIndex } from "../../utils/array";
-import { CSS, DURATION, ICONS } from "./resources";
+import { CSS, DURATION, ICONS, maxItemBreakpoints } from "./resources";
 import { CarouselMessages } from "./assets/carousel/t9n";
 import { ArrowType, AutoplayType } from "./interfaces";
 
@@ -49,14 +49,6 @@ import { ArrowType, AutoplayType } from "./interfaces";
  * @slot - A slot for adding `calcite-carousel-item`s.
  */
 
-const maxItemBreakpoints = {
-  large: 9,
-  medium: 7,
-  small: 5,
-  xsmall: 3,
-  xxsmall: 1,
-};
-
 @Component({
   tag: "calcite-carousel",
   styleUrl: "carousel.scss",
diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts
index 9140258d9aa..f4123efc0cb 100644
--- a/packages/calcite-components/src/components/carousel/resources.ts
+++ b/packages/calcite-components/src/components/carousel/resources.ts
@@ -29,3 +29,11 @@ export const ICONS = {
   pause: "pause-f",
   play: "play-f",
 } as const;
+
+export const maxItemBreakpoints = {
+  large: 9,
+  medium: 7,
+  small: 5,
+  xsmall: 3,
+  xxsmall: 1,
+};

From a95e90818e9e6d6d87ffc715bef486d446891ee1 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 14 Sep 2024 17:49:44 -0700
Subject: [PATCH 05/15] Clean up

---
 .../src/components/carousel/carousel.scss             |  8 ++++----
 .../src/components/carousel/carousel.tsx              | 11 ++++++-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index 32579833a2f..7d8bfc20902 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -225,9 +225,9 @@ calcite-carousel-item:not([selected]) {
   @apply w-0 p-0 opacity-0 pointer-events-none;
   visibility: hidden;
   transition:
-    0.15s ease-in-out inline-size,
-    0.15s ease-in-out padding,
-    0.15s ease-in-out opacity;
+    var(--calcite-animation-timing) ease-in-out inline-size,
+    var(--calcite-animation-timing) ease-in-out padding,
+    var(--calcite-internal-animation-timing-slow) ease-in-out opacity;
 
   &.pagination-item--visible {
     @apply w-8 opacity-100 pointer-events-auto;
@@ -238,7 +238,7 @@ calcite-carousel-item:not([selected]) {
 .pagination-item--range-edge calcite-icon {
   @apply opacity-75;
   scale: 0.75;
-  transition: 0.15s ease-in-out scale;
+  transition: var(--calcite-internal-animation-timing-slow) ease-in-out scale;
 }
 
 .container--overlaid .pagination-item {
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 45c204b6aaf..ddc433c0b98 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -277,6 +277,8 @@ export class Carousel
 
   private containerId = `calcite-carousel-container-${guid()}`;
 
+  private itemContainer: HTMLDivElement;
+
   private slideDurationInterval = null;
 
   private slideInterval = null;
@@ -595,8 +597,6 @@ export class Carousel
     this.container = el;
   };
 
-  private itemContainer: HTMLDivElement;
-
   private storeItemContainerRef = (el: HTMLDivElement): void => {
     this.itemContainer = el;
   };
@@ -656,7 +656,7 @@ export class Carousel
           const length = items.length;
           const match = index === selectedIndex;
           const first = index === 0;
-          const last = index === items.length - 1;
+          const last = index === length - 1;
           const endRangeStart = length - maxItems - 1;
           const inStartRange = selectedIndex < maxItems;
           const inEndRange = selectedIndex > endRangeStart;
@@ -666,6 +666,7 @@ export class Carousel
           const high = inStartRange ? maxItems + 1 : rangeEnd;
           const isEdge = !first && !last && !match && (index === low - 1 || index === high);
           const visible = match || (index <= high && index >= low - 1);
+          const overflowActive = length - 1 <= maxItems;
           const icon = match ? ICONS.active : ICONS.inactive;
 
           return (
@@ -677,8 +678,8 @@ export class Carousel
                 [CSS.paginationItemIndividual]: true,
                 [CSS.paginationItemSelected]: match,
                 [CSS.paginationItemRangeEdge]: length - 1 > maxItems && isEdge,
-                [CSS.paginationItemOutOfRange]: !(length - 1 <= maxItems || visible),
-                [CSS.paginationItemVisible]: length - 1 <= maxItems || visible,
+                [CSS.paginationItemOutOfRange]: !(overflowActive || visible),
+                [CSS.paginationItemVisible]: overflowActive || visible,
               }}
               data-index={index}
               key={item.id}

From cfd91b110511c2ed2a973444577efba9e983a24e Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Sat, 14 Sep 2024 18:03:28 -0700
Subject: [PATCH 06/15] Clean up

---
 .../calcite-components/src/components/carousel/carousel.tsx     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index ddc433c0b98..d12bb3b18e2 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -220,8 +220,6 @@ export class Carousel
 
   @State() direction: "forward" | "backward" | "standby" = "standby";
 
-  @State() paginationDirection: "forward" | "backward" | "standby" = "standby";
-
   @Watch("direction")
   async directionWatcher(direction: string): Promise<void> {
     if (direction === "standby") {

From abf9ab07dfe0695664ab29839fce1122e6b87ca2 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Mon, 16 Sep 2024 17:24:40 -0700
Subject: [PATCH 07/15] Design feedback

---
 .../calcite-components/src/components/carousel/carousel.scss     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index 7d8bfc20902..1d7456c9704 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -236,7 +236,6 @@ calcite-carousel-item:not([selected]) {
 }
 
 .pagination-item--range-edge calcite-icon {
-  @apply opacity-75;
   scale: 0.75;
   transition: var(--calcite-internal-animation-timing-slow) ease-in-out scale;
 }

From 6599ed0f70b1f78ed6afd0815d40741d35225102 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 15:12:03 -0700
Subject: [PATCH 08/15] Clean up

---
 .../src/components/carousel/carousel.stories.ts             | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index aa7891ed025..bf53e432826 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -249,9 +249,6 @@ export const carouselWithAutoplayNoOverlay = (): string =>
         margin: 2rem auto 1rem;
         display: block;
       }
-      calcite-carousel {
-        width: 400px;
-      }
       calcite-carousel-item p {
         text-align: center;
         margin: 0 auto 1rem;
@@ -406,9 +403,6 @@ export const darkModeRTL = (): string =>
         margin: 2rem auto 1rem;
         display: block;
       }
-      calcite-carousel {
-        width: 400px;
-      }
       calcite-carousel-item p {
         text-align: center;
         margin: 0 auto 1rem;

From 2fe1d509437123270afa96618758665b370c3bc9 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 15:56:06 -0700
Subject: [PATCH 09/15] Pr feedback

---
 .../calcite-components/src/components.d.ts    | 100 ++++++++++++++++++
 .../src/components/carousel/carousel.e2e.ts   |  28 ++++-
 .../src/components/carousel/carousel.scss     |   4 +-
 .../src/components/carousel/carousel.tsx      |  28 +++--
 .../src/components/carousel/resources.ts      |   3 +-
 5 files changed, 143 insertions(+), 20 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index bffc8ef3637..68d4f03e98e 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -9,91 +9,191 @@ import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind,
 import { RequestedItem } from "./components/accordion/interfaces";
 import { IconNameOrString } from "./components/icon/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
 import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 import { DialogPlacement } from "./components/dialog/interfaces";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { Element } from "@stencil/core";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { IconNameOrString } from "./components/icon/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, AlertQueue } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
 export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
 export { DialogPlacement } from "./components/dialog/interfaces";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { Element } from "@stencil/core";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
index f153af9401b..c4a5f802ae0 100644
--- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
@@ -2,7 +2,7 @@ import { newE2EPage } from "@stencil/core/testing";
 import { accessible, hidden, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { breakpoints } from "../../utils/responsive";
-import { CSS, DURATION, maxItemBreakpoints } from "./resources";
+import { CSS, DURATION, centerItemsByBreakpoint } from "./resources";
 
 const slideDurationWaitTimer = DURATION + 250;
 
@@ -1056,7 +1056,7 @@ describe("calcite-carousel", () => {
     expect(animationEndSpy).toHaveReceivedEventTimes(8);
   });
 });
-describe("handles overflow of pagination items", () => {
+describe("renders the expected number of pagination items when overflowing", () => {
   it("correctly limits the number of slide pagination items shown when overflowing xxsmall first selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
@@ -1073,7 +1073,7 @@ describe("handles overflow of pagination items", () => {
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(maxItemBreakpoints["xxsmall"] + 2);
+    expect(items).toHaveLength(centerItemsByBreakpoint["xxsmall"] + 2);
   });
   it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
     const page = await newE2EPage();
@@ -1091,7 +1091,7 @@ describe("handles overflow of pagination items", () => {
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(maxItemBreakpoints["xsmall"] + 2);
+    expect(items).toHaveLength(centerItemsByBreakpoint["xsmall"] + 2);
   });
   it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
     const page = await newE2EPage();
@@ -1109,6 +1109,24 @@ describe("handles overflow of pagination items", () => {
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    expect(items).toHaveLength(maxItemBreakpoints["small"] + 2);
+    expect(items).toHaveLength(centerItemsByBreakpoint["small"] + 2);
+  });
+  it("correctly limits the number of slide pagination items shown when overflowing medium last selected", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["medium"]}px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
+      </calcite-carousel>`,
+    );
+
+    const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    expect(items).toHaveLength(centerItemsByBreakpoint["medium"] + 2);
   });
 });
diff --git a/packages/calcite-components/src/components/carousel/carousel.scss b/packages/calcite-components/src/components/carousel/carousel.scss
index 1d7456c9704..9e9b84ab253 100644
--- a/packages/calcite-components/src/components/carousel/carousel.scss
+++ b/packages/calcite-components/src/components/carousel/carousel.scss
@@ -227,7 +227,7 @@ calcite-carousel-item:not([selected]) {
   transition:
     var(--calcite-animation-timing) ease-in-out inline-size,
     var(--calcite-animation-timing) ease-in-out padding,
-    var(--calcite-internal-animation-timing-slow) ease-in-out opacity;
+    var(--calcite-animation-timing) ease-in-out opacity;
 
   &.pagination-item--visible {
     @apply w-8 opacity-100 pointer-events-auto;
@@ -237,7 +237,7 @@ calcite-carousel-item:not([selected]) {
 
 .pagination-item--range-edge calcite-icon {
   scale: 0.75;
-  transition: var(--calcite-internal-animation-timing-slow) ease-in-out scale;
+  transition: var(--calcite-animation-timing) ease-in-out scale;
 }
 
 .container--overlaid .pagination-item {
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index d12bb3b18e2..5bf0ae07887 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -41,14 +41,13 @@ import {
 import { createObserver } from "../../utils/observers";
 import { breakpoints } from "../../utils/responsive";
 import { getRoundRobinIndex } from "../../utils/array";
-import { CSS, DURATION, ICONS, maxItemBreakpoints } from "./resources";
+import { CSS, DURATION, ICONS, centerItemsByBreakpoint } from "./resources";
 import { CarouselMessages } from "./assets/carousel/t9n";
 import { ArrowType, AutoplayType } from "./interfaces";
 
 /**
  * @slot - A slot for adding `calcite-carousel-item`s.
  */
-
 @Component({
   tag: "calcite-carousel",
   styleUrl: "carousel.scss",
@@ -269,7 +268,7 @@ export class Carousel
 
   @State() slideDurationRemaining = 1;
 
-  @State() maxItems = maxItemBreakpoints.xxsmall;
+  @State() maxItems = centerItemsByBreakpoint.xxsmall;
 
   private container: HTMLDivElement;
 
@@ -315,19 +314,26 @@ export class Carousel
   // --------------------------------------------------------------------------
 
   private setMaxItemsToBreakpoint(width: number): void {
-    if (!breakpoints || !width) {
+    if (!width) {
       return;
     }
 
-    const breakpointKeys = ["medium", "small", "xsmall", "xxsmall"];
-    for (const key of breakpointKeys) {
-      if (width >= breakpoints.width[key]) {
-        this.maxItems = maxItemBreakpoints[key];
-        return;
-      }
+    if (width >= breakpoints.width.small) {
+      this.maxItems = centerItemsByBreakpoint.medium;
+      return;
+    }
+
+    if (width >= breakpoints.width.xsmall) {
+      this.maxItems = centerItemsByBreakpoint.small;
+      return;
+    }
+
+    if (width >= breakpoints.width.xxsmall) {
+      this.maxItems = centerItemsByBreakpoint.xsmall;
+      return;
     }
 
-    this.maxItems = maxItemBreakpoints.xxsmall;
+    this.maxItems = centerItemsByBreakpoint.xxsmall;
   }
 
   private resizeHandler = ({ contentRect: { width } }: ResizeObserverEntry): void => {
diff --git a/packages/calcite-components/src/components/carousel/resources.ts b/packages/calcite-components/src/components/carousel/resources.ts
index f4123efc0cb..bd2c71e7278 100644
--- a/packages/calcite-components/src/components/carousel/resources.ts
+++ b/packages/calcite-components/src/components/carousel/resources.ts
@@ -30,8 +30,7 @@ export const ICONS = {
   play: "play-f",
 } as const;
 
-export const maxItemBreakpoints = {
-  large: 9,
+export const centerItemsByBreakpoint = {
   medium: 7,
   small: 5,
   xsmall: 3,

From 1dcb23a6678f16d9467023a4ee875acd41e3e1fe Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 15:58:34 -0700
Subject: [PATCH 10/15] Pr feedback

---
 .../src/components/carousel/carousel.tsx             | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 5bf0ae07887..948bb2a5e16 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -657,20 +657,20 @@ export class Carousel
     return (
       <div aria-label={label} class={CSS.paginationItems} role="tablist">
         {items.map((item, index) => {
-          const length = items.length;
+          const itemCount = items.length;
           const match = index === selectedIndex;
           const first = index === 0;
-          const last = index === length - 1;
-          const endRangeStart = length - maxItems - 1;
+          const last = index === itemCount - 1;
+          const endRangeStart = itemCount - maxItems - 1;
           const inStartRange = selectedIndex < maxItems;
           const inEndRange = selectedIndex > endRangeStart;
           const rangeStart = Math.max(0, selectedIndex - Math.floor(maxItems / 2));
-          const rangeEnd = Math.min(length, rangeStart + maxItems);
+          const rangeEnd = Math.min(itemCount, rangeStart + maxItems);
           const low = inStartRange ? 0 : inEndRange ? endRangeStart : rangeStart;
           const high = inStartRange ? maxItems + 1 : rangeEnd;
           const isEdge = !first && !last && !match && (index === low - 1 || index === high);
           const visible = match || (index <= high && index >= low - 1);
-          const overflowActive = length - 1 <= maxItems;
+          const overflowActive = itemCount - 1 <= maxItems;
           const icon = match ? ICONS.active : ICONS.inactive;
 
           return (
@@ -681,7 +681,7 @@ export class Carousel
                 [CSS.paginationItem]: true,
                 [CSS.paginationItemIndividual]: true,
                 [CSS.paginationItemSelected]: match,
-                [CSS.paginationItemRangeEdge]: length - 1 > maxItems && isEdge,
+                [CSS.paginationItemRangeEdge]: itemCount - 1 > maxItems && isEdge,
                 [CSS.paginationItemOutOfRange]: !(overflowActive || visible),
                 [CSS.paginationItemVisible]: overflowActive || visible,
               }}

From 2f601873106e6300805a55f0cf721a63fe72d8e9 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 16:09:32 -0700
Subject: [PATCH 11/15] Pr feedback

---
 .../calcite-components/src/components/carousel/carousel.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 948bb2a5e16..7dd4f5d233d 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -161,8 +161,6 @@ export class Carousel
   }
 
   async componentWillLoad(): Promise<void> {
-    this.setMaxItemsToBreakpoint(this.el.clientWidth);
-
     /* When the 'autoplay' property of type 'boolean | string' is set to true, the value is "". */
     if ((this.autoplay === "" || this.autoplay) && this.autoplay !== "paused") {
       this.handlePlay(false);
@@ -691,7 +689,7 @@ export class Carousel
               role="tab"
               title={item.label}
             >
-              <calcite-icon icon={icon} scale={"l"} />
+              <calcite-icon icon={icon} scale="l" />
             </button>
           );
         })}

From 851a04fa6e87aad119d7fca1e61b4467721fbe37 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 16:23:24 -0700
Subject: [PATCH 12/15] Clean up

---
 .../src/components/carousel/carousel.e2e.ts   | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
index c4a5f802ae0..93739c24ee9 100644
--- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
@@ -1060,7 +1060,7 @@ describe("renders the expected number of pagination items when overflowing", ()
   it("correctly limits the number of slide pagination items shown when overflowing xxsmall first selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xxsmall"]}px">
+      html`<calcite-carousel label="carousel" style="width:200px")">
         <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
@@ -1069,64 +1069,80 @@ describe("renders the expected number of pagination items when overflowing", ()
         <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
         <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
       </calcite-carousel>`,
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    console.log(items.length);
+
     expect(items).toHaveLength(centerItemsByBreakpoint["xxsmall"] + 2);
   });
-  it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
+
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall first selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xsmall"]}px">
-        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xxsmall"]}px">
+        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 4" selected><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
         <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
       </calcite-carousel>`,
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    console.log(items.length);
+
     expect(items).toHaveLength(centerItemsByBreakpoint["xsmall"] + 2);
   });
-  it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
+  it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["small"]}px">
-        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["xsmall"]}px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 4" selected><p>fourth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10"><p>tenth</p></calcite-carousel-item>
       </calcite-carousel>`,
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    console.log(items.length);
+
     expect(items).toHaveLength(centerItemsByBreakpoint["small"] + 2);
   });
-  it("correctly limits the number of slide pagination items shown when overflowing medium last selected", async () => {
+  it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["medium"]}px">
-        <calcite-carousel-item label="item 1" selected><p>first</p></calcite-carousel-item>
+      html`<calcite-carousel label="carousel" style="width:${breakpoints.width["small"]}px">
+        <calcite-carousel-item label="item 1"><p>first</p></calcite-carousel-item>
         <calcite-carousel-item label="item 2"><p>second</p></calcite-carousel-item>
         <calcite-carousel-item label="item 3"><p>third</p></calcite-carousel-item>
         <calcite-carousel-item label="item 4"><p>fourth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 5"><p>fifth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 6"><p>sixth</p></calcite-carousel-item>
         <calcite-carousel-item label="item 7"><p>seventh</p></calcite-carousel-item>
-        <calcite-carousel-item label="item 8" selected><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 8"><p>eighth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 9"><p>ninth</p></calcite-carousel-item>
+        <calcite-carousel-item label="item 10" selected><p>tenth</p></calcite-carousel-item>
       </calcite-carousel>`,
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
+    console.log(items.length);
     expect(items).toHaveLength(centerItemsByBreakpoint["medium"] + 2);
   });
 });

From e6cb3e4fb7066fb869b04d5cef649aee54107fca Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 16:25:51 -0700
Subject: [PATCH 13/15] Pr feedback

---
 .../src/components/carousel/carousel.e2e.ts         |  7 -------
 .../src/components/carousel/carousel.tsx            | 13 +++++++------
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.e2e.ts b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
index 93739c24ee9..7cd107e93b6 100644
--- a/packages/calcite-components/src/components/carousel/carousel.e2e.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.e2e.ts
@@ -1075,8 +1075,6 @@ describe("renders the expected number of pagination items when overflowing", ()
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    console.log(items.length);
-
     expect(items).toHaveLength(centerItemsByBreakpoint["xxsmall"] + 2);
   });
 
@@ -1098,8 +1096,6 @@ describe("renders the expected number of pagination items when overflowing", ()
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    console.log(items.length);
-
     expect(items).toHaveLength(centerItemsByBreakpoint["xsmall"] + 2);
   });
   it("correctly limits the number of slide pagination items shown when overflowing xsmall middle selected", async () => {
@@ -1120,8 +1116,6 @@ describe("renders the expected number of pagination items when overflowing", ()
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    console.log(items.length);
-
     expect(items).toHaveLength(centerItemsByBreakpoint["small"] + 2);
   });
   it("correctly limits the number of slide pagination items shown when overflowing small last selected", async () => {
@@ -1142,7 +1136,6 @@ describe("renders the expected number of pagination items when overflowing", ()
     );
 
     const items = await page.findAll(`calcite-carousel >>> .${CSS.paginationItemVisible}`);
-    console.log(items.length);
     expect(items).toHaveLength(centerItemsByBreakpoint["medium"] + 2);
   });
 });
diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index 7dd4f5d233d..f9d5da1a8ff 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -570,23 +570,24 @@ export class Carousel
   };
 
   private tabListKeyDownHandler = (event: KeyboardEvent): void => {
-    const targetEls = `button:not(.${CSS.paginationItemOutOfRange})`;
-    const interactiveItems = Array(...this.tabList.querySelectorAll(targetEls));
+    const visiblePaginationEls = Array(
+      ...this.tabList.querySelectorAll(`button:not(.${CSS.paginationItemOutOfRange})`),
+    );
     const currentEl = event.target as HTMLCalciteActionElement;
     switch (event.key) {
       case "ArrowRight":
-        focusElementInGroup(interactiveItems, currentEl, "next");
+        focusElementInGroup(visiblePaginationEls, currentEl, "next");
         break;
       case "ArrowLeft":
-        focusElementInGroup(interactiveItems, currentEl, "previous");
+        focusElementInGroup(visiblePaginationEls, currentEl, "previous");
         break;
       case "Home":
         event.preventDefault();
-        focusElementInGroup(interactiveItems, currentEl, "first");
+        focusElementInGroup(visiblePaginationEls, currentEl, "first");
         break;
       case "End":
         event.preventDefault();
-        focusElementInGroup(interactiveItems, currentEl, "last");
+        focusElementInGroup(visiblePaginationEls, currentEl, "last");
         break;
     }
   };

From 48a46d1fac09112b70ce52465ccd377fd18623c0 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 16:34:45 -0700
Subject: [PATCH 14/15] Clean up

---
 .../calcite-components/src/components/carousel/carousel.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index f9d5da1a8ff..93dd95db645 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -662,9 +662,9 @@ export class Carousel
           const last = index === itemCount - 1;
           const endRangeStart = itemCount - maxItems - 1;
           const inStartRange = selectedIndex < maxItems;
-          const inEndRange = selectedIndex > endRangeStart;
-          const rangeStart = Math.max(0, selectedIndex - Math.floor(maxItems / 2));
-          const rangeEnd = Math.min(itemCount, rangeStart + maxItems);
+          const inEndRange = selectedIndex >= endRangeStart;
+          const rangeStart = inStartRange ? 0 : selectedIndex - Math.floor(maxItems / 2);
+          const rangeEnd = inEndRange ? itemCount : rangeStart + maxItems;
           const low = inStartRange ? 0 : inEndRange ? endRangeStart : rangeStart;
           const high = inStartRange ? maxItems + 1 : rangeEnd;
           const isEdge = !first && !last && !match && (index === low - 1 || index === high);

From 367216a9269fe6f77728211d51cbbaf929061f49 Mon Sep 17 00:00:00 2001
From: Adam <adam@tirel.la>
Date: Tue, 17 Sep 2024 16:43:14 -0700
Subject: [PATCH 15/15] Clean up

---
 .../components/carousel/carousel.stories.ts   | 152 ++++++++++++++++++
 1 file changed, 152 insertions(+)

diff --git a/packages/calcite-components/src/components/carousel/carousel.stories.ts b/packages/calcite-components/src/components/carousel/carousel.stories.ts
index bf53e432826..b0039d05013 100644
--- a/packages/calcite-components/src/components/carousel/carousel.stories.ts
+++ b/packages/calcite-components/src/components/carousel/carousel.stories.ts
@@ -152,6 +152,158 @@ export const simpleManyItems = (args: CarouselStoryArgs): string =>
     </calcite-carousel>
   </div>`;
 
+export const simpleManyItemsNarrow = (args: CarouselStoryArgs): string =>
+  html` <div style="width:400px;height:400px;">
+    <calcite-carousel
+      control-overlay="${args.controlOverlay}"
+      ${boolean("disabled", args.disabled)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
+      label="${args.label}"
+      arrow-type="${args.arrowType}"
+    >
+      <calcite-carousel-item label="Carousel Item 1">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 2">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 3">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 4">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 5">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 6">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 7">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 8">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 9">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+    </calcite-carousel>
+  </div>`;
+
+export const simpleManyItemsVeryNarrow = (args: CarouselStoryArgs): string =>
+  html` <div style="width:200px;height:400px;">
+    <calcite-carousel
+      control-overlay="${args.controlOverlay}"
+      ${boolean("disabled", args.disabled)}
+      autoplay-duration="${args.autoplayDuration}"
+      ${args.autoplay ? "autoplay" : ""}
+      label="${args.label}"
+      arrow-type="${args.arrowType}"
+    >
+      <calcite-carousel-item label="Carousel Item 1">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-1"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 2">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-2"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 3">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-3"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 4">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-4"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 5">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-5"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 6">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-6"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 7">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-7"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 8">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-8"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+      <calcite-carousel-item label="Carousel Item 9">
+        <calcite-card>
+          <span slot="title">Some kind of carousel item content</span>
+          <span slot="subtitle">In this case, in a card</span>
+          <calcite-icon scale="s" slot="footer-start" icon="number-circle-9"></calcite-icon>
+        </calcite-card>
+      </calcite-carousel-item>
+    </calcite-carousel>
+  </div>`;
+
 export const carouselAutoplayFullImageWithOverlayAndEdge = (): string =>
   html` <div style="width:600px;height:400px;">
     <style>