From d570023ab447b6ba6694c38b611efae4db2cc0eb Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Thu, 25 Jul 2024 09:48:39 -0700
Subject: [PATCH 1/5] fix(tabs): Update tab title indicator display (#9666)

**Related Issue:** #8800, #8772

## Summary

Removes the previous selection indicator behavior and moves the styling
to the Tab Title component itself. Removes associated stale code and
tests. Small visual tweaks to resolve alignment and spacing issues.
---
 .../calcite-components/src/components.d.ts    |   4 -
 .../src/components/tab-nav/resources.ts       |   1 -
 .../src/components/tab-nav/tab-nav.e2e.ts     |  42 ----
 .../src/components/tab-nav/tab-nav.scss       |  48 -----
 .../src/components/tab-nav/tab-nav.tsx        |  69 -------
 .../src/components/tab-title/resources.ts     |   5 +
 .../src/components/tab-title/tab-title.e2e.ts |  50 -----
 .../src/components/tab-title/tab-title.scss   | 142 ++++++++++---
 .../src/components/tab-title/tab-title.tsx    |   6 +-
 .../src/components/tabs/tabs.e2e.ts           |  38 ----
 .../src/components/tabs/tabs.stories.ts       |  20 --
 .../calcite-components/src/demos/tabs.html    | 193 +++++++++++++++++-
 12 files changed, 304 insertions(+), 314 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 1c920006dcc..1c2de4bd221 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4873,8 +4873,6 @@ export namespace Components {
     }
     interface CalciteTabNav {
         "bordered": boolean;
-        "indicatorOffset": number;
-        "indicatorWidth": number;
         "layout": TabLayout;
         /**
           * Use this property to override individual strings used by the component.
@@ -12878,8 +12876,6 @@ declare namespace LocalJSX {
     }
     interface CalciteTabNav {
         "bordered"?: boolean;
-        "indicatorOffset"?: number;
-        "indicatorWidth"?: number;
         "layout"?: TabLayout;
         /**
           * Use this property to override individual strings used by the component.
diff --git a/packages/calcite-components/src/components/tab-nav/resources.ts b/packages/calcite-components/src/components/tab-nav/resources.ts
index 451228247f6..010d3306dfa 100644
--- a/packages/calcite-components/src/components/tab-nav/resources.ts
+++ b/packages/calcite-components/src/components/tab-nav/resources.ts
@@ -4,7 +4,6 @@ export const ICON = {
 } as const;
 
 export const CSS = {
-  activeIndicatorContainer: "tab-nav-active-indicator-container",
   container: "tab-nav",
   containerHasEndTabTitleOverflow: "tab-nav--end-overflow",
   containerHasStartTabTitleOverflow: "tab-nav--start-overflow",
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts
index e9d2be1069d..df4fe3bfd73 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.e2e.ts
@@ -48,48 +48,6 @@ describe("calcite-tab-nav", () => {
     expect(activeEventSpy).toHaveReceivedEventTimes(2);
   });
 
-  describe("selected indicator", () => {
-    const tabTitles = html`
-      <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
-      <calcite-tab-title>Tab 2 Title</calcite-tab-title>
-      <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-      <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-    `;
-
-    it("has its active indicator positioned from left if LTR", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-tab-nav>${tabTitles}</calcite-tab-nav>`);
-      const element = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator");
-      const style = await element.getComputedStyle();
-      expect(style["left"]).toBe("0px");
-      expect(style["right"]).not.toBe("0px");
-      expect(style["width"]).not.toBe("0px");
-    });
-
-    it("has its active indicator positioned from right if RTL", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-tab-nav dir='rtl'>${tabTitles}</calcite-tab-nav>`);
-      const element = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator");
-      const style = await element.getComputedStyle();
-      expect(style["right"]).toBe("0px");
-      expect(style["left"]).not.toBe("0px");
-      expect(style["width"]).not.toBe("0px");
-    });
-
-    it("updates position when made visible", async () => {
-      const page = await newE2EPage();
-      await page.setContent(`<calcite-tab-nav hidden>${tabTitles}</calcite-tab-nav>`);
-      const tabNav = await page.find("calcite-tab-nav");
-      const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator");
-
-      tabNav.setProperty("hidden", false);
-      await page.waitForChanges();
-
-      const style = await indicator.getComputedStyle();
-      expect(style["width"]).not.toBe("0px");
-    });
-  });
-
   it("focuses on keyboard interaction", async () => {
     const page = await newE2EPage();
     await page.setContent(
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
index ff0279df298..aedd6d89ffb 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss
@@ -28,7 +28,6 @@
 $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure the mask color stops overlap when both start and end are overflowing
 
 .tab-nav--start-overflow {
-  .tab-nav-active-indicator-container,
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
       to var(--calcite-internal-tab-nav-gradient-end-side),
@@ -41,7 +40,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
 }
 
 .tab-nav--end-overflow {
-  .tab-nav-active-indicator-container,
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
       to var(--calcite-internal-tab-nav-gradient-start-side),
@@ -54,7 +52,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
 }
 
 .tab-nav--start-overflow.tab-nav--end-overflow {
-  .tab-nav-active-indicator-container,
   .tab-titles-slot-wrapper {
     mask-image: linear-gradient(
         to var(--calcite-internal-tab-nav-gradient-end-side),
@@ -126,26 +123,6 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
     overflow-hidden;
 }
 
-// prevent indicator overflow in horizontal scrolling situations
-.tab-nav-active-indicator-container {
-  @apply absolute
-    bottom-0
-    h-0.5
-    inset-x-0
-    overflow-hidden
-    w-full;
-}
-
-.tab-nav-active-indicator {
-  @apply absolute
-    bg-brand
-    bottom-0
-    block
-    h-0.5
-    ease-out
-    transition-all;
-}
-
 .scroll-button-container {
   @apply absolute bottom-0 top-0;
 
@@ -195,29 +172,4 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th
   }
 }
 
-:host .position-bottom .tab-nav-active-indicator {
-  inset-block-end: unset;
-  @apply top-0;
-}
-
-:host .position-bottom .tab-nav-active-indicator-container {
-  inset-block-end: unset;
-  @apply top-0;
-}
-
-:host([bordered]) .tab-nav-active-indicator-container {
-  inset-block-end: unset; // display active blue line above instead of below
-}
-
-:host([bordered]) .position-bottom .tab-nav-active-indicator-container {
-  inset-block-end: 0; // display active blue line below instead of above
-  inset-block-start: unset;
-}
-
-@media (forced-colors: active) {
-  .tab-nav-active-indicator {
-    background-color: highlight;
-  }
-}
-
 @include base-component();
diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
index adaccde7ceb..ab5d5f1c958 100644
--- a/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
+++ b/packages/calcite-components/src/components/tab-nav/tab-nav.tsx
@@ -79,7 +79,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     this.calciteInternalTabChange.emit({
       tab: this.selectedTabId,
     });
-    this.updateActiveIndicator();
   }
 
   /**
@@ -106,16 +105,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
    */
   @Prop({ reflect: true, mutable: true }) bordered = false;
 
-  /**
-   * @internal
-   */
-  @Prop({ mutable: true }) indicatorOffset: number;
-
-  /**
-   * @internal
-   */
-  @Prop({ mutable: true }) indicatorWidth: number;
-
   /**
    * Made into a prop for testing purposes only.
    *
@@ -167,10 +156,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     this.layout = parentTabsEl?.layout;
     this.bordered = parentTabsEl?.bordered;
     this.effectiveDir = getElementDir(this.el);
-
-    if (this.selectedTitle) {
-      this.updateActiveIndicator();
-    }
   }
 
   componentDidRender(): void {
@@ -201,11 +186,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
 
   render(): VNode {
-    const width = `${this.indicatorWidth}px`;
-    const offset = `${this.indicatorOffset}px`;
-    const indicatorStyle =
-      this.effectiveDir !== "rtl" ? { width, left: offset } : { width, right: offset };
-
     return (
       <Host role="tablist">
         <div
@@ -217,7 +197,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
             [`position-${this.position}`]: true,
             [CSS_UTILITY.rtl]: this.effectiveDir === "rtl",
           }}
-          ref={this.storeContainerRef}
         >
           {this.renderScrollButton("start")}
           <div
@@ -230,18 +209,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
           >
             <slot onSlotchange={this.onSlotChange} />
           </div>
-          <div
-            class={{
-              [CSS.activeIndicatorContainer]: true,
-            }}
-            ref={(el) => (this.activeIndicatorContainerEl = el)}
-          >
-            <div
-              class="tab-nav-active-indicator"
-              ref={(el) => (this.activeIndicatorEl = el as HTMLElement)}
-              style={indicatorStyle}
-            />
-          </div>
           {this.renderScrollButton("end")}
         </div>
       </Host>
@@ -367,11 +334,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     event.stopPropagation();
   }
 
-  @Listen("calciteInternalTabIconChanged")
-  iconStartChangeHandler(): void {
-    this.updateActiveIndicator();
-  }
-
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -432,12 +394,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     });
   }
 
-  private activeIndicatorEl: HTMLElement;
-
-  private activeIndicatorContainerEl: HTMLDivElement;
-
-  private containerEl: HTMLDivElement;
-
   private effectiveDir: Direction = "ltr";
 
   private lastScrollWheelAxis: "x" | "y" = "x";
@@ -450,12 +406,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
 
   private resizeObserver = createObserver("resize", () => {
     this.updateScrollingState();
-
-    if (!this.activeIndicatorEl) {
-      return;
-    }
-
-    this.updateActiveIndicator();
   });
 
   private get scrollerButtonWidth(): number {
@@ -469,20 +419,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   //
   //--------------------------------------------------------------------------
 
-  private updateActiveIndicator(): void {
-    const tabTitleScrollLeft = this.tabTitleContainerEl?.scrollLeft;
-    const containerScrollLeft = this.containerEl?.scrollLeft;
-    const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
-    const tabLeft = this.selectedTitle?.offsetLeft;
-    const tabWidth = this.selectedTitle?.offsetWidth;
-    const offsetRight = navWidth - tabLeft - tabWidth;
-    const offsetBase = this.effectiveDir === "ltr" ? tabLeft : offsetRight;
-    const multiplier = this.effectiveDir === "ltr" ? -1 : 1;
-
-    this.indicatorOffset = offsetBase + multiplier * (containerScrollLeft + tabTitleScrollLeft);
-    this.indicatorWidth = this.selectedTitle?.offsetWidth;
-  }
-
   private onTabTitleWheel = (event: WheelEvent): void => {
     event.preventDefault();
 
@@ -504,7 +440,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
 
     const scrollByX = (this.effectiveDir === "rtl" ? -1 : 1) * scrollBy;
     (event.currentTarget as HTMLDivElement).scrollBy(scrollByX, 0);
-    requestAnimationFrame(() => this.updateActiveIndicator());
   };
 
   private onSlotChange = (event: Event): void => {
@@ -517,8 +452,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     this.calciteInternalTabNavSlotChange.emit(slottedElements);
   };
 
-  private storeContainerRef = (el: HTMLDivElement) => (this.containerEl = el);
-
   private storeTabTitleWrapperRef = (el: HTMLDivElement) => {
     this.tabTitleContainerEl = el;
     this.intersectionObserver = createObserver("intersection", () => this.updateScrollingState(), {
@@ -646,7 +579,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
   }
 
   private onTabTitleScroll = (): void => {
-    this.updateActiveIndicator();
     this.updateScrollingState();
   };
 
@@ -699,7 +631,6 @@ export class TabNav implements LocalizedComponent, T9nComponent {
     }
 
     requestAnimationFrame(() => {
-      this.updateActiveIndicator();
       tabTitles[this.selectedTabId].focus();
     });
   }
diff --git a/packages/calcite-components/src/components/tab-title/resources.ts b/packages/calcite-components/src/components/tab-title/resources.ts
index f0d85f55681..a2891547cb3 100644
--- a/packages/calcite-components/src/components/tab-title/resources.ts
+++ b/packages/calcite-components/src/components/tab-title/resources.ts
@@ -1,12 +1,17 @@
+import { Scale } from "../interfaces";
+
 export const CSS = {
   closeButton: "close-button",
   container: "container",
+  containerBottom: "container--bottom",
   content: "content",
   contentHasText: "content--has-text",
   iconEnd: "icon-end",
   iconPresent: "icon-present",
   iconStart: "icon-start",
   titleIcon: "calcite-tab-title--icon",
+  scale: (scale: Scale) => `scale-${scale}` as const,
+  selectedIndicator: "selected-indicator",
 };
 
 export const ICONS = {
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
index d9ad2e31879..3146dba8ca5 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
+++ b/packages/calcite-components/src/components/tab-title/tab-title.e2e.ts
@@ -343,54 +343,4 @@ describe("calcite-tab-title", () => {
     await page.keyboard.press("Enter");
     expect(activeEventSpy).toHaveReceivedEventTimes(2);
   });
-
-  describe("when the active tab-title changes", () => {
-    it("should move the active tab nav indicator", async () => {
-      const page = await newE2EPage({
-        html: `
-        <calcite-tabs>
-          <calcite-tab-nav slot="title-group">
-            <calcite-tab-title class="title-1">Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title class="title-2" selected>Tab 2 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 3 Title</calcite-tab-title>
-            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
-          </calcite-tab-nav>
-          <calcite-tab>Tab 1 Content</calcite-tab>
-          <calcite-tab selected>Tab 2 Content</calcite-tab>
-          <calcite-tab>Tab 3 Content</calcite-tab>
-          <calcite-tab>Tab 4 Content</calcite-tab>
-        </calcite-tabs>
-        `,
-      });
-      const tabTitle1 = await page.find(".title-1");
-      const tabTitle2 = await page.find(".title-2");
-
-      expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 2 Title");
-      expect(
-        await page.evaluate(() => {
-          return (
-            document
-              .querySelector("calcite-tab-nav")
-              .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement
-          ).style.left;
-        }),
-      ).not.toEqual("0px");
-
-      // toggle new selected tab-title
-      await tabTitle2.removeAttribute("selected");
-      await tabTitle1.setAttribute("selected", true);
-      await page.waitForChanges();
-
-      expect(await (await page.find("calcite-tab-title[selected]")).innerText).toEqual("Tab 1 Title");
-      expect(
-        await page.evaluate(() => {
-          return (
-            document
-              .querySelector("calcite-tab-nav")
-              .shadowRoot.querySelector(".tab-nav-active-indicator") as HTMLDivElement
-          ).style.left;
-        }),
-      ).toEqual("0px");
-    });
-  });
 });
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.scss b/packages/calcite-components/src/components/tab-title/tab-title.scss
index f995706fe33..9be58245133 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.scss
+++ b/packages/calcite-components/src/components/tab-title/tab-title.scss
@@ -12,29 +12,38 @@
 }
 
 .content {
-  @apply flex items-center justify-center;
+  @apply flex items-center justify-center h-full mb-0.5 relative box-border;
 }
 
 .scale-s {
   .content {
     @apply text-n2h py-1;
   }
+  .close-button {
+    @apply w-5;
+  }
 }
 
 .scale-m {
   .content {
     @apply text-n1h py-2;
   }
+  .close-button {
+    @apply w-7;
+  }
 }
 
 .scale-l {
   .content {
     @apply text-0h py-2.5;
   }
+  .close-button {
+    @apply w-8;
+  }
 }
 
 :host([closable]) .content {
-  @apply h-full box-border border-b-color-transparent;
+  @apply border-b-color-transparent;
 }
 
 :host([layout="inline"]),
@@ -55,8 +64,7 @@
 }
 
 .container {
-  @apply border-b-2
-  border-b-color-transparent
+  @apply relative 
   box-border
   content-center
   cursor-pointer
@@ -69,15 +77,82 @@
   text-n1h
   transition-default
   w-full;
+}
+
+.selected-indicator {
+  @apply absolute
+    block
+    w-full
+    h-0.5
+    transition-default;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inline-size: 100%;
+}
+
+.container--bottom .selected-indicator {
+  inset-block-end: unset;
+  inset-block-start: 0;
+}
+
+:host([bordered]) .selected-indicator {
+  inset-block-start: 0;
+  inset-block-end: unset;
+  inset-inline-start: -1px;
+  inset-inline-end: 0;
+  inline-size: calc(100% + var(--calcite-spacing-base));
+}
+
+:host([bordered][selected]) .container::after {
+  @apply absolute
+    block
+    w-full
+    h-0.5
+    transition-default;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+  inline-size: 100%;
+  background: var(--calcite-color-foreground-1);
+  content: "";
+}
 
-  border-block-end-style: solid;
+:host([bordered][selected]) .container.container--bottom::after {
+  inset-block-start: -1px;
 }
 
-:host([position="bottom"]) .container {
-  @apply border-t-color-transparent
-    border-b-0
-    border-t-2;
-  border-block-start-style: solid;
+:host([bordered][selected]:hover) .container::after {
+  background: var(--calcite-color-foreground-2);
+}
+
+:host([bordered][selected]:focus) .container::after {
+  background: transparent;
+}
+
+:host([bordered]) .container--bottom .selected-indicator {
+  inset-block-start: unset;
+  inset-block-end: 0;
+}
+
+:host([selected]) .selected-indicator,
+:host([selected]:hover) .selected-indicator {
+  @apply bg-brand;
+}
+
+:host(:hover) .selected-indicator {
+  background-color: var(--calcite-color-border-3);
+}
+
+:host(:focus) .selected-indicator,
+:host(:active) .selected-indicator {
+  background-color: var(--calcite-color-brand);
+}
+
+@media (forced-colors: active) {
+  .selected-indicator {
+    background-color: highlight;
+  }
 }
 
 :host([closed]) {
@@ -125,11 +200,11 @@
 }
 
 .content--has-text .calcite-tab-title--icon.icon-start {
-  margin-inline-end: theme("margin.2");
+  margin-inline-end: var(--calcite-spacing-sm);
 }
 
 .content--has-text .calcite-tab-title--icon.icon-end {
-  margin-inline-start: theme("margin.2");
+  margin-inline-start: var(--calcite-spacing-sm);
 }
 
 .close-button {
@@ -142,25 +217,29 @@
   focus-base
   items-center
   justify-center
-  p-1
+  h-full
   self-center
   text-color-3
   transition-default;
-
   background-color: var(--calcite-button-transparent-1);
-  margin-inline-start: auto;
+  // compensate for the added border on parent and ensure focus alignment
+  margin-inline-end: var(--calcite-spacing-px);
+  box-shadow:
+    var(--calcite-spacing-px) 0 0 0 transparent,
+    0 var(--calcite-spacing-xxs) 0 0 transparent;
+  block-size: calc(100% - var(--calcite-spacing-xxs));
 
+  &:hover {
+    box-shadow: var(--calcite-spacing-px) 0 0 0 var(--calcite-color-foreground-3);
+  }
   &:focus {
-    @apply focus-inset;
-
-    // ⚠️overriding outline-offset should be avoided as it won't honor --calcite-color-focus-offset-invert
-    outline-offset: -1px;
+    @apply focus-normal;
   }
 
   &:focus,
   &:hover {
     @apply text-color-1;
-    background-color: var(--calcite-color-foreground-2);
+    background-color: var(--calcite-color-foreground-3);
   }
 
   &:active {
@@ -176,7 +255,7 @@
 // compensate for spacing when no hastext and two icons
 :host([icon-start][icon-end]) {
   .calcite-tab-title--icon:first-child {
-    margin-inline-end: theme("margin.2");
+    margin-inline-end: var(--calcite-spacing-sm);
   }
 }
 
@@ -186,33 +265,28 @@
 }
 
 :host([bordered][selected]) {
-  box-shadow: inset 0 -2px var(--calcite-color-foreground-1);
+  box-shadow: inset 0 -1px var(--calcite-color-foreground-1);
 }
 
 :host([bordered][selected][position="bottom"]) {
-  box-shadow: inset 0 2px 0 var(--calcite-color-foreground-1);
+  box-shadow: inset 0 var(--calcite-spacing-base) 0 var(--calcite-color-foreground-1);
 }
 
 :host([bordered]:hover) {
   .container {
-    background-color: var(--calcite-color-transparent-hover);
+    background-color: var(--calcite-color-foreground-2);
   }
 }
 
 :host([closable]) .container,
 :host([bordered]) .container {
-  border-inline-start: 1px solid transparent;
-  border-inline-end: 1px solid transparent;
+  border-inline-start: var(--calcite-spacing-px) solid transparent;
+  border-inline-end: var(--calcite-spacing-px) solid transparent;
   .close-button {
-    margin-inline: 0;
+    margin-inline-start: var(--calcite-spacing-sm);
   }
 }
 
-:host([closable][position="bottom"]) .container,
-:host([bordered][position="bottom"]) .container {
-  border-block-start-style: unset;
-}
-
 :host([selected][bordered]) .container {
   border-inline-start-color: var(--calcite-color-border-1);
   border-inline-end-color: var(--calcite-color-border-1);
@@ -263,7 +337,7 @@
     border-block-end-style: solid;
   }
 
-  :host([bordered][position="bottom"]) .container {
+  :host([bordered]) .container--bottom {
     border-block-start-style: solid;
   }
 
@@ -271,7 +345,7 @@
     border-block-end-style: none;
   }
 
-  :host([bordered][position="bottom"][selected]) .container {
+  :host([bordered][selected]) .container--bottom {
     border-block-start-style: none;
   }
 
diff --git a/packages/calcite-components/src/components/tab-title/tab-title.tsx b/packages/calcite-components/src/components/tab-title/tab-title.tsx
index 7ff878514d5..8d79c1d504d 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -220,9 +220,10 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
         <InteractiveContainer disabled={this.disabled}>
           <div
             class={{
-              container: true,
+              [CSS.container]: true,
+              [CSS.containerBottom]: this.position === "bottom",
               [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
-              [`scale-${this.scale}`]: true,
+              [CSS.scale(this.scale)]: true,
             }}
             hidden={closed}
             ref={(el) => this.resizeObserver?.observe(el)}
@@ -233,6 +234,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
               {this.iconEnd ? iconEndEl : null}
             </div>
             {this.renderCloseButton()}
+            <div class={CSS.selectedIndicator} />
           </div>
         </InteractiveContainer>
       </Host>
diff --git a/packages/calcite-components/src/components/tabs/tabs.e2e.ts b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
index 98bd01bf3f2..819afba39c5 100644
--- a/packages/calcite-components/src/components/tabs/tabs.e2e.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.e2e.ts
@@ -172,44 +172,6 @@ describe("calcite-tabs", () => {
       expect(await page.find("calcite-tab-title")).toEqualAttribute("bordered", "");
       expect(await page.find("calcite-tab")).toEqualAttribute("bordered", null);
     });
-
-    it("should render tab-nav's blue active indicator on top", async () => {
-      const page = await newE2EPage({
-        html: `
-        <calcite-tabs bordered>
-          <calcite-tab-nav slot="title-group">
-            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
-          </calcite-tab-nav>
-          <calcite-tab>Tab 1 Content</calcite-tab>
-          <calcite-tab>Tab 2 Content</calcite-tab>
-        </calcite-tabs>
-        `,
-      });
-      const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
-      const indicatorStyles = await indicator.getComputedStyle();
-      expect(indicatorStyles.top).toEqual("0px");
-      expect(indicatorStyles.bottom).not.toEqual("0px");
-    });
-
-    it("should render tab-nav's blue active indicator on bottom when position is bottom", async () => {
-      const page = await newE2EPage({
-        html: `
-        <calcite-tabs bordered position="bottom">
-          <calcite-tab-nav slot="title-group">
-            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 1 Title</calcite-tab-title>
-            <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" >Tab 2 Title</calcite-tab-title>
-          </calcite-tab-nav>
-          <calcite-tab>Tab 1 Content</calcite-tab>
-          <calcite-tab>Tab 2 Content</calcite-tab>
-        </calcite-tabs>
-        `,
-      });
-      const indicator = await page.find("calcite-tab-nav >>> .tab-nav-active-indicator-container");
-      const indicatorStyles = await indicator.getComputedStyle();
-      expect(indicatorStyles.bottom).toEqual("0px");
-      expect(indicatorStyles.top).not.toEqual("0px");
-    });
   });
 
   it("should not ignore bordered attribute when layout is center", async () => {
diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
index 853d6f4924d..ee41fdb436a 100644
--- a/packages/calcite-components/src/components/tabs/tabs.stories.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -364,26 +364,6 @@ Tab200PercentHeightWithVerticalScroll.parameters = {
   chromatic: { delay: 1000 },
 };
 
-export const updateIndicatorOffset_TestOnly = (): string =>
-  html`<calcite-tabs>
-      <calcite-tab-nav slot="title-group">
-        <calcite-tab-title id="tab-title">Boats</calcite-tab-title>
-        <calcite-tab-title selected>Ships</calcite-tab-title>
-        <calcite-tab-title>Yachts</calcite-tab-title>
-      </calcite-tab-nav>
-      <calcite-tab>Tab 1 content</calcite-tab>
-      <calcite-tab>Tab 2 content</calcite-tab>
-      <calcite-tab>Tab 3 content</calcite-tab>
-    </calcite-tabs>
-    <script>
-      const tabTitle = document.getElementById("tab-title");
-      setTimeout(() => (tabTitle.iconStart = "bullet-point"), 300);
-    </script>`;
-
-updateIndicatorOffset_TestOnly.parameters = {
-  chromatic: { delay: 1000 },
-};
-
 export const fixedHeightNoVerticalScrollbar_TestOnly = (): string => html`
   <calcite-tabs style="height: 400px">
     <calcite-tab-nav slot="title-group">
diff --git a/packages/calcite-components/src/demos/tabs.html b/packages/calcite-components/src/demos/tabs.html
index c1170a0952a..866245228a4 100644
--- a/packages/calcite-components/src/demos/tabs.html
+++ b/packages/calcite-components/src/demos/tabs.html
@@ -71,6 +71,7 @@
             <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
             <calcite-tab-title>Tab 2 Title</calcite-tab-title>
             <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+            <calcite-tab-title>Tab 4 Title</calcite-tab-title>
           </calcite-tab-nav>
         </div>
       </div>
@@ -85,6 +86,7 @@
               <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
               <calcite-tab-title>Tab 2 Title</calcite-tab-title>
               <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title>Tab 4 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 Content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>
@@ -129,6 +131,7 @@
               <calcite-tab-title selected>Tab 1 Title</calcite-tab-title>
               <calcite-tab-title>Tab 2 Title</calcite-tab-title>
               <calcite-tab-title>Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title>Tab 4 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 Content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>
@@ -291,16 +294,80 @@
           </calcite-tabs>
         </div>
       </div>
+      <!-- icon end closable -->
+      <div class="flex-wrap">
+        <div class="child right-aligned-text">icon end closable</div>
+
+        <div class="child">
+          <calcite-tabs scale="s" style="width: 300px">
+            <calcite-tab-nav slot="title-group" scale="s">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+            </calcite-tab-nav>
+
+            <calcite-tab selected>Tab 1 Content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+
+        <div class="child">
+          <calcite-tabs scale="m" style="width: 300px">
+            <calcite-tab-nav slot="title-group" scale="m">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+            </calcite-tab-nav>
+
+            <calcite-tab selected>Tab 1 Content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+
+        <div class="child">
+          <calcite-tabs scale="l" style="width: 300px">
+            <calcite-tab-nav slot="title-group" scale="l">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+            </calcite-tab-nav>
+
+            <calcite-tab selected>Tab 1 Content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+      </div>
 
       <!-- with border + icon-start + icon end -->
       <div class="flex-wrap">
         <div class="child right-aligned-text">with border + icon-start + icon end</div>
 
         <div class="child">
-          <calcite-tabs bordered scale="s">
+          <calcite-tabs bordered scale="s" style="width: 300px">
             <calcite-tab-nav slot="title-group">
-              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 1 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>
@@ -308,10 +375,16 @@
         </div>
 
         <div class="child">
-          <calcite-tabs bordered scale="m">
+          <calcite-tabs bordered scale="m" style="width: 300px">
             <calcite-tab-nav slot="title-group">
-              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 1 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>
@@ -319,10 +392,72 @@
         </div>
 
         <div class="child">
-          <calcite-tabs bordered scale="l">
+          <calcite-tabs bordered scale="l" style="width: 300px">
             <calcite-tab-nav slot="title-group">
-              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 1 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+            </calcite-tab-nav>
+            <calcite-tab selected>Tab 1 content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+      </div>
+
+      <!-- with border + icon-start + icon end closable -->
+      <div class="flex-wrap">
+        <div class="child right-aligned-text">with border + icon-start + icon end closable</div>
+
+        <div class="child">
+          <calcite-tabs bordered scale="s" style="width: 300px">
+            <calcite-tab-nav slot="title-group">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+            </calcite-tab-nav>
+            <calcite-tab selected>Tab 1 content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+
+        <div class="child">
+          <calcite-tabs bordered scale="m" style="width: 300px">
+            <calcite-tab-nav slot="title-group">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
+            </calcite-tab-nav>
+            <calcite-tab selected>Tab 1 content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+
+        <div class="child">
+          <calcite-tabs bordered scale="l" style="width: 300px">
+            <calcite-tab-nav slot="title-group">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 4 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 5 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 6 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>
@@ -350,6 +485,7 @@
             <calcite-tab-nav slot="title-group">
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 1 Title</calcite-tab-title>
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>
@@ -361,6 +497,51 @@
             <calcite-tab-nav slot="title-group">
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right" selected>Tab 1 Title</calcite-tab-title>
               <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+              <calcite-tab-title icon-start="arrow-left" icon-end="arrow-right">Tab 3 Title</calcite-tab-title>
+            </calcite-tab-nav>
+            <calcite-tab selected>Tab 1 content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+      </div>
+
+      <!-- tab position: bottom with border + icon-start + icon end closable:  -->
+      <div class="flex-wrap">
+        <div class="child right-aligned-text">tab position: bottom with border + icon-start + icon end closable</div>
+
+        <div class="child">
+          <calcite-tabs bordered scale="s" position="bottom">
+            <calcite-tab-nav slot="title-group">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+            </calcite-tab-nav>
+            <calcite-tab selected>Tab 1 content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+
+        <div class="child">
+          <calcite-tabs bordered scale="m" position="bottom">
+            <calcite-tab-nav slot="title-group">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
+            </calcite-tab-nav>
+            <calcite-tab selected>Tab 1 content</calcite-tab>
+            <calcite-tab>Tab 2 Content</calcite-tab>
+          </calcite-tabs>
+        </div>
+
+        <div class="child">
+          <calcite-tabs bordered scale="l" position="bottom">
+            <calcite-tab-nav slot="title-group">
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right" selected
+                >Tab 1 Title</calcite-tab-title
+              >
+              <calcite-tab-title closable icon-start="arrow-left" icon-end="arrow-right">Tab 2 Title</calcite-tab-title>
             </calcite-tab-nav>
             <calcite-tab selected>Tab 1 content</calcite-tab>
             <calcite-tab>Tab 2 Content</calcite-tab>

From f9f386877b6780c3025e572eec869a0c682978d9 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 25 Jul 2024 16:55:10 +0000
Subject: [PATCH 2/5] chore: release next

---
 package-lock.json                                      | 10 +++++-----
 .../projects/component-library/CHANGELOG.md            |  4 ++++
 .../projects/component-library/package.json            |  4 ++--
 packages/calcite-components-react/CHANGELOG.md         |  4 ++++
 packages/calcite-components-react/package.json         |  4 ++--
 packages/calcite-components/CHANGELOG.md               |  7 +++++++
 packages/calcite-components/package.json               |  2 +-
 7 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fa35f4458d8..6761d30edb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30899,7 +30899,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "2.11.0-next.21",
+      "version": "2.11.0-next.22",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@esri/calcite-ui-icons": "3.29.0",
@@ -33715,10 +33715,10 @@
     },
     "packages/calcite-components-angular/projects/component-library": {
       "name": "@esri/calcite-components-angular",
-      "version": "2.11.0-next.21",
+      "version": "2.11.0-next.22",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.11.0-next.21",
+        "@esri/calcite-components": "^2.11.0-next.22",
         "tslib": "2.6.3"
       },
       "peerDependencies": {
@@ -33728,10 +33728,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "2.11.0-next.21",
+      "version": "2.11.0-next.22",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.11.0-next.21"
+        "@esri/calcite-components": "^2.11.0-next.22"
       },
       "peerDependencies": {
         "react": ">=16.7",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index 180a89f4fd9..e0c3cee900f 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.21...@esri/calcite-components-angular@2.11.0-next.22) (2024-07-25)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.11.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.20...@esri/calcite-components-angular@2.11.0-next.21) (2024-07-23)
 
 **Note:** Version bump only for package @esri/calcite-components-angular
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index df262dafdc8..da236cef8fe 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.11.0-next.21",
+  "version": "2.11.0-next.22",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
@@ -17,7 +17,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.21",
+    "@esri/calcite-components": "^2.11.0-next.22",
     "tslib": "2.6.3"
   },
   "peerDependencies": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index bbe29dbe3ee..a05ecca9df5 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.21...@esri/calcite-components-react@2.11.0-next.22) (2024-07-25)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.11.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.20...@esri/calcite-components-react@2.11.0-next.21) (2024-07-23)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 2783f5cb4ba..d212669800f 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "2.11.0-next.21",
+  "version": "2.11.0-next.22",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -28,7 +28,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.21"
+    "@esri/calcite-components": "^2.11.0-next.22"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index 818fc0f2fe9..f3c9c496836 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.21...@esri/calcite-components@2.11.0-next.22) (2024-07-25)
+
+### Bug Fixes
+
+- **shell:** fix resizing a slotted shell-panel when clicking to resize ([#9846](https://github.com/Esri/calcite-design-system/issues/9846)) ([2318905](https://github.com/Esri/calcite-design-system/commit/23189059dd8a0efa4e665c5a10d2dc1568e0d6ef)), closes [#9807](https://github.com/Esri/calcite-design-system/issues/9807)
+- **tabs:** Update tab title indicator display ([#9666](https://github.com/Esri/calcite-design-system/issues/9666)) ([d570023](https://github.com/Esri/calcite-design-system/commit/d570023ab447b6ba6694c38b611efae4db2cc0eb)), closes [#8800](https://github.com/Esri/calcite-design-system/issues/8800) [#8772](https://github.com/Esri/calcite-design-system/issues/8772)
+
 ## [2.11.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.20...@esri/calcite-components@2.11.0-next.21) (2024-07-23)
 
 ### Features
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index dd456a195ec..2176748fd99 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.11.0-next.21",
+  "version": "2.11.0-next.22",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

From 37229a5de4a6338c6d921d2def6afc38300bf636 Mon Sep 17 00:00:00 2001
From: Adam Tirella <adam@tirel.la>
Date: Thu, 25 Jul 2024 10:33:18 -0700
Subject: [PATCH 3/5] fix(carousel): Prevent duplicate animation when
 navigating via keyboard (#9848)

**Related Issue:** #9471

## Summary
When using `home` and `end` while focused on the Container, prevent
"re-navigating" to the currently active Carousel Item and showing a
duplicate animation. This matches the behavior when a user selects an
individual Carousel Item "dot", both with mouse or via keyboard.
---
 .../src/components/carousel/carousel.tsx               | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/carousel/carousel.tsx b/packages/calcite-components/src/components/carousel/carousel.tsx
index fb15ae06c3b..3185becb26b 100644
--- a/packages/calcite-components/src/components/carousel/carousel.tsx
+++ b/packages/calcite-components/src/components/carousel/carousel.tsx
@@ -494,6 +494,8 @@ export class Carousel
       return;
     }
 
+    const lastItem = this.items.length - 1;
+
     switch (event.key) {
       case " ":
       case "Enter":
@@ -512,13 +514,19 @@ export class Carousel
         break;
       case "Home":
         event.preventDefault();
+        if (this.selectedIndex === 0) {
+          return;
+        }
         this.direction = "backward";
         this.setSelectedItem(0, true);
         break;
       case "End":
         event.preventDefault();
+        if (this.selectedIndex === lastItem) {
+          return;
+        }
         this.direction = "forward";
-        this.setSelectedItem(this.items.length - 1, true);
+        this.setSelectedItem(lastItem, true);
         break;
     }
   };

From 3edd6581a950978e810a88bbaf28cb446bfd009b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 25 Jul 2024 17:39:51 +0000
Subject: [PATCH 4/5] chore: release next

---
 package-lock.json                                      | 10 +++++-----
 .../projects/component-library/CHANGELOG.md            |  4 ++++
 .../projects/component-library/package.json            |  4 ++--
 packages/calcite-components-react/CHANGELOG.md         |  4 ++++
 packages/calcite-components-react/package.json         |  4 ++--
 packages/calcite-components/CHANGELOG.md               |  6 ++++++
 packages/calcite-components/package.json               |  2 +-
 7 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6761d30edb3..bd1f5113c4e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30899,7 +30899,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "2.11.0-next.22",
+      "version": "2.11.0-next.23",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@esri/calcite-ui-icons": "3.29.0",
@@ -33715,10 +33715,10 @@
     },
     "packages/calcite-components-angular/projects/component-library": {
       "name": "@esri/calcite-components-angular",
-      "version": "2.11.0-next.22",
+      "version": "2.11.0-next.23",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.11.0-next.22",
+        "@esri/calcite-components": "^2.11.0-next.23",
         "tslib": "2.6.3"
       },
       "peerDependencies": {
@@ -33728,10 +33728,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "2.11.0-next.22",
+      "version": "2.11.0-next.23",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.11.0-next.22"
+        "@esri/calcite-components": "^2.11.0-next.23"
       },
       "peerDependencies": {
         "react": ">=16.7",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index e0c3cee900f..7d847ca61ac 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.22...@esri/calcite-components-angular@2.11.0-next.23) (2024-07-25)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.11.0-next.21...@esri/calcite-components-angular@2.11.0-next.22) (2024-07-25)
 
 **Note:** Version bump only for package @esri/calcite-components-angular
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index da236cef8fe..b62da298cfd 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.11.0-next.22",
+  "version": "2.11.0-next.23",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "bugs": {
@@ -17,7 +17,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.22",
+    "@esri/calcite-components": "^2.11.0-next.23",
     "tslib": "2.6.3"
   },
   "peerDependencies": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index a05ecca9df5..1b3be4dbb44 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.22...@esri/calcite-components-react@2.11.0-next.23) (2024-07-25)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.11.0-next.21...@esri/calcite-components-react@2.11.0-next.22) (2024-07-25)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index d212669800f..5707a517a25 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-react",
-  "version": "2.11.0-next.22",
+  "version": "2.11.0-next.23",
   "description": "A set of React components that wrap calcite components",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -28,7 +28,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.11.0-next.22"
+    "@esri/calcite-components": "^2.11.0-next.23"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index f3c9c496836..959743843b2 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.11.0-next.23](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.22...@esri/calcite-components@2.11.0-next.23) (2024-07-25)
+
+### Bug Fixes
+
+- **carousel:** Prevent duplicate animation when navigating via keyboard ([#9848](https://github.com/Esri/calcite-design-system/issues/9848)) ([37229a5](https://github.com/Esri/calcite-design-system/commit/37229a5de4a6338c6d921d2def6afc38300bf636)), closes [#9471](https://github.com/Esri/calcite-design-system/issues/9471)
+
 ## [2.11.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.11.0-next.21...@esri/calcite-components@2.11.0-next.22) (2024-07-25)
 
 ### Bug Fixes
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index 2176748fd99..567db28c352 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.11.0-next.22",
+  "version": "2.11.0-next.23",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",

From 14f8cff1b5ae6156715171ef4e6d261080cebc31 Mon Sep 17 00:00:00 2001
From: Ben Elan <no-reply@benelan.dev>
Date: Thu, 25 Jul 2024 13:53:57 -0700
Subject: [PATCH 5/5] ci: add type checking to github scripts (#9851)

## Summary

- Add
[`actions/github-script`](https://github.com/marketplace/actions/github-script)
types
- Add
[`@octokit/webhook-types`](https://www.npmjs.com/package/@octokit/webhooks-types)
for improved payload typing
- Use JSDoc wizardry to typecheck the JavaScript files used by our
workflows

## Notes

I got a husky error when installing the `github-script` types. Here is a
related issue: https://github.com/typicode/husky/issues/851

Upgrading husky resolves the error, so I created a pull request:
https://github.com/actions/github-script/pull/482

I installed `github-script` using the PR number for now. We can unpin
the PR once it's merged by re-installing via the [command in the
doc](https://github.com/actions/github-script/#use-scripts-with-jsdoc-support):

```sh
npm i -D @types/github-script@github:actions/github-script
```
---
 .github/scripts/addCalcitePackageLabel.js     |  12 +-
 .github/scripts/addEsriProductLabel.js        |  16 +-
 .github/scripts/addPriorityLabel.js           |  14 +-
 .github/scripts/assignForVerification.js      |  27 +-
 .github/scripts/assignPullRequestAuthor.js    |  19 +-
 .../scripts/labelPullRequestWithCommitType.js |  16 +-
 .github/scripts/notifyAboutNewComponent.js    |  26 +-
 .github/scripts/notifyWhenReadyForDev.js      |  23 +-
 .github/scripts/notifyWhenSpikeComplete.js    |  23 +-
 .github/scripts/support/utils.js              |  19 +
 .github/scripts/validatePullRequestTitle.js   |  14 +-
 package-lock.json                             | 452 ++++++++++++++++++
 package.json                                  |   2 +
 13 files changed, 607 insertions(+), 56 deletions(-)

diff --git a/.github/scripts/addCalcitePackageLabel.js b/.github/scripts/addCalcitePackageLabel.js
index 6e24ed308ec..92f4873e04a 100644
--- a/.github/scripts/addCalcitePackageLabel.js
+++ b/.github/scripts/addCalcitePackageLabel.js
@@ -1,12 +1,14 @@
+// @ts-check
 const { createLabelIfMissing } = require("./support/utils");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesEvent} */ (context.payload);
   const {
-    repo: { owner, repo },
-    payload: {
-      issue: { body, number: issue_number },
-    },
-  } = context;
+    issue: { body, number: issue_number },
+  } = payload;
 
   if (!body) {
     console.log("could not determine the issue body");
diff --git a/.github/scripts/addEsriProductLabel.js b/.github/scripts/addEsriProductLabel.js
index b7aa973e8e6..16f1080e9b9 100644
--- a/.github/scripts/addEsriProductLabel.js
+++ b/.github/scripts/addEsriProductLabel.js
@@ -1,13 +1,15 @@
+// @ts-check
 const { createLabelIfMissing } = require("./support/utils");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesEvent} */ (context.payload);
   const {
-    repo: { owner, repo },
-    payload: {
-      action,
-      issue: { body, number: issue_number },
-    },
-  } = context;
+    action,
+    issue: { body, number: issue_number },
+  } = payload;
 
   if (!body) {
     console.log("could not determine the issue body");
@@ -28,7 +30,7 @@ module.exports = async ({ github, context }) => {
 
   const product = (productRegexMatch && productRegexMatch[0] ? productRegexMatch[0] : "").trim();
 
-  if (product && product !== "N/A") {
+  if (product !== "N/A") {
     await createLabelIfMissing({
       github,
       context,
diff --git a/.github/scripts/addPriorityLabel.js b/.github/scripts/addPriorityLabel.js
index cdf79e04ae6..abe30b4138e 100644
--- a/.github/scripts/addPriorityLabel.js
+++ b/.github/scripts/addPriorityLabel.js
@@ -1,13 +1,15 @@
+// @ts-check
 const { createLabelIfMissing } = require("./support/utils");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesEvent} */ (context.payload);
   const {
-    repo: { owner, repo },
-    payload: {
-      action,
-      issue: { body, number: issue_number },
-    },
-  } = context;
+    action,
+    issue: { body, number: issue_number },
+  } = payload;
 
   if (!body) {
     console.log("could not determine the issue body");
diff --git a/.github/scripts/assignForVerification.js b/.github/scripts/assignForVerification.js
index 1a3cca231e4..173fe3731ea 100644
--- a/.github/scripts/assignForVerification.js
+++ b/.github/scripts/assignForVerification.js
@@ -1,25 +1,38 @@
+// @ts-check
 const { handoff, issueWorkflow } = require("./support/resources");
 const { removeLabel } = require("./support/utils");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesLabeledEvent} */ (context.payload);
+  const {
+    label,
+    issue: { number },
+  } = payload;
+
   const { ISSUE_VERIFIERS, CALCITE_DESIGNERS } = process.env;
-  const { label } = context.payload;
 
-  if (label && label.name === issueWorkflow.installed) {
+  if (label?.name === issueWorkflow.installed) {
     const issueProps = {
-      issue_number: context.issue.number,
-      owner: context.repo.owner,
-      repo: context.repo.repo,
+      owner,
+      repo,
+      issue_number: number,
     };
 
     const { data: issue } = await github.rest.issues.get(issueProps);
 
     await removeLabel({ github, context, label: issueWorkflow.inDevelopment });
 
-    const assignees = ISSUE_VERIFIERS.split(",").map((v) => v.trim());
+    const assignees = ISSUE_VERIFIERS?.split(",").map((v) => v.trim());
 
     // assign designers if figma updates are required
-    if (issue.labels.map((label) => label.name).includes(handoff.figmaChanges)) {
+    if (
+      assignees &&
+      CALCITE_DESIGNERS &&
+      issue.labels.map((label) => (typeof label === "string" ? label : label.name)).includes(handoff.figmaChanges)
+    ) {
       assignees.push(...CALCITE_DESIGNERS.split(",").map((v) => v.trim()));
     }
 
diff --git a/.github/scripts/assignPullRequestAuthor.js b/.github/scripts/assignPullRequestAuthor.js
index 2d9f5be2255..7e72b3f29b8 100644
--- a/.github/scripts/assignPullRequestAuthor.js
+++ b/.github/scripts/assignPullRequestAuthor.js
@@ -1,17 +1,24 @@
+// @ts-check
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').PullRequestEvent} */ (context.payload);
   const {
-    assignees,
-    number,
-    user: { login: author },
-  } = context.payload.pull_request;
+    pull_request: {
+      assignees,
+      number,
+      user: { login: author },
+    },
+  } = payload;
 
   const updatedAssignees =
     assignees && assignees.length ? [...assignees.map((a) => a.login).filter((a) => a !== author), author] : [author];
 
   try {
     await github.rest.issues.addAssignees({
-      owner: context.repo.owner,
-      repo: context.repo.repo,
+      owner,
+      repo,
       issue_number: number,
       assignees: updatedAssignees,
     });
diff --git a/.github/scripts/labelPullRequestWithCommitType.js b/.github/scripts/labelPullRequestWithCommitType.js
index ed6fe6a247f..f443ce21546 100644
--- a/.github/scripts/labelPullRequestWithCommitType.js
+++ b/.github/scripts/labelPullRequestWithCommitType.js
@@ -1,7 +1,14 @@
+// @ts-check
 const { issueType } = require("./support/resources");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
-  const { title, number } = context.payload.pull_request;
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').PullRequestEvent} */ (context.payload);
+  const {
+    pull_request: { title, number },
+  } = payload;
 
   const conventionalCommitRegex =
     /^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([\w ,-]+\))?(!?:\s+)([\w ]+[\s\S]*)/i;
@@ -23,9 +30,9 @@ module.exports = async ({ github, context }) => {
 
   try {
     await github.rest.issues.addLabels({
+      owner,
+      repo,
       issue_number: number,
-      owner: context.repo.owner,
-      repo: context.repo.repo,
       labels: [typeLabel],
     });
   } catch (e) {
@@ -33,6 +40,9 @@ module.exports = async ({ github, context }) => {
   }
 };
 
+/**
+ * @param {string} type
+ */
 function getLabelName(type) {
   switch (type) {
     case "feat":
diff --git a/.github/scripts/notifyAboutNewComponent.js b/.github/scripts/notifyAboutNewComponent.js
index ac27c2be3f5..d407970a88e 100644
--- a/.github/scripts/notifyAboutNewComponent.js
+++ b/.github/scripts/notifyAboutNewComponent.js
@@ -1,16 +1,32 @@
+// @ts-check
 // If the "new component" label is added to an issue, generates a notification to the Calcite designer lead(s)
 // The secret is formatted like so: designer1, designer2, designer3
 // Note the script automatically adds the "@" character in to notify the designer lead(s)
+
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
-  const { designers } = process.env;
+  const { repo, owner } = context.repo;
+
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesLabeledEvent} */ (context.payload);
+  const {
+    issue: { number },
+  } = payload;
+
+  const { DESIGNERS } = process.env;
+
   // Add a "@" character to notify the user
-  const calcite_designers = designers.split(",").map((v) => " @" + v.trim());
+  const calcite_designers = DESIGNERS?.split(",").map((v) => " @" + v.trim());
+
+  if (!calcite_designers?.length) {
+    console.error("unable to determine designers");
+    process.exit(1);
+  }
 
   // Add a comment to issues with the 'new component' label to notify the designer(s)
   await github.rest.issues.createComment({
-    issue_number: context.issue.number,
-    owner: context.repo.owner,
-    repo: context.repo.repo,
+    owner,
+    repo,
+    issue_number: number,
     body: `cc ${calcite_designers}`,
   });
 };
diff --git a/.github/scripts/notifyWhenReadyForDev.js b/.github/scripts/notifyWhenReadyForDev.js
index 2c790ea531f..3b7d8c73ed3 100644
--- a/.github/scripts/notifyWhenReadyForDev.js
+++ b/.github/scripts/notifyWhenReadyForDev.js
@@ -1,3 +1,4 @@
+// @ts-check
 // When the "ready for dev" label is added to an issue:
 // 1. Modifies the labels,
 // 2. Updates the assignees and milestone, and
@@ -9,18 +10,26 @@
 const { issueWorkflow, planning } = require("./support/resources");
 const { removeLabel } = require("./support/utils");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
-  const { managers } = process.env;
-  const { label } = context.payload;
+  const { repo, owner } = context.repo;
 
-  if (label && label.name === "ready for dev") {
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesLabeledEvent} */ (context.payload);
+  const {
+    issue: { number },
+    label,
+  } = payload;
+
+  const { MANAGERS } = process.env;
+
+  if (label?.name === "ready for dev") {
     // Add a "@" character to notify the user
-    const calcite_managers = managers.split(",").map((v) => " @" + v.trim());
+    const calcite_managers = MANAGERS?.split(",").map((v) => " @" + v.trim());
 
     const issueProps = {
-      issue_number: context.issue.number,
-      owner: context.repo.owner,
-      repo: context.repo.repo,
+      owner,
+      repo,
+      issue_number: number,
     };
 
     /* Modify labels */
diff --git a/.github/scripts/notifyWhenSpikeComplete.js b/.github/scripts/notifyWhenSpikeComplete.js
index d8364583aa4..7189509f2d0 100644
--- a/.github/scripts/notifyWhenSpikeComplete.js
+++ b/.github/scripts/notifyWhenSpikeComplete.js
@@ -1,3 +1,4 @@
+// @ts-check
 // When the "spike complete" label is added to an issue:
 // 1. Modifies the labels,
 // 2. Updates the assignees and milestone, and
@@ -9,18 +10,26 @@
 const { issueWorkflow, planning } = require("./support/resources");
 const { removeLabel } = require("./support/utils");
 
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ github, context }) => {
-  const { managers } = process.env;
-  const { label } = context.payload;
+  const { repo, owner } = context.repo;
 
-  if (label && label.name === planning.spikeComplete) {
+  const payload = /** @type {import('@octokit/webhooks-types').IssuesLabeledEvent} */ (context.payload);
+  const {
+    issue: { number },
+    label,
+  } = payload;
+
+  const { MANAGERS } = process.env;
+
+  if (label?.name === planning.spikeComplete) {
     // Add a "@" character to notify the user
-    const calcite_managers = managers.split(",").map((v) => " @" + v.trim());
+    const calcite_managers = MANAGERS?.split(",").map((v) => " @" + v.trim());
 
     const issueProps = {
-      issue_number: context.issue.number,
-      owner: context.repo.owner,
-      repo: context.repo.repo,
+      owner,
+      repo,
+      issue_number: number,
     };
 
     /* Modify labels */
diff --git a/.github/scripts/support/utils.js b/.github/scripts/support/utils.js
index 01016c1b357..4150a44ef26 100644
--- a/.github/scripts/support/utils.js
+++ b/.github/scripts/support/utils.js
@@ -1,4 +1,13 @@
+// @ts-check
 module.exports = {
+  /**
+   * @typedef {object} removeLabelParam
+   * @property {InstanceType<typeof import('@actions/github/lib/utils').GitHub>} github
+   * @property {import('@actions/github/lib/context').Context} context
+   * @property {string} label
+   *
+   * @param {removeLabelParam} obj
+   **/
   removeLabel: async ({ github, context, label }) => {
     const { owner, repo } = context.repo;
     const issue_number = context.issue.number;
@@ -15,6 +24,16 @@ module.exports = {
     }
   },
 
+  /**
+   * @typedef {object} createLabelIfMissingParam
+   * @property {InstanceType<typeof import('@actions/github/lib/utils').GitHub>} github
+   * @property {import('@actions/github/lib/context').Context} context
+   * @property {string} label
+   * @property {string} color
+   * @property {string} description
+   *
+   * @param {createLabelIfMissingParam} obj
+   **/
   createLabelIfMissing: async ({ github, context, label, color, description }) => {
     const { owner, repo } = context.repo;
     try {
diff --git a/.github/scripts/validatePullRequestTitle.js b/.github/scripts/validatePullRequestTitle.js
index f76fbae63bb..e67ba100b95 100644
--- a/.github/scripts/validatePullRequestTitle.js
+++ b/.github/scripts/validatePullRequestTitle.js
@@ -1,4 +1,9 @@
+// @ts-check
+/** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
 module.exports = async ({ context, core }) => {
+  const payload = /** @type {import('@octokit/webhooks-types').PullRequestEvent} */ (context.payload);
+  const { title } = payload.pull_request;
+
   const REGEX = new RegExp("^[^…]+$"); // Title must match this regex
   const MIN_LENGTH = 1; // Min length of the title
   const MAX_LENGTH = -1; // Max length of the title (-1 is no max)
@@ -6,10 +11,13 @@ module.exports = async ({ context, core }) => {
   const DISALLOWED_PREFIXES = []; // Title cannot start with one of these prefixes
   const PREFIX_CASE_SENSITIVE = false; // Whether the prefix is case sensitive
 
+  /**
+   * @param {string} title
+   * @param {string} prefix
+   */
   const validateTitlePrefix = (title, prefix) =>
     PREFIX_CASE_SENSITIVE ? title.startsWith(prefix) : title.toLowerCase().startsWith(prefix.toLowerCase());
 
-  const { title } = context.payload.pull_request;
   if (!REGEX.test(title)) {
     core.setFailed(`Pull Request title "${title}" failed to match regex - ${REGEX}`);
     return;
@@ -28,7 +36,7 @@ module.exports = async ({ context, core }) => {
   core.info(`Allowed Prefixes: ${ALLOWED_PREFIXES}`);
   if (ALLOWED_PREFIXES.length && !ALLOWED_PREFIXES.some((prefix) => validateTitlePrefix(title, prefix))) {
     core.setFailed(
-      `Pull Request title "${title}" did not start with any of the required prefixes - ${ALLOWED_PREFIXES}`
+      `Pull Request title "${title}" did not start with any of the required prefixes - ${ALLOWED_PREFIXES}`,
     );
     return;
   }
@@ -36,7 +44,7 @@ module.exports = async ({ context, core }) => {
   core.info(`Disallowed Prefixes: ${DISALLOWED_PREFIXES}`);
   if (DISALLOWED_PREFIXES.length && DISALLOWED_PREFIXES.some((prefix) => validateTitlePrefix(title, prefix))) {
     core.setFailed(
-      `Pull Request title "${title}" started with one of the disallowed prefixes - ${DISALLOWED_PREFIXES}`
+      `Pull Request title "${title}" started with one of the disallowed prefixes - ${DISALLOWED_PREFIXES}`,
     );
     return;
   }
diff --git a/package-lock.json b/package-lock.json
index bd1f5113c4e..5dfbf9416c8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@cspell/eslint-plugin": "8.9.1",
         "@esri/calcite-base": "1.2.0",
         "@esri/calcite-colors": "6.1.0",
+        "@octokit/webhooks-types": "7.5.1",
         "@prettier/sync": "0.5.2",
         "@rollup/plugin-node-resolve": "15.2.3",
         "@rollup/plugin-replace": "5.0.7",
@@ -42,6 +43,7 @@
         "@types/dedent": "0.7.2",
         "@types/eslint": "8.56.10",
         "@types/estree": "1.0.5",
+        "@types/github-script": "github:actions/github-script#pull/482",
         "@types/jest": "29.5.12",
         "@types/jest-axe": "3.5.9",
         "@types/jsdom": "21.1.7",
@@ -112,6 +114,264 @@
         "@nx/nx-win32-x64-msvc": "19.5.1"
       }
     },
+    "node_modules/@actions/core": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/@actions/core/-/core-1.10.1.tgz",
+      "integrity": "sha512-3lBR9EDAY+iYIpTnTIXmWcNbX3T2kCkAEQGIQx4NVQ0575nk2k3GRZDTPQG+vVtS2izSLmINlxXf0uLtnrTP+g==",
+      "dev": true,
+      "dependencies": {
+        "@actions/http-client": "^2.0.1",
+        "uuid": "^8.3.2"
+      }
+    },
+    "node_modules/@actions/core/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
+    "node_modules/@actions/exec": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@actions/exec/-/exec-1.1.1.tgz",
+      "integrity": "sha512-+sCcHHbVdk93a0XT19ECtO/gIXoxvdsgQLzb2fE2/5sIZmWQuluYyjPQtrtTHdU1YzTZ7bAPN4sITq2xi1679w==",
+      "dev": true,
+      "dependencies": {
+        "@actions/io": "^1.0.1"
+      }
+    },
+    "node_modules/@actions/github": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@actions/github/-/github-6.0.0.tgz",
+      "integrity": "sha512-alScpSVnYmjNEXboZjarjukQEzgCRmjMv6Xj47fsdnqGS73bjJNDpiiXmp8jr0UZLdUB6d9jW63IcmddUP+l0g==",
+      "dev": true,
+      "dependencies": {
+        "@actions/http-client": "^2.2.0",
+        "@octokit/core": "^5.0.1",
+        "@octokit/plugin-paginate-rest": "^9.0.0",
+        "@octokit/plugin-rest-endpoint-methods": "^10.0.0"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/auth-token": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/core": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/auth-token": "^4.0.0",
+        "@octokit/graphql": "^7.1.0",
+        "@octokit/request": "^8.3.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/endpoint": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz",
+      "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/graphql": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
+      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request": "^8.3.0",
+        "@octokit/types": "^13.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/openapi-types": {
+      "version": "22.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
+      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
+      "dev": true
+    },
+    "node_modules/@actions/github/node_modules/@octokit/plugin-paginate-rest": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-9.2.1.tgz",
+      "integrity": "sha512-wfGhE/TAkXZRLjksFXuDZdmGnJQHvtU/joFQdweXUgzo1XwvBCD4o4+75NtFfjfLK5IwLf9vHTfSiU3sLRYpRw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^12.6.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/openapi-types": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-20.0.0.tgz",
+      "integrity": "sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA==",
+      "dev": true
+    },
+    "node_modules/@actions/github/node_modules/@octokit/plugin-paginate-rest/node_modules/@octokit/types": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-12.6.0.tgz",
+      "integrity": "sha512-1rhSOfRa6H9w4YwK0yrf5faDaDTb+yLyBUKOCV4xtCDB5VmIPqd/v9yr9o6SAzOAlRxMiRiCic6JVM1/kunVkw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^20.0.0"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/plugin-rest-endpoint-methods": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-10.4.1.tgz",
+      "integrity": "sha512-xV1b+ceKV9KytQe3zCVqjg+8GTGfDYwaT1ATU5isiUyVtlVAO3HNdzpS4sr4GBx4hxQ46s7ITtZrAsxG22+rVg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^12.6.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/openapi-types": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-20.0.0.tgz",
+      "integrity": "sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA==",
+      "dev": true
+    },
+    "node_modules/@actions/github/node_modules/@octokit/plugin-rest-endpoint-methods/node_modules/@octokit/types": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-12.6.0.tgz",
+      "integrity": "sha512-1rhSOfRa6H9w4YwK0yrf5faDaDTb+yLyBUKOCV4xtCDB5VmIPqd/v9yr9o6SAzOAlRxMiRiCic6JVM1/kunVkw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^20.0.0"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/request": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz",
+      "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/endpoint": "^9.0.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/request-error": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz",
+      "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@actions/github/node_modules/@octokit/types": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.5.0.tgz",
+      "integrity": "sha512-HdqWTf5Z3qwDVlzCrP8UJquMwunpDiMPt5er+QjGzL4hqr/vBVY/MauQgS1xWxCDT1oMx1EULyqxncdCY/NVSQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^22.2.0"
+      }
+    },
+    "node_modules/@actions/glob": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@actions/glob/-/glob-0.4.0.tgz",
+      "integrity": "sha512-+eKIGFhsFa4EBwaf/GMyzCdWrXWymGXfFmZU3FHQvYS8mPcHtTtZONbkcqqUMzw9mJ/pImEBFET1JNifhqGsAQ==",
+      "dev": true,
+      "dependencies": {
+        "@actions/core": "^1.9.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "node_modules/@actions/glob/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@actions/glob/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@actions/http-client": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@actions/http-client/-/http-client-2.2.1.tgz",
+      "integrity": "sha512-KhC/cZsq7f8I4LfZSJKgCvEwfkE8o1538VoBeoGzokVLLnbFDEAdFD3UhoMklxo2un9NJVBdANOresx7vTHlHw==",
+      "dev": true,
+      "dependencies": {
+        "tunnel": "^0.0.6",
+        "undici": "^5.25.4"
+      }
+    },
+    "node_modules/@actions/http-client/node_modules/undici": {
+      "version": "5.28.4",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.28.4.tgz",
+      "integrity": "sha512-72RFADWFqKmUb2hmmvNODKL3p9hcB6Gt2DOQMis1SEBaV6a4MH8soBvzg+95CYhCKPFedut2JY9bMfrDl9D23g==",
+      "dev": true,
+      "dependencies": {
+        "@fastify/busboy": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.0"
+      }
+    },
+    "node_modules/@actions/io": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@actions/io/-/io-1.1.3.tgz",
+      "integrity": "sha512-wi9JjgKLYS7U/z8PPbco+PvTb/nRWjeoFlJ1Qer83k/3C5PHQi28hiVdeE2kHXmIL99mQFawx8qt/JPjZilJ8Q==",
+      "dev": true
+    },
     "node_modules/@adobe/css-tools": {
       "version": "4.3.3",
       "dev": true,
@@ -3237,6 +3497,15 @@
       "resolved": "packages/eslint-plugin-calcite-components",
       "link": true
     },
+    "node_modules/@fastify/busboy": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
+      "integrity": "sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.2",
       "license": "MIT",
@@ -5713,6 +5982,12 @@
         "@octokit/openapi-types": "^18.0.0"
       }
     },
+    "node_modules/@octokit/webhooks-types": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/@octokit/webhooks-types/-/webhooks-types-7.5.1.tgz",
+      "integrity": "sha512-1dozxWEP8lKGbtEu7HkRbK1F/nIPuJXNfT0gd96y6d3LcHZTtRtlf8xz3nicSJfesADxJyDh+mWBOsdLkqgzYw==",
+      "dev": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "dev": true,
@@ -7362,6 +7637,168 @@
         "@types/send": "*"
       }
     },
+    "node_modules/@types/github-script": {
+      "name": "github-script",
+      "version": "7.0.1",
+      "resolved": "git+ssh://git@github.com/actions/github-script.git#c44be22d0bdc111a630a891945557ae7fcedc80b",
+      "dev": true,
+      "dependencies": {
+        "@actions/core": "^1.10.1",
+        "@actions/exec": "^1.1.1",
+        "@actions/github": "^6.0.0",
+        "@actions/glob": "^0.4.0",
+        "@actions/io": "^1.1.3",
+        "@octokit/core": "^5.0.1",
+        "@octokit/plugin-request-log": "^4.0.0",
+        "@octokit/plugin-retry": "^6.0.1",
+        "@types/node": "^20.9.0"
+      },
+      "engines": {
+        "node": ">=20.0.0 <21.0.0"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/auth-token": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/auth-token/-/auth-token-4.0.0.tgz",
+      "integrity": "sha512-tY/msAuJo6ARbK6SPIxZrPBms3xPbfwBrulZe0Wtr/DIY9lje2HeV1uoebShn6mx7SjCHif6EjMvoREj+gZ+SA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/core": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/core/-/core-5.2.0.tgz",
+      "integrity": "sha512-1LFfa/qnMQvEOAdzlQymH0ulepxbxnCYAKJZfMci/5XJyIHWgEYnDmgnKakbTh7CH2tFQ5O60oYDvns4i9RAIg==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/auth-token": "^4.0.0",
+        "@octokit/graphql": "^7.1.0",
+        "@octokit/request": "^8.3.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.0.0",
+        "before-after-hook": "^2.2.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/endpoint": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/@octokit/endpoint/-/endpoint-9.0.5.tgz",
+      "integrity": "sha512-ekqR4/+PCLkEBF6qgj8WqJfvDq65RH85OAgrtnVp1mSxaXF03u2xW/hUdweGS5654IlC0wkNYC18Z50tSYTAFw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/graphql": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/graphql/-/graphql-7.1.0.tgz",
+      "integrity": "sha512-r+oZUH7aMFui1ypZnAvZmn0KSqAUgE1/tUXIWaqUCa1758ts/Jio84GZuzsvUkme98kv0WFY8//n0J1Z+vsIsQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request": "^8.3.0",
+        "@octokit/types": "^13.0.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/openapi-types": {
+      "version": "22.2.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-22.2.0.tgz",
+      "integrity": "sha512-QBhVjcUa9W7Wwhm6DBFu6ZZ+1/t/oYxqc2tp81Pi41YNuJinbFRx8B133qVOrAaBbF7D/m0Et6f9/pZt9Rc+tg==",
+      "dev": true
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/plugin-request-log": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-4.0.1.tgz",
+      "integrity": "sha512-GihNqNpGHorUrO7Qa9JbAl0dbLnqJVrV8OXe2Zm5/Y4wFkZQDfTreBzVmiRfJVfE4mClXdihHnbpyyO9FSX4HA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": "5"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/plugin-retry": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-retry/-/plugin-retry-6.0.1.tgz",
+      "integrity": "sha512-SKs+Tz9oj0g4p28qkZwl/topGcb0k0qPNX/i7vBKmDsjoeqnVfFUquqrE/O9oJY7+oLzdCtkiWSXLpLjvl6uog==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/request-error": "^5.0.0",
+        "@octokit/types": "^12.0.0",
+        "bottleneck": "^2.15.3"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "@octokit/core": ">=5"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/plugin-retry/node_modules/@octokit/openapi-types": {
+      "version": "20.0.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-20.0.0.tgz",
+      "integrity": "sha512-EtqRBEjp1dL/15V7WiX5LJMIxxkdiGJnabzYx5Apx4FkQIFgAfKumXeYAqqJCj1s+BMX4cPFIFC4OLCR6stlnA==",
+      "dev": true
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/plugin-retry/node_modules/@octokit/types": {
+      "version": "12.6.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-12.6.0.tgz",
+      "integrity": "sha512-1rhSOfRa6H9w4YwK0yrf5faDaDTb+yLyBUKOCV4xtCDB5VmIPqd/v9yr9o6SAzOAlRxMiRiCic6JVM1/kunVkw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^20.0.0"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/request": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request/-/request-8.4.0.tgz",
+      "integrity": "sha512-9Bb014e+m2TgBeEJGEbdplMVWwPmL1FPtggHQRkV+WVsMggPtEkLKPlcVYm/o8xKLkpJ7B+6N8WfQMtDLX2Dpw==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/endpoint": "^9.0.1",
+        "@octokit/request-error": "^5.1.0",
+        "@octokit/types": "^13.1.0",
+        "universal-user-agent": "^6.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/request-error": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@octokit/request-error/-/request-error-5.1.0.tgz",
+      "integrity": "sha512-GETXfE05J0+7H2STzekpKObFe765O5dlAKUTLNGeH+x47z7JjXHfsHKo5z21D/o/IOZTUEI6nyWyR+bZVP/n5Q==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/types": "^13.1.0",
+        "deprecation": "^2.0.0",
+        "once": "^1.4.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@types/github-script/node_modules/@octokit/types": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@octokit/types/-/types-13.5.0.tgz",
+      "integrity": "sha512-HdqWTf5Z3qwDVlzCrP8UJquMwunpDiMPt5er+QjGzL4hqr/vBVY/MauQgS1xWxCDT1oMx1EULyqxncdCY/NVSQ==",
+      "dev": true,
+      "dependencies": {
+        "@octokit/openapi-types": "^22.2.0"
+      }
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.9",
       "dev": true,
@@ -9399,6 +9836,12 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/bottleneck": {
+      "version": "2.19.5",
+      "resolved": "https://registry.npmjs.org/bottleneck/-/bottleneck-2.19.5.tgz",
+      "integrity": "sha512-VHiNCbI1lKdl44tGrhNfU3lup0Tj/ZBMJB5/2ZbNXRCPuRCO7ed2mgcK4r17y+KB2EfuYuRaVlwNbAeaWGSpbw==",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "dev": true,
@@ -28583,6 +29026,15 @@
         "node": "^16.14.0 || >=18.0.0"
       }
     },
+    "node_modules/tunnel": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
+      "integrity": "sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.11 <=0.7.0 || >=0.7.3"
+      }
+    },
     "node_modules/turbo": {
       "version": "1.13.4",
       "dev": true,
diff --git a/package.json b/package.json
index f0d7a3cdc94..cf9fecefe45 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "@cspell/eslint-plugin": "8.9.1",
     "@esri/calcite-base": "1.2.0",
     "@esri/calcite-colors": "6.1.0",
+    "@octokit/webhooks-types": "7.5.1",
     "@prettier/sync": "0.5.2",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.7",
@@ -57,6 +58,7 @@
     "@types/dedent": "0.7.2",
     "@types/eslint": "8.56.10",
     "@types/estree": "1.0.5",
+    "@types/github-script": "github:actions/github-script#pull/482",
     "@types/jest": "29.5.12",
     "@types/jest-axe": "3.5.9",
     "@types/jsdom": "21.1.7",