From 6e7cff1597ffabd67c48a3aa7cf32b26fbc896d1 Mon Sep 17 00:00:00 2001
From: Eliza Khachatryan <eli97736@esri.com>
Date: Wed, 20 Dec 2023 17:10:29 -0800
Subject: [PATCH] chore(modal): remove e2e tests that are covered by dedicated
 openClose commonTests helper (#8392)

Remove e2e tests that are covered by the dedicated `openClose
commonTests` helper.

**Related Issue:** #8391, #7379

## Summary

Remove e2e tests that are covered by dedicated `openClose commonTests`
helper to simplify test setup, ensure testing consistency across all
`openClose` components, and enhance test maintainability.
---
 .../calcite-components/src/components.d.ts    |    6 +
 .../src/components/chip/chip.tsx              |   16 +-
 .../components/color-picker/color-picker.tsx  |   56 +-
 .../components/combobox/combobox.stories.ts   |   94 +-
 .../src/components/combobox/combobox.tsx      |   16 +-
 .../date-picker-day/date-picker-day.tsx       |    2 +-
 .../components/date-picker/date-picker.tsx    |    4 +-
 .../dropdown-item/dropdown-item.tsx           |   16 +-
 .../components/dropdown/dropdown.stories.ts   |   50 +-
 .../src/components/dropdown/dropdown.tsx      |    4 +-
 .../src/components/filter/filter.tsx          |    2 +-
 .../input-date-picker.e2e.ts                  |   48 +-
 .../input-date-picker.stories.ts              |  103 +-
 .../input-date-picker/input-date-picker.tsx   |   14 +-
 .../components/input-number/input-number.scss |    5 +-
 .../input-number/input-number.stories.ts      |  104 +-
 .../components/input-number/input-number.tsx  |   14 +-
 .../src/components/input-text/input-text.scss |    5 +-
 .../input-text/input-text.stories.ts          |   67 +-
 .../input-time-picker.stories.ts              |   11 +-
 .../input-time-picker/input-time-picker.tsx   |   25 +-
 .../input-time-zone/input-time-zone.tsx       |    4 +-
 .../src/components/input/input.e2e.ts         |   54 +-
 .../src/components/input/input.scss           |    5 +-
 .../src/components/input/input.stories.ts     |   79 +-
 .../src/components/input/input.tsx            |   18 +-
 .../src/components/list-item/list-item.e2e.ts |   34 +-
 .../src/components/list-item/list-item.tsx    |    6 +-
 .../src/components/list/list.e2e.ts           |  115 +-
 .../src/components/list/list.tsx              |   16 +-
 .../src/components/modal/modal.e2e.ts         |  668 +++---
 .../src/components/modal/modal.tsx            |    2 +-
 .../src/components/panel/panel.tsx            |    4 +-
 .../pick-list/shared-list-render.tsx          |    2 +-
 .../src/components/popover/popover.tsx        |    4 +-
 .../components/radio-button/radio-button.tsx  |   14 +-
 .../src/components/rating/rating.tsx          |    2 +-
 .../segmented-control/segmented-control.tsx   |    2 +-
 .../src/components/select/select.stories.ts   |   14 +-
 .../src/components/select/select.tsx          |   16 +-
 .../src/components/slider/slider.tsx          |   28 +-
 .../components/split-button/split-button.tsx  |    8 +-
 .../components/stepper-item/stepper-item.tsx  |    2 +-
 .../src/components/stepper/stepper.e2e.ts     |  338 ++--
 .../src/components/stepper/stepper.tsx        |    6 +-
 .../src/components/tab-title/tab-title.tsx    |    6 +-
 .../components/table-header/table-header.tsx  |    8 +-
 .../src/components/table-row/table-row.tsx    |   16 +-
 .../src/components/table/table.e2e.ts         |  230 ++-
 .../src/components/table/table.stories.ts     | 1787 ++++++++---------
 .../src/components/table/table.tsx            |    5 +-
 .../src/components/tabs/tabs.stories.ts       |   29 +-
 .../components/text-area/text-area.stories.ts |   67 +-
 .../src/components/text-area/text-area.tsx    |    2 +-
 .../components/tile-select/tile-select.tsx    |    2 +-
 .../src/components/tooltip/tooltip.tsx        |    2 +-
 .../src/components/tree-item/tree-item.e2e.ts |   44 +-
 .../src/components/tree-item/tree-item.tsx    |   14 +-
 .../src/components/tree/tree.e2e.ts           |  132 +-
 .../src/demos/combobox.html                   |    2 +-
 .../src/demos/dropdown.html                   |    2 +-
 .../src/demos/input-date-picker.html          |    2 +-
 .../src/demos/input-number.html               |    2 +-
 .../src/demos/input-text.html                 |    2 +-
 .../src/demos/input-time-zone.html            |    2 +-
 .../calcite-components/src/demos/input.html   |    2 +-
 .../calcite-components/src/demos/list.html    |    2 +-
 .../calcite-components/src/demos/menu.html    |    2 +-
 .../calcite-components/src/demos/select.html  |    2 +-
 .../calcite-components/src/demos/table.html   |    2 +-
 .../src/demos/text-area.html                  |    2 +-
 .../src/tests/commonTests.ts                  |   76 +-
 .../src/utils/floating-ui.spec.ts             |    2 +-
 .../src/utils/floating-ui.ts                  |   18 +-
 .../src/utils/interactive.tsx                 |    6 +-
 .../styleDictionary/transformer/utils.ts      |    2 +-
 .../value/valueCheckEvaluateMath.ts           |   11 +-
 .../value/valueFontFamilyFallbacks.ts         |    2 +-
 78 files changed, 2255 insertions(+), 2333 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index f75b38aa453..e13a2459e2f 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -4659,6 +4659,9 @@ export namespace Components {
           * Specifies the number of columns the component should span.
          */
         "colSpan": number;
+        /**
+          * When true, prevents user interaction.  Notes:  This prop should use the
+         */
         "disabled": boolean;
         /**
           * Use this property to override individual strings used by the component.
@@ -12087,6 +12090,9 @@ declare namespace LocalJSX {
           * Specifies the number of columns the component should span.
          */
         "colSpan"?: number;
+        /**
+          * When true, prevents user interaction.  Notes:  This prop should use the
+         */
         "disabled"?: boolean;
         /**
           * Use this property to override individual strings used by the component.
diff --git a/packages/calcite-components/src/components/chip/chip.tsx b/packages/calcite-components/src/components/chip/chip.tsx
index 2f753088aba..1851703c6cc 100644
--- a/packages/calcite-components/src/components/chip/chip.tsx
+++ b/packages/calcite-components/src/components/chip/chip.tsx
@@ -328,10 +328,10 @@ export class Chip
       this.selectionMode === "multiple" && this.selected
         ? ICONS.checked
         : this.selectionMode === "multiple"
-        ? ICONS.unchecked
-        : this.selected
-        ? ICONS.checkedSingle
-        : undefined;
+          ? ICONS.unchecked
+          : this.selected
+            ? ICONS.checkedSingle
+            : undefined;
 
     return (
       <div
@@ -379,10 +379,10 @@ export class Chip
       this.selectionMode === "multiple" && this.interactive
         ? "checkbox"
         : this.selectionMode !== "none" && this.interactive
-        ? "radio"
-        : this.interactive
-        ? "button"
-        : undefined;
+          ? "radio"
+          : this.interactive
+            ? "button"
+            : undefined;
     return (
       <Host>
         <InteractiveContainer disabled={disabled}>
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index c75030b44cd..73e8b64c5ca 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -110,7 +110,7 @@ export class ColorPicker
 
     if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
       console.warn(
-        `ignoring alphaChannel as the current format (${format}) does not support alpha`
+        `ignoring alphaChannel as the current format (${format}) does not support alpha`,
       );
       this.alphaChannel = false;
     }
@@ -218,7 +218,7 @@ export class ColorPicker
    * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/main/src/components/color-picker/interfaces.ts#L10)
    */
   @Prop({ mutable: true }) value: ColorValue | null = normalizeHex(
-    hexify(DEFAULT_COLOR, this.alphaChannel)
+    hexify(DEFAULT_COLOR, this.alphaChannel),
   );
 
   @Watch("value")
@@ -261,7 +261,7 @@ export class ColorPicker
         : Color(
             value != null && typeof value === "object" && alphaCompatible(this.mode)
               ? normalizeColor(value as RGBA | HSVA | HSLA)
-              : value
+              : value,
           );
     const colorChanged = !colorEqual(color, this.color);
 
@@ -269,7 +269,7 @@ export class ColorPicker
       this.internalColorSet(
         color,
         this.alphaChannel && !(this.mode.endsWith("a") || this.mode.endsWith("a-css")),
-        "internal"
+        "internal",
       );
     }
   }
@@ -368,7 +368,7 @@ export class ColorPicker
 
   private handleTabActivate = (event: Event): void => {
     this.channelMode = (event.currentTarget as HTMLElement).getAttribute(
-      "data-color-mode"
+      "data-color-mode",
     ) as ColorMode;
 
     this.updateChannelsFromColor(this.color);
@@ -389,7 +389,7 @@ export class ColorPicker
       this.captureColorFieldColor(
         this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0,
         this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0,
-        false
+        false,
       );
     }
   };
@@ -444,8 +444,8 @@ export class ColorPicker
     const limit = isAlphaChannel
       ? OPACITY_LIMITS.max
       : this.channelMode === "rgb"
-      ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
-      : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+        ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]]
+        : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
 
     let inputValue: string;
 
@@ -492,8 +492,8 @@ export class ColorPicker
       key === "ArrowUp" && shiftKey
         ? complementaryBump
         : key === "ArrowDown" && shiftKey
-        ? -complementaryBump
-        : 0;
+          ? -complementaryBump
+          : 0;
   }
 
   private handleChannelChange = (event: CustomEvent): void => {
@@ -751,15 +751,15 @@ export class ColorPicker
     const noSaved = savedDisabled || hideSaved;
     const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(
       colorFieldScopeLeft,
-      colorFieldScopeTop
+      colorFieldScopeTop,
     );
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(
       hueLeft,
-      hueTop
+      hueTop,
     );
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(
       opacityLeft,
-      opacityTop
+      opacityTop,
     );
 
     return (
@@ -992,7 +992,7 @@ export class ColorPicker
               index,
               channelAriaLabels[index],
               direction,
-              isAlphaChannel ? "%" : ""
+              isAlphaChannel ? "%" : "",
             );
           })}
         </div>
@@ -1005,7 +1005,7 @@ export class ColorPicker
     index: number,
     ariaLabel: string,
     direction: Direction,
-    suffix?: string
+    suffix?: string,
   ): VNode => {
     return (
       <calcite-input-number
@@ -1048,7 +1048,7 @@ export class ColorPicker
 
   private showIncompatibleColorWarning(value: ColorValue, format: Format): void {
     console.warn(
-      `ignoring color value (${value}) as it is not compatible with the current format (${format})`
+      `ignoring color value (${value}) as it is not compatible with the current format (${format})`,
     );
   }
 
@@ -1066,7 +1066,7 @@ export class ColorPicker
 
       if (warn) {
         console.warn(
-          `setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`
+          `setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`,
         );
       }
 
@@ -1078,7 +1078,7 @@ export class ColorPicker
 
       if (warn) {
         console.warn(
-          `setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`
+          `setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`,
         );
       }
 
@@ -1113,7 +1113,7 @@ export class ColorPicker
   private internalColorSet(
     color: Color | null,
     skipEqual = true,
-    context: ColorPicker["internalColorUpdateContext"] = "user-interaction"
+    context: ColorPicker["internalColorUpdateContext"] = "user-interaction",
   ): void {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
@@ -1234,7 +1234,7 @@ export class ColorPicker
         this.drawOpacitySlider();
       }
     },
-    throttleFor60FpsInMs
+    throttleFor60FpsInMs,
   );
 
   private drawColorField(): void {
@@ -1270,7 +1270,7 @@ export class ColorPicker
 
   private setCanvasContextSize(
     canvas: HTMLCanvasElement,
-    { height, width }: { height: number; width: number }
+    { height, width }: { height: number; width: number },
   ): void {
     if (!canvas) {
       return;
@@ -1298,7 +1298,7 @@ export class ColorPicker
 
     this.internalColorSet(
       this.baseColorFieldColor.hsv().saturationv(saturation).value(value),
-      skipEqual
+      skipEqual,
     );
   };
 
@@ -1325,7 +1325,7 @@ export class ColorPicker
   };
 
   private updateCanvasSize(
-    context: "all" | "color-field" | "hue-slider" | "opacity-slider" = "all"
+    context: "all" | "color-field" | "hue-slider" | "opacity-slider" = "all",
   ): void {
     const { dimensions } = this;
 
@@ -1346,7 +1346,7 @@ export class ColorPicker
     if (context === "all" || context === "opacity-slider") {
       this.setCanvasContextSize(
         this.opacitySliderRenderingContext?.canvas,
-        adjustedSliderDimensions
+        adjustedSliderDimensions,
       );
     }
   }
@@ -1383,7 +1383,7 @@ export class ColorPicker
     radius: number,
     x: number,
     y: number,
-    color: Color
+    color: Color,
   ): void {
     const startAngle = 0;
     const endAngle = 2 * Math.PI;
@@ -1521,7 +1521,7 @@ export class ColorPicker
     height: number,
     width: number,
     x: number,
-    y: number
+    y: number,
   ): void {
     const radius = height / 2 + 1;
     context.beginPath();
@@ -1591,8 +1591,8 @@ export class ColorPicker
     return closeToEdge === 0
       ? x
       : closeToEdge === -1
-      ? remap(x, 0, width, radius, radius * 2)
-      : remap(x, 0, width, width - radius * 2, width - radius);
+        ? remap(x, 0, width, radius, radius * 2)
+        : remap(x, 0, width, width - radius * 2, width - radius);
   }
 
   private storeOpacityScope = (node: HTMLDivElement): void => {
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index f5cb824cb4d..2d610a102fb 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -333,34 +333,36 @@ export const nestedItems = (): string => html`
   </div>
 `;
 
-export const longItems_TestOnly = (): string => html`<style>
-    calcite-combobox {
-      width: 260px;
-    }
-    calcite-combobox-item {
-      width: 260px;
-    }
-  </style>
-  <calcite-combobox open>
-    <calcite-combobox-item text-label="Layers">
-      <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
-      <calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>
+export const longItems_TestOnly = (): string =>
+  html`<style>
+      calcite-combobox {
+        width: 260px;
+      }
+      calcite-combobox-item {
+        width: 260px;
+      }
+    </style>
+    <calcite-combobox open>
+      <calcite-combobox-item text-label="Layers">
+        <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
+        <calcite-combobox-item text-label="Viewer_Reservable_Equipments_Capacity_V2_WFL1"></calcite-combobox-item>
+      </calcite-combobox-item>
+    </calcite-combobox>`;
+
+export const disabled_TestOnly = (): string =>
+  html`<calcite-combobox disabled>
+    <calcite-combobox-item value="Trees" text-label="Trees">
+      <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
+      <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
+      <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
+    </calcite-combobox-item>
+    <calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
+      <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
+      <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
+      <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
     </calcite-combobox-item>
   </calcite-combobox>`;
 
-export const disabled_TestOnly = (): string => html`<calcite-combobox disabled>
-  <calcite-combobox-item value="Trees" text-label="Trees">
-    <calcite-combobox-item value="Pine" text-label="Pine"></calcite-combobox-item>
-    <calcite-combobox-item value="Sequoia" disabled text-label="Sequoia"></calcite-combobox-item>
-    <calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir"></calcite-combobox-item>
-  </calcite-combobox-item>
-  <calcite-combobox-item value="Flowers" text-label="Flowers" disabled>
-    <calcite-combobox-item value="Daffodil" text-label="Daffodil"></calcite-combobox-item>
-    <calcite-combobox-item value="Black Eyed Susan" text-label="Black Eyed Susan"></calcite-combobox-item>
-    <calcite-combobox-item value="Nasturtium" text-label="Nasturtium"></calcite-combobox-item>
-  </calcite-combobox-item>
-</calcite-combobox>`;
-
 export const flipPlacements_TestOnly = (): string => html`
   <style>
     .my-combobox {
@@ -491,29 +493,29 @@ export const singleLongLabel_TestOnly = (): string => html`
   </calcite-combobox>
 `;
 
-export const withPlaceholderIcon_TestOnly = (): string => html` <calcite-combobox
-  id="labelFour"
-  label="test"
-  placeholder="${text("placeholder", "select folder")}"
-  placeholder-icon="${text("placeholder-icon", "select")}"
-  max-items="6"
-  selection-mode="single"
-  scale="s"
->
-  <calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
-  <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
-  <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
-</calcite-combobox>`;
-
-export const withoutPlaceholderIcon_TestOnly = (): string => html` <div
-  style="width:400px;max-width:100%;background-color:white;padding:100px"
->
-  <calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multiple" open>
-    <calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
+export const withPlaceholderIcon_TestOnly = (): string =>
+  html` <calcite-combobox
+    id="labelFour"
+    label="test"
+    placeholder="${text("placeholder", "select folder")}"
+    placeholder-icon="${text("placeholder-icon", "select")}"
+    max-items="6"
+    selection-mode="single"
+    scale="s"
+  >
+    <calcite-combobox-item value="root" text-label="username" icon="home"></calcite-combobox-item>
     <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
     <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
-  </calcite-combobox>
-</div>`;
+  </calcite-combobox>`;
+
+export const withoutPlaceholderIcon_TestOnly = (): string =>
+  html` <div style="width:400px;max-width:100%;background-color:white;padding:100px">
+    <calcite-combobox placeholder="${text("placeholder", "select folder")}" selection-mode="multiple" open>
+      <calcite-combobox-item value="root" text-label="username" icon="home" selected></calcite-combobox-item>
+      <calcite-combobox-item value="1" text-label="Folder 1" icon="folder"></calcite-combobox-item>
+      <calcite-combobox-item value="2" text-label="Folder 2" icon="folder"></calcite-combobox-item>
+    </calcite-combobox>
+  </div>`;
 
 export const scrollingWithoutMaxItems_TestOnly = (): string => html`
   <div style="width:400px;max-width:100%;background-color:white;padding:100px">
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index cb7d81401a9..0a9804f5c90 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -379,7 +379,7 @@ export class Combobox
         flipPlacements: filteredFlipPlacements,
         type: "menu",
       },
-      delayed
+      delayed,
     );
   }
 
@@ -885,7 +885,7 @@ export class Combobox
     const selectedIndicatorChipElWidth = getElementWidth(selectedIndicatorChipEl);
     const largestSelectedIndicatorChipWidth = Math.max(
       allSelectedIndicatorChipElWidth,
-      selectedIndicatorChipElWidth
+      selectedIndicatorChipElWidth,
     );
 
     this.setCompactSelectionDisplay({
@@ -897,7 +897,7 @@ export class Combobox
 
     if (selectionDisplay === "fit") {
       const chipEls = Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter(
-        (chipEl) => chipEl.closable
+        (chipEl) => chipEl.closable,
       );
 
       const availableHorizontalChipElSpace = Math.round(
@@ -905,7 +905,7 @@ export class Combobox
           ((this.selectedHiddenChipsCount > 0 ? selectedIndicatorChipElWidth : 0) +
             chipContainerElGap +
             inputWidth +
-            chipContainerElGap)
+            chipContainerElGap),
       );
 
       this.refreshChipDisplay({ availableHorizontalChipElSpace, chipContainerElGap, chipEls });
@@ -925,7 +925,7 @@ export class Combobox
     largestSelectedIndicatorChipWidth,
   }): void {
     const newCompactBreakpoint = Math.round(
-      largestSelectedIndicatorChipWidth + chipContainerElGap + inputWidth
+      largestSelectedIndicatorChipWidth + chipContainerElGap + inputWidth,
     );
     if (!this.maxCompactBreakpoint || this.maxCompactBreakpoint < newCompactBreakpoint) {
       this.maxCompactBreakpoint = newCompactBreakpoint;
@@ -1030,7 +1030,7 @@ export class Combobox
     const find = (item: ComboboxChildElement, filteredData: ItemData[]) =>
       item &&
       filteredData.some(({ label, value }) =>
-        isGroup(item) ? label === item.label : value === item.value && label === item.textLabel
+        isGroup(item) ? label === item.label : value === item.value && label === item.textLabel,
       );
 
     return debounce((text: string): void => {
@@ -1128,7 +1128,7 @@ export class Combobox
       this.items
         .filter(
           (item) =>
-            item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item))
+            item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item)),
         )
         /** Preserve order of entered tags */
         .sort((a, b) => {
@@ -1193,7 +1193,7 @@ export class Combobox
 
   getItems(): HTMLCalciteComboboxItemElement[] {
     const items: HTMLCalciteComboboxItemElement[] = Array.from(
-      this.el.querySelectorAll(ComboboxItem)
+      this.el.querySelectorAll(ComboboxItem),
     );
     return items.filter((item) => !item.disabled);
   }
diff --git a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
index 0a87d051fea..bc9965a7a60 100644
--- a/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
+++ b/packages/calcite-components/src/components/date-picker-day/date-picker-day.tsx
@@ -142,7 +142,7 @@ export class DatePickerDay implements InteractiveComponent {
   componentWillLoad(): void {
     this.parentDatePickerEl = closestElementCrossShadowBoundary(
       this.el,
-      "calcite-date-picker"
+      "calcite-date-picker",
     ) as HTMLCalciteDatePickerElement;
   }
 
diff --git a/packages/calcite-components/src/components/date-picker/date-picker.tsx b/packages/calcite-components/src/components/date-picker/date-picker.tsx
index 90f6e8ecea1..8217919c579 100644
--- a/packages/calcite-components/src/components/date-picker/date-picker.tsx
+++ b/packages/calcite-components/src/components/date-picker/date-picker.tsx
@@ -245,7 +245,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     const date = dateFromRange(
       this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate,
       this.minAsDate,
-      this.maxAsDate
+      this.maxAsDate,
     );
     let activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
     const endDate =
@@ -479,7 +479,7 @@ export class DatePicker implements LocalizedComponent, LoadableComponent, T9nCom
     maxDate: Date,
     minDate: Date,
     date: Date,
-    endDate: Date
+    endDate: Date,
   ) {
     return (
       this.localeData && [
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
index cf777e8ceb2..48a0378ca5d 100644
--- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
+++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -179,10 +179,10 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
       this.iconStart && this.iconEnd
         ? [iconStartEl, contentNode, iconEndEl]
         : this.iconStart
-        ? [iconStartEl, contentNode]
-        : this.iconEnd
-        ? [contentNode, iconEndEl]
-        : contentNode;
+          ? [iconStartEl, contentNode]
+          : this.iconEnd
+            ? [contentNode, iconEndEl]
+            : contentNode;
 
     const contentEl = !href ? (
       slottedContent
@@ -204,10 +204,10 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
     const itemRole = href
       ? null
       : selectionMode === "single"
-      ? "menuitemradio"
-      : selectionMode === "multiple"
-      ? "menuitemcheckbox"
-      : "menuitem";
+        ? "menuitemradio"
+        : selectionMode === "multiple"
+          ? "menuitemcheckbox"
+          : "menuitem";
 
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
     const { disabled } = this;
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index 840347786ed..f52c05030ea 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -320,14 +320,15 @@ export const scrollingWithoutMaxItems_TestOnly = (): string => html`
   </calcite-dropdown>
 `;
 
-export const noScrollingWhenMaxItemsEqualsItems_TestOnly = (): string => html` <calcite-dropdown max-items="3" open>
-  <calcite-button slot="trigger">Activate Dropdown</calcite-button>
-  <calcite-dropdown-group selection-mode="single" group-title="Selection Mode: Single">
-    <calcite-dropdown-item>Relevance</calcite-dropdown-item>
-    <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
-    <calcite-dropdown-item>Title</calcite-dropdown-item>
-  </calcite-dropdown-group>
-</calcite-dropdown>`;
+export const noScrollingWhenMaxItemsEqualsItems_TestOnly = (): string =>
+  html` <calcite-dropdown max-items="3" open>
+    <calcite-button slot="trigger">Activate Dropdown</calcite-button>
+    <calcite-dropdown-group selection-mode="single" group-title="Selection Mode: Single">
+      <calcite-dropdown-item>Relevance</calcite-dropdown-item>
+      <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
+      <calcite-dropdown-item>Title</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-dropdown>`;
 
 export const disabled_TestOnly = (): string => html`
   <calcite-dropdown disabled>
@@ -489,20 +490,19 @@ export const triggerWordBreak_TestOnly = (): string => html`<div style="width:30
 </calcite-dropdown>
 </div>`;
 
-export const settingFullWidthEnablesTriggerTruncation_TestOnly = (): string => html`<div
-  style="width: 300px; border: solid"
->
-  <calcite-dropdown style="width: 100%;">
-    <calcite-button width="full" slot="trigger"
-      >This is some really long text that will eventually overrun the container</calcite-button
-    >
-    <calcite-dropdown-group group-title="Natural places">
-      <calcite-dropdown-item>Mountain</calcite-dropdown-item>
-      <calcite-dropdown-item>River</calcite-dropdown-item>
-      <calcite-dropdown-item>Waterfall</calcite-dropdown-item>
-      <calcite-dropdown-item>Rainforest</calcite-dropdown-item>
-      <calcite-dropdown-item>Tundra</calcite-dropdown-item>
-      <calcite-dropdown-item>Desert</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>
-</div>`;
+export const settingFullWidthEnablesTriggerTruncation_TestOnly = (): string =>
+  html`<div style="width: 300px; border: solid">
+    <calcite-dropdown style="width: 100%;">
+      <calcite-button width="full" slot="trigger"
+        >This is some really long text that will eventually overrun the container</calcite-button
+      >
+      <calcite-dropdown-group group-title="Natural places">
+        <calcite-dropdown-item>Mountain</calcite-dropdown-item>
+        <calcite-dropdown-item>River</calcite-dropdown-item>
+        <calcite-dropdown-item>Waterfall</calcite-dropdown-item>
+        <calcite-dropdown-item>Rainforest</calcite-dropdown-item>
+        <calcite-dropdown-item>Tundra</calcite-dropdown-item>
+        <calcite-dropdown-item>Desert</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>`;
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 536bf583ce2..b51250699a5 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -307,7 +307,7 @@ export class Dropdown
         flipPlacements: filteredFlipPlacements,
         type: "menu",
       },
-      delayed
+      delayed,
     );
   }
 
@@ -654,7 +654,7 @@ export class Dropdown
 
   private focusOnFirstActiveOrFirstItem = (): void => {
     this.getFocusableElement(
-      this.getTraversableItems().find((item) => item.selected) || this.items[0]
+      this.getTraversableItems().find((item) => item.selected) || this.items[0],
     );
   };
 
diff --git a/packages/calcite-components/src/components/filter/filter.tsx b/packages/calcite-components/src/components/filter/filter.tsx
index 82ce0463ddd..8524b4f376e 100644
--- a/packages/calcite-components/src/components/filter/filter.tsx
+++ b/packages/calcite-components/src/components/filter/filter.tsx
@@ -224,7 +224,7 @@ export class Filter
   private filterDebounced = debounce(
     (value: string, emit = false, onFilter?: () => void): void =>
       this.items.length && this.updateFiltered(filter(this.items, value), emit, onFilter),
-    DEBOUNCE_TIMEOUT
+    DEBOUNCE_TIMEOUT,
   );
 
   inputHandler = (event: CustomEvent): void => {
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
index d1cf070c3b6..670866eb7ac 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
@@ -74,7 +74,7 @@ describe("calcite-input-date-picker", () => {
           .shadowRoot.querySelectorAll<HTMLAnchorElement>(`.${MONTH_HEADER_CSS.chevron}`)
           [linkIndex].click(),
       MONTH_HEADER_CSS,
-      linkIndex
+      linkIndex,
     );
     await page.waitForChanges();
   }
@@ -90,7 +90,7 @@ describe("calcite-input-date-picker", () => {
           .shadowRoot.querySelector<HTMLCalciteDatePickerMonthElement>("calcite-date-picker-month")
           .shadowRoot.querySelectorAll<HTMLCalciteDatePickerDayElement>("calcite-date-picker-day[current-month]")
           [dayIndex].click(),
-      dayIndex
+      dayIndex,
     );
     await page.waitForChanges();
   }
@@ -103,7 +103,7 @@ describe("calcite-input-date-picker", () => {
           .shadowRoot.querySelector("calcite-date-picker")
           .shadowRoot.querySelector("calcite-date-picker-month-header")
           .shadowRoot.querySelector(`.${MONTH_HEADER_CSS.month}`).textContent,
-      MONTH_HEADER_CSS
+      MONTH_HEADER_CSS,
     );
   }
 
@@ -116,7 +116,7 @@ describe("calcite-input-date-picker", () => {
           .querySelector("calcite-input-date-picker")
           .shadowRoot.querySelectorAll("calcite-input-text")
           [inputIndex].shadowRoot.querySelector("input").value,
-      inputIndex
+      inputIndex,
     );
   }
 
@@ -137,7 +137,7 @@ describe("calcite-input-date-picker", () => {
         (calendarWrapperClass: string) =>
           document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`),
         {},
-        CSS.calendarWrapper
+        CSS.calendarWrapper,
       );
       expect(await wrapper.isIntersectingViewport()).toBe(true);
 
@@ -209,7 +209,7 @@ describe("calcite-input-date-picker", () => {
         (calendarWrapperClass: string) =>
           document.querySelector("calcite-input-date-picker").shadowRoot.querySelector(`.${calendarWrapperClass}`),
         {},
-        CSS.calendarWrapper
+        CSS.calendarWrapper,
       );
 
       expect(await wrapper.isIntersectingViewport()).toBe(true);
@@ -304,7 +304,7 @@ describe("calcite-input-date-picker", () => {
         document
           .querySelector("calcite-input-date-picker")
           .shadowRoot.querySelector("calcite-input-text")
-          .shadowRoot.querySelector("input")
+          .shadowRoot.querySelector("input"),
       )
     ).asElement();
     await input.focus();
@@ -394,17 +394,17 @@ describe("calcite-input-date-picker", () => {
         expect(await isCalendarVisible(calendar, "end")).toBe(false);
 
         const startInput = await page.find(
-          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] calcite-input-text`
+          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] calcite-input-text`,
         );
         const startInputToggle = await page.find(
-          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] .${CSS.toggleIcon}`
+          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="start"] .${CSS.toggleIcon}`,
         );
 
         const endInput = await page.find(
-          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] calcite-input-text`
+          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] calcite-input-text`,
         );
         const endInputToggle = await page.find(
-          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] .${CSS.toggleIcon}`
+          `calcite-input-date-picker >>> .${CSS.inputWrapper}[data-position="end"] .${CSS.toggleIcon}`,
         );
 
         // toggling via start date input
@@ -593,7 +593,7 @@ describe("calcite-input-date-picker", () => {
     it("renders arabic numerals while typing in the input when numbering-system is set to arab", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        `<calcite-input-date-picker lang="ar" numbering-system="arab"></calcite-input-date-picker>`
+        `<calcite-input-date-picker lang="ar" numbering-system="arab"></calcite-input-date-picker>`,
       );
 
       await page.keyboard.press("Tab");
@@ -637,13 +637,13 @@ describe("calcite-input-date-picker", () => {
 
       const page = await newE2EPage();
       await page.setContent(
-        `<calcite-input-date-picker lang=${lang} value="${year}-${month}-${day}"></calcite-input-date-picker>`
+        `<calcite-input-date-picker lang=${lang} value="${year}-${month}-${day}"></calcite-input-date-picker>`,
       );
       const inputDatePicker = await page.find("calcite-input-date-picker");
 
       expect(await getActiveMonth(page)).toEqual(langTranslations.months.wide[Number(month) - 1]);
       expect(await getDateInputValue(page)).toBe(
-        langTranslations.placeholder.replace("DD", day).replace("MM", month).replace("YYYY", year)
+        langTranslations.placeholder.replace("DD", day).replace("MM", month).replace("YYYY", year),
       );
 
       inputDatePicker.setProperty("lang", newLang);
@@ -651,7 +651,7 @@ describe("calcite-input-date-picker", () => {
 
       expect(await getActiveMonth(page)).toEqual(newLangTranslations.months.wide[Number(month) - 1]);
       expect(await getDateInputValue(page)).toBe(
-        newLangTranslations.placeholder.replace("DD", day).replace("MM", month).replace("YYYY", year)
+        newLangTranslations.placeholder.replace("DD", day).replace("MM", month).replace("YYYY", year),
       );
     });
 
@@ -701,7 +701,11 @@ describe("calcite-input-date-picker", () => {
     const page = await newE2EPage();
     await page.emulateTimezone("America/Los_Angeles");
     await page.setContent(
-      html`<calcite-input-date-picker value="2022-11-27" min="2022-11-15" max="2024-11-15"></calcite-input-date-picker>`
+      html`<calcite-input-date-picker
+        value="2022-11-27"
+        min="2022-11-15"
+        max="2024-11-15"
+      ></calcite-input-date-picker>`,
     );
 
     const element = await page.find("calcite-input-date-picker");
@@ -710,7 +714,7 @@ describe("calcite-input-date-picker", () => {
     await page.waitForChanges();
     const minDateString = "Mon Nov 15 2021 00:00:00 GMT-0800 (Pacific Standard Time)";
     const minDateAsTime = await page.$eval("calcite-input-date-picker", (picker: HTMLCalciteInputDatePickerElement) =>
-      picker.minAsDate.getTime()
+      picker.minAsDate.getTime(),
     );
     expect(minDateAsTime).toEqual(new Date(minDateString).getTime());
   });
@@ -719,7 +723,7 @@ describe("calcite-input-date-picker", () => {
     floatingUIOwner(
       `<calcite-input-date-picker value="2022-11-27" min="2022-11-15" max="2024-11-15"></calcite-input-date-picker>`,
       "open",
-      { shadowSelector: ".menu-container" }
+      { shadowSelector: ".menu-container" },
     );
   });
 
@@ -855,7 +859,7 @@ describe("calcite-input-date-picker", () => {
         <div style="height:100px"></div>
         <calcite-input-date-picker open overlay-positioning="fixed"></calcite-input-date-picker>
         <div style="height:400px"></div>
-      </div>`
+      </div>`,
     );
 
     await page.waitForChanges();
@@ -887,7 +891,7 @@ describe("calcite-input-date-picker", () => {
       const page = await newE2EPage();
       await page.setContent(
         html` <calcite-input-date-picker></calcite-input-date-picker>
-          <div id="next-sibling" tabindex="0">next sibling</div>`
+          <div id="next-sibling" tabindex="0">next sibling</div>`,
       );
 
       await page.keyboard.press("Tab");
@@ -929,7 +933,7 @@ describe("calcite-input-date-picker", () => {
       const page = await newE2EPage();
       await page.setContent(
         html`<calcite-input-date-picker range></calcite-input-date-picker>
-          <div id="next-sibling" tabindex="0">next sibling</div>`
+          <div id="next-sibling" tabindex="0">next sibling</div>`,
       );
 
       await page.keyboard.press("Tab");
@@ -1078,7 +1082,7 @@ describe("calcite-input-date-picker", () => {
     it("should not normalize year to current century when value is parsed as attribute", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-input-date-picker normalize-year value="20-01-01"></calcite-input-date-picker>`
+        html`<calcite-input-date-picker normalize-year value="20-01-01"></calcite-input-date-picker>`,
       );
 
       const element = await page.find("calcite-input-date-picker");
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 3accd68055f..4ab0da6174f 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -126,59 +126,58 @@ export const validationMessageAllScales_TestOnly = (): string => html`
   </div>
 `;
 
-export const scales_TestOnly = (): string =>
-  html`
-    <style>
-      .container {
-        display: flex;
-        flex-direction: column;
-        width: 1400px;
-        height: 1200px;
-        gap: 400px;
-      }
+export const scales_TestOnly = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 1400px;
+      height: 1200px;
+      gap: 400px;
+    }
 
-      .use-case {
-        display: flex;
-        gap: 100px;
-      }
-    </style>
-    <div class="container">
-      <div class="use-case">
-        <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
-        <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
-        <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
-      </div>
-      <div class="use-case">
-        <calcite-input-date-picker
-          scale="s"
-          open
-          start="2020-12-12"
-          end="2020-12-16"
-          range
-          layout="horizontal"
-          value="2020-12-12"
-        ></calcite-input-date-picker>
-        <calcite-input-date-picker
-          scale="m"
-          open
-          start="2020-12-12"
-          end="2020-12-16"
-          range
-          layout="horizontal"
-          value="2020-12-12"
-        ></calcite-input-date-picker>
-        <calcite-input-date-picker
-          scale="l"
-          open
-          start="2020-12-12"
-          end="2020-12-16"
-          range
-          layout="horizontal"
-          value="2020-12-12"
-        ></calcite-input-date-picker>
-      </div>
+    .use-case {
+      display: flex;
+      gap: 100px;
+    }
+  </style>
+  <div class="container">
+    <div class="use-case">
+      <calcite-input-date-picker scale="s" icon open value="2020-12-12"></calcite-input-date-picker>
+      <calcite-input-date-picker scale="m" icon open value="2020-12-12"></calcite-input-date-picker>
+      <calcite-input-date-picker scale="l" icon open value="2020-12-12"></calcite-input-date-picker>
     </div>
-  `;
+    <div class="use-case">
+      <calcite-input-date-picker
+        scale="s"
+        open
+        start="2020-12-12"
+        end="2020-12-16"
+        range
+        layout="horizontal"
+        value="2020-12-12"
+      ></calcite-input-date-picker>
+      <calcite-input-date-picker
+        scale="m"
+        open
+        start="2020-12-12"
+        end="2020-12-16"
+        range
+        layout="horizontal"
+        value="2020-12-12"
+      ></calcite-input-date-picker>
+      <calcite-input-date-picker
+        scale="l"
+        open
+        start="2020-12-12"
+        end="2020-12-16"
+        range
+        layout="horizontal"
+        value="2020-12-12"
+      ></calcite-input-date-picker>
+    </div>
+  </div>
+`;
 
 export const arabicLocaleDarkModeRTL_TestOnly = (): string => html`
   <div style="width: 400px">
@@ -195,5 +194,5 @@ arabicLocaleDarkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const widthSetToBreakpoints_TestOnly = (): string =>
   createBreakpointStories(
-    html`<calcite-input-date-picker scale="{scale}" value="2020-12-12"></calcite-input-date-picker>`
+    html`<calcite-input-date-picker scale="{scale}" value="2020-12-12"></calcite-input-date-picker>`,
   );
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
index 1a4d00fca40..12e5738cdac 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.tsx
@@ -431,7 +431,7 @@ export class InputDatePicker
         flipPlacements: filteredFlipPlacements,
         type: "menu",
       },
-      delayed
+      delayed,
     );
   }
 
@@ -1033,13 +1033,13 @@ export class InputDatePicker
         ? (Array.isArray(this.valueAsDate) && this.valueAsDate[0]) || undefined
         : this.valueAsDate) as Date,
       this.minAsDate,
-      this.maxAsDate
+      this.maxAsDate,
     );
     const endDate = this.range
       ? dateFromRange(
           (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined,
           this.minAsDate,
-          this.maxAsDate
+          this.maxAsDate,
         )
       : null;
 
@@ -1137,7 +1137,7 @@ export class InputDatePicker
 
   private warnAboutInvalidValue(value: string): void {
     console.warn(
-      `The specified value "${value}" does not conform to the required format, "YYYY-MM-DD".`
+      `The specified value "${value}" does not conform to the required format, "YYYY-MM-DD".`,
     );
   }
 
@@ -1151,8 +1151,8 @@ export class InputDatePicker
             this.commonDateSeparators?.includes(char)
               ? this.localeData?.separator
               : numberKeys?.includes(char)
-              ? numberStringFormatter?.numberFormatter?.format(Number(char))
-              : char
+                ? numberStringFormatter?.numberFormatter?.format(Number(char))
+                : char,
           )
           .join("")
       : "";
@@ -1162,7 +1162,7 @@ export class InputDatePicker
       ? value
           .split("")
           .map((char: string) =>
-            numberKeys.includes(char) ? numberStringFormatter.delocalize(char) : char
+            numberKeys.includes(char) ? numberStringFormatter.delocalize(char) : char,
           )
           .join("")
       : "";
diff --git a/packages/calcite-components/src/components/input-number/input-number.scss b/packages/calcite-components/src/components/input-number/input-number.scss
index e95d0865397..d349bfeaec0 100755
--- a/packages/calcite-components/src/components/input-number/input-number.scss
+++ b/packages/calcite-components/src/components/input-number/input-number.scss
@@ -57,7 +57,10 @@
 @include disabled();
 
 input {
-  transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
+  transition:
+    var(--calcite-animation-timing),
+    block-size 0,
+    outline-offset 0s;
   -webkit-appearance: none;
   @apply bg-foreground-1
     box-border
diff --git a/packages/calcite-components/src/components/input-number/input-number.stories.ts b/packages/calcite-components/src/components/input-number/input-number.stories.ts
index a05e94dd548..ca2e7da24a6 100644
--- a/packages/calcite-components/src/components/input-number/input-number.stories.ts
+++ b/packages/calcite-components/src/components/input-number/input-number.stories.ts
@@ -92,63 +92,61 @@ export const darkModeRTL_TestOnly = (): string => html`
 `;
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
-export const mediumIconForLargeInputStyling_TestOnly = (): string =>
-  html`
-    <calcite-input-number number-button-type="vertical" lang="ar-EG" value="123456" scale="l"></calcite-input-number
-    ><calcite-input-number
-      number-button-type="vertical"
-      lang="ar-EG"
-      value="123456"
-      scale="l"
-      icon="pen"
-    ></calcite-input-number>
-    <calcite-input-number number-button-type="horizontal" lang="ar-EG" value="123456" scale="l"></calcite-input-number
-    ><calcite-input-number
-      number-button-type="horizontal"
-      lang="ar-EG"
-      value="123456"
-      scale="l"
-      icon="pen"
-    ></calcite-input-number>
-  `;
+export const mediumIconForLargeInputStyling_TestOnly = (): string => html`
+  <calcite-input-number number-button-type="vertical" lang="ar-EG" value="123456" scale="l"></calcite-input-number
+  ><calcite-input-number
+    number-button-type="vertical"
+    lang="ar-EG"
+    value="123456"
+    scale="l"
+    icon="pen"
+  ></calcite-input-number>
+  <calcite-input-number number-button-type="horizontal" lang="ar-EG" value="123456" scale="l"></calcite-input-number
+  ><calcite-input-number
+    number-button-type="horizontal"
+    lang="ar-EG"
+    value="123456"
+    scale="l"
+    icon="pen"
+  ></calcite-input-number>
+`;
 
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html`<calcite-input-number lang="ar-EG" numbering-system="latn" value="123456"></calcite-input-number>`;
 
-export const validationMessageAllScales_TestOnly = (): string =>
-  html`
-    <style>
-      .container {
-        display: flex;
-        flex-direction: column;
-        width: 400px;
-        height: 200px;
-        gap: 20px;
-      }
-    </style>
-    <div class="container">
-      <calcite-input-number
-        scale="s"
-        status="invalid"
-        validation-message="This field is required."
-        validation-icon="frown"
-      ></calcite-input-number>
-      <calcite-input-number
-        scale="m"
-        status="invalid"
-        validation-message="Value must be greater than 1337"
-        validation-icon
-        value="420"
-      ></calcite-input-number>
-      <calcite-input-number
-        scale="l"
-        status="invalid"
-        validation-message="Exceeds the maximum length of 2 characters"
-        validation-icon
-        value="123"
-      ></calcite-input-number>
-    </div>
-  `;
+export const validationMessageAllScales_TestOnly = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 400px;
+      height: 200px;
+      gap: 20px;
+    }
+  </style>
+  <div class="container">
+    <calcite-input-number
+      scale="s"
+      status="invalid"
+      validation-message="This field is required."
+      validation-icon="frown"
+    ></calcite-input-number>
+    <calcite-input-number
+      scale="m"
+      status="invalid"
+      validation-message="Value must be greater than 1337"
+      validation-icon
+      value="420"
+    ></calcite-input-number>
+    <calcite-input-number
+      scale="l"
+      status="invalid"
+      validation-message="Exceeds the maximum length of 2 characters"
+      validation-icon
+      value="123"
+    ></calcite-input-number>
+  </div>
+`;
 
 export const widthSetToBreakpoints_TestOnly = (): string =>
   createBreakpointStories(html`
diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx
index b923369825d..66cb475a574 100644
--- a/packages/calcite-components/src/components/input-number/input-number.tsx
+++ b/packages/calcite-components/src/components/input-number/input-number.tsx
@@ -327,8 +327,8 @@ export class InputNumber
           newValue == null || newValue == ""
             ? ""
             : isValidNumber(newValue)
-            ? newValue
-            : this.previousValue || "",
+              ? newValue
+              : this.previousValue || "",
       });
       this.warnAboutInvalidNumberValue(newValue);
     }
@@ -548,7 +548,7 @@ export class InputNumber
     direction: NumberNudgeDirection,
     inputMax: number | null,
     inputMin: number | null,
-    nativeEvent: KeyboardEvent | MouseEvent
+    nativeEvent: KeyboardEvent | MouseEvent,
   ): void {
     const { value } = this;
     const adjustment = direction === "up" ? 1 : -1;
@@ -571,8 +571,8 @@ export class InputNumber
     const finalValue = nudgedValueBelowInputMin()
       ? `${inputMin}`
       : nudgedValueAboveInputMax()
-      ? `${inputMax}`
-      : nudgedValue.toString();
+        ? `${inputMax}`
+        : nudgedValue.toString();
 
     this.setNumberValue({
       committing: true,
@@ -723,7 +723,7 @@ export class InputNumber
 
   private nudgeNumberValue = (
     direction: NumberNudgeDirection,
-    nativeEvent: KeyboardEvent | MouseEvent
+    nativeEvent: KeyboardEvent | MouseEvent,
   ): void => {
     if (nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) {
       return;
@@ -881,7 +881,7 @@ export class InputNumber
       newLocalizedValue = addLocalizedTrailingDecimalZeros(
         newLocalizedValue,
         newValue,
-        numberStringFormatter
+        numberStringFormatter,
       );
     }
 
diff --git a/packages/calcite-components/src/components/input-text/input-text.scss b/packages/calcite-components/src/components/input-text/input-text.scss
index a56919b21dd..d46e7ec4315 100755
--- a/packages/calcite-components/src/components/input-text/input-text.scss
+++ b/packages/calcite-components/src/components/input-text/input-text.scss
@@ -90,7 +90,10 @@
 @include disabled();
 
 input {
-  transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
+  transition:
+    var(--calcite-animation-timing),
+    block-size 0,
+    outline-offset 0s;
   -webkit-appearance: none;
   @apply bg-foreground-1
     box-border
diff --git a/packages/calcite-components/src/components/input-text/input-text.stories.ts b/packages/calcite-components/src/components/input-text/input-text.stories.ts
index ad170b18db8..5e6ef812d63 100644
--- a/packages/calcite-components/src/components/input-text/input-text.stories.ts
+++ b/packages/calcite-components/src/components/input-text/input-text.stories.ts
@@ -107,37 +107,36 @@ export const widthSetToBreakpoints_TestOnly = (): string =>
     ></calcite-input-text>
   `);
 
-export const validationMessageAllScales_TestOnly = (): string =>
-  html`
-    <style>
-      .container {
-        display: flex;
-        flex-direction: column;
-        width: 400px;
-        height: 200px;
-        gap: 20px;
-      }
-    </style>
-    <div class="container">
-      <calcite-input-text
-        scale="s"
-        status="invalid"
-        validation-message="This field is required."
-        validation-icon="frown"
-      ></calcite-input-text>
-      <calcite-input-text
-        scale="m"
-        status="invalid"
-        validation-message="Value must be greater than 1337"
-        validation-icon
-        value="420"
-      ></calcite-input-text>
-      <calcite-input-text
-        scale="l"
-        status="invalid"
-        validation-message="Exceeds the maximum length of 2 characters"
-        validation-icon
-        value="test"
-      ></calcite-input-text>
-    </div>
-  `;
+export const validationMessageAllScales_TestOnly = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 400px;
+      height: 200px;
+      gap: 20px;
+    }
+  </style>
+  <div class="container">
+    <calcite-input-text
+      scale="s"
+      status="invalid"
+      validation-message="This field is required."
+      validation-icon="frown"
+    ></calcite-input-text>
+    <calcite-input-text
+      scale="m"
+      status="invalid"
+      validation-message="Value must be greater than 1337"
+      validation-icon
+      value="420"
+    ></calcite-input-text>
+    <calcite-input-text
+      scale="l"
+      status="invalid"
+      validation-message="Exceeds the maximum length of 2 characters"
+      validation-icon
+      value="test"
+    ></calcite-input-text>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
index ae7b5e2854f..580c440256c 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.stories.ts
@@ -44,12 +44,11 @@ export const milliseconds_TestOnly = (): string => html`
 export const disabled_TestOnly = (): string =>
   html`<calcite-input-time-picker disabled scale="l" icon step="1" value="01:02"></calcite-input-time-picker>`;
 
-export const scales_TestOnly = (): string =>
-  html`
-    <calcite-input-time-picker scale="s" icon value="01:02"></calcite-input-time-picker>
-    <calcite-input-time-picker scale="m" icon value="01:02"></calcite-input-time-picker>
-    <calcite-input-time-picker scale="l" icon value="01:02"></calcite-input-time-picker>
-  `;
+export const scales_TestOnly = (): string => html`
+  <calcite-input-time-picker scale="s" icon value="01:02"></calcite-input-time-picker>
+  <calcite-input-time-picker scale="m" icon value="01:02"></calcite-input-time-picker>
+  <calcite-input-time-picker scale="l" icon value="01:02"></calcite-input-time-picker>
+`;
 
 export const darkModeRTL_TestOnly = (): string => html`
   <calcite-input-time-picker class="calcite-mode-dark" value="22:37" step="1"> </calcite-input-time-picker>
diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
index 00b52463c79..7dfc4b6b4fe 100644
--- a/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
+++ b/packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
@@ -266,7 +266,7 @@ export class InputTimePicker
         numberingSystem,
         includeSeconds: this.shouldIncludeSeconds(),
         fractionalSecondDigits: decimalPlaces(this.step) as FractionalSecondDigits,
-      })
+      }),
     );
   }
 
@@ -379,7 +379,7 @@ export class InputTimePicker
         numberingSystem: this.numberingSystem,
         includeSeconds: this.shouldIncludeSeconds(),
         fractionalSecondDigits: decimalPlaces(this.step) as FractionalSecondDigits,
-      })
+      }),
     );
   }
 
@@ -464,7 +464,7 @@ export class InputTimePicker
         .map((char) =>
           numberKeys.includes(char)
             ? numberStringFormatter.numberFormatter.format(Number(char))
-            : char
+            : char,
         )
         .join("");
 
@@ -485,7 +485,7 @@ export class InputTimePicker
         numberingSystem: this.numberingSystem,
         includeSeconds,
         fractionalSecondDigits: decimalPlaces(this.step) as FractionalSecondDigits,
-      })
+      }),
     );
   };
 
@@ -585,7 +585,7 @@ export class InputTimePicker
 
   private delocalizeTimeStringToParts(
     localizedTimeString: string,
-    fractionalSecondFormatToken?: "S" | "SS" | "SSS"
+    fractionalSecondFormatToken?: "S" | "SS" | "SSS",
   ): DayjsTimeParts {
     const ltsFormatString = this.localeConfig?.formats?.LTS;
     const fractionalSecondTokenMatch = ltsFormatString.match(/ss\.*(S+)/g);
@@ -601,7 +601,7 @@ export class InputTimePicker
 
     dayjs.updateLocale(
       this.getSupportedDayjsLocale(getSupportedLocale(this.effectiveLocale)),
-      this.localeConfig as Record<string, any>
+      this.localeConfig as Record<string, any>,
     );
 
     const dayjsParseResult = dayjs(localizedTimeString, ["LTS", "LT"]);
@@ -722,9 +722,8 @@ export class InputTimePicker
 
     supportedLocale = this.getSupportedDayjsLocale(supportedLocale);
 
-    const { default: localeConfig } = await supportedDayjsLocaleToLocaleConfigImport.get(
-      supportedLocale
-    )();
+    const { default: localeConfig } =
+      await supportedDayjsLocaleToLocaleConfigImport.get(supportedLocale)();
 
     this.localeConfig = localeConfig;
 
@@ -733,7 +732,7 @@ export class InputTimePicker
   }
 
   private getExtendedLocaleConfig(
-    locale: string
+    locale: string,
   ): Parameters<(typeof dayjs)["updateLocale"]>[1] | undefined {
     if (locale === "ar") {
       return {
@@ -875,7 +874,7 @@ export class InputTimePicker
           numberingSystem: this.numberingSystem,
           includeSeconds: this.shouldIncludeSeconds(),
           fractionalSecondDigits: decimalPlaces(this.step) as FractionalSecondDigits,
-        })
+        }),
       );
     }
   };
@@ -898,7 +897,7 @@ export class InputTimePicker
             numberingSystem: this.numberingSystem,
             fractionalSecondDigits: decimalPlaces(this.step) as FractionalSecondDigits,
           })
-        : ""
+        : "",
     );
   };
 
@@ -949,7 +948,7 @@ export class InputTimePicker
           numberingSystem: this.numberingSystem,
           includeSeconds: this.shouldIncludeSeconds(),
           fractionalSecondDigits: decimalPlaces(this.step) as FractionalSecondDigits,
-        })
+        }),
       );
     }
   }
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
index f0208a3a06d..7b2d96bf8b8 100644
--- a/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
+++ b/packages/calcite-components/src/components/input-time-zone/input-time-zone.tsx
@@ -305,7 +305,7 @@ export class InputTimeZone
     return this.timeZoneItems.find(
       ({ value }) =>
         // intentional == to match string to number
-        value == valueToMatch
+        value == valueToMatch,
     );
   }
 
@@ -333,7 +333,7 @@ export class InputTimeZone
       this.mode,
       this.referenceDate instanceof Date
         ? this.referenceDate
-        : new Date(this.referenceDate ?? Date.now())
+        : new Date(this.referenceDate ?? Date.now()),
     );
   }
 
diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts
index 080db981a62..d7d3737a476 100644
--- a/packages/calcite-components/src/components/input/input.e2e.ts
+++ b/packages/calcite-components/src/components/input/input.e2e.ts
@@ -149,10 +149,10 @@ describe("calcite-input", () => {
 
     const numberVerticalWrapper = await page.find("calcite-input >>> .number-button-wrapper");
     const numberHorizontalItemDown = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']",
     );
     const numberHorizontalItemUp = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']",
     );
 
     expect(numberVerticalWrapper).not.toBeNull();
@@ -166,10 +166,10 @@ describe("calcite-input", () => {
 
     const numberVerticalWrapper = await page.find("calcite-input >>> .number-button-wrapper");
     const numberHorizontalItemDown = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']",
     );
     const numberHorizontalItemUp = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']",
     );
 
     expect(numberVerticalWrapper).toBeNull();
@@ -189,14 +189,14 @@ describe("calcite-input", () => {
   it("does not render number buttons in horizontal alignment when type=number, number button type is horizontal, and read-only", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-input type="number" number-button-type="horizontal" read-only></calcite-input>`
+      html`<calcite-input type="number" number-button-type="horizontal" read-only></calcite-input>`,
     );
 
     const numberHorizontalItemDown = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']",
     );
     const numberHorizontalItemUp = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']",
     );
 
     expect(numberHorizontalItemDown).toBeNull();
@@ -209,10 +209,10 @@ describe("calcite-input", () => {
 
     const numberVerticalWrapper = await page.find("calcite-input >>> .number-button-wrapper");
     const numberHorizontalItemDown = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='down']",
     );
     const numberHorizontalItemUp = await page.find(
-      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']"
+      "calcite-input >>> .number-button-item--horizontal[data-adjustment='up']",
     );
 
     expect(numberVerticalWrapper).toBeNull();
@@ -238,7 +238,7 @@ describe("calcite-input", () => {
           value="100000000000000000000000000000000000000000000000000."
           step="10"
           type="number"
-        ></calcite-input>`
+        ></calcite-input>`,
       );
       const element = await page.find("calcite-input");
       const numberHorizontalItemDown = await page.find("calcite-input >>> .number-button-item[data-adjustment='down']");
@@ -265,7 +265,7 @@ describe("calcite-input", () => {
       await numberHorizontalItemUp.click();
       await page.waitForChanges();
       expect(await element.getProperty("value")).toBe(
-        "1.00000000000000000000000000000000000000000000000000000000000123"
+        "1.00000000000000000000000000000000000000000000000000000000000123",
       );
       element.setProperty("step", 0.1);
       await page.waitForChanges();
@@ -274,7 +274,7 @@ describe("calcite-input", () => {
         await page.waitForChanges();
       }
       expect(await element.getProperty("value")).toBe(
-        "0.50000000000000000000000000000000000000000000000000000000000123"
+        "0.50000000000000000000000000000000000000000000000000000000000123",
       );
     });
 
@@ -361,7 +361,7 @@ describe("calcite-input", () => {
       const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
         page,
         "calcite-input",
-        ".number-button-item[data-adjustment='up']"
+        ".number-button-item[data-adjustment='up']",
       );
 
       const inputEventSpy = await input.spyOnEvent("calciteInputInput");
@@ -376,7 +376,7 @@ describe("calcite-input", () => {
       const [buttonDownLocationX, buttonDownLocationY] = await getElementXY(
         page,
         "calcite-input",
-        ".number-button-item[data-adjustment='down']"
+        ".number-button-item[data-adjustment='down']",
       );
 
       await page.mouse.move(buttonDownLocationX, buttonDownLocationY);
@@ -539,7 +539,7 @@ describe("calcite-input", () => {
       const [buttonUpLocationX, buttonUpLocationY] = await getElementXY(
         page,
         "calcite-input",
-        ".number-button-item[data-adjustment='up']"
+        ".number-button-item[data-adjustment='up']",
       );
       expect(calciteInputInput).toHaveReceivedEventTimes(0);
       await page.mouse.move(buttonUpLocationX, buttonUpLocationY);
@@ -565,7 +565,7 @@ describe("calcite-input", () => {
       const [buttonDownLocationX, buttonDownLocationY] = await getElementXY(
         page,
         "calcite-input",
-        ".number-button-item[data-adjustment='down']"
+        ".number-button-item[data-adjustment='down']",
       );
 
       await page.mouse.move(buttonDownLocationX, buttonDownLocationY);
@@ -676,7 +676,7 @@ describe("calcite-input", () => {
       const incrementButtonRect = await getElementRect(page, "calcite-input", "button");
       await page.mouse.move(
         incrementButtonRect.left + incrementButtonRect.width / 2,
-        incrementButtonRect.top + incrementButtonRect.height / 2
+        incrementButtonRect.top + incrementButtonRect.height / 2,
       );
       await page.mouse.down();
       await page.waitForChanges();
@@ -1294,7 +1294,7 @@ describe("calcite-input", () => {
           const value = "1234.56";
           const page = await newE2EPage();
           await page.setContent(
-            html`<calcite-input lang="${locale}" type="number" value="${value}" group-separator></calcite-input>`
+            html`<calcite-input lang="${locale}" type="number" value="${value}" group-separator></calcite-input>`,
           );
           const calciteInput = await page.find("calcite-input");
           const input = await page.find("calcite-input >>> input");
@@ -1369,7 +1369,7 @@ describe("calcite-input", () => {
         it(`displays correct formatted value when the value is changed programmatically for ${locale} locale`, async () => {
           const page = await newE2EPage();
           await page.setContent(
-            html`<calcite-input lang="${locale}" type="number"></calcite-input><input id="external" />`
+            html`<calcite-input lang="${locale}" type="number"></calcite-input><input id="external" />`,
           );
 
           await page.evaluate(() => {
@@ -1553,7 +1553,7 @@ describe("calcite-input", () => {
   it(`disallows pasting just text characters with no initial value`, async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-input type="number"></calcite-input><input id="copy" value="invalid number" />`
+      html`<calcite-input type="number"></calcite-input><input id="copy" value="invalid number" />`,
     );
     const calciteInput = await page.find("calcite-input");
     const input = await page.find("calcite-input >>> input");
@@ -1582,7 +1582,7 @@ describe("calcite-input", () => {
     const initialValue = "1234.56";
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-input type="number" value="1234.56"></calcite-input><input id="copy" value="invalid number" />`
+      html`<calcite-input type="number" value="1234.56"></calcite-input><input id="copy" value="invalid number" />`,
     );
     const calciteInput = await page.find("calcite-input");
     const input = await page.find("calcite-input >>> input");
@@ -1610,7 +1610,7 @@ describe("calcite-input", () => {
   it(`disallows pasting just text characters with no initial value with group separator`, async () => {
     const page = await newE2EPage();
     await page.setContent(
-      html`<calcite-input type="number" group-separator></calcite-input><input id="copy" value="invalid number" />`
+      html`<calcite-input type="number" group-separator></calcite-input><input id="copy" value="invalid number" />`,
     );
     const calciteInput = await page.find("calcite-input");
     const input = await page.find("calcite-input >>> input");
@@ -1640,7 +1640,7 @@ describe("calcite-input", () => {
     const page = await newE2EPage();
     await page.setContent(
       html`<calcite-input type="number" value="1234.56" group-separator></calcite-input
-        ><input id="copy" value="invalid number" />`
+        ><input id="copy" value="invalid number" />`,
     );
     const calciteInput = await page.find("calcite-input");
     const input = await page.find("calcite-input >>> input");
@@ -1800,7 +1800,7 @@ describe("calcite-input", () => {
 
     const determineCaretIndex = (
       nestedInputTypeSelector: "textarea" | "input",
-      position?: number
+      position?: number,
     ): Promise<boolean> => {
       return page.evaluate(
         (nestedInputTypeSelector, position) => {
@@ -1809,7 +1809,7 @@ describe("calcite-input", () => {
           return el.selectionStart === (position !== undefined ? position : el.value.length);
         },
         nestedInputTypeSelector,
-        position
+        position,
       );
     };
 
@@ -1894,7 +1894,7 @@ describe("calcite-input", () => {
             }
           });
         },
-        cursorHomeCount
+        cursorHomeCount,
       );
       await page.waitForTimeout(delayFor2UpdatesInMs);
 
@@ -1908,7 +1908,7 @@ describe("calcite-input", () => {
   it("allows disabling slotted action", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-input><calcite-button slot="action" disabled>Action</calcite-button></calcite-input>`
+      `<calcite-input><calcite-button slot="action" disabled>Action</calcite-button></calcite-input>`,
     );
 
     const input = await page.find("calcite-input");
diff --git a/packages/calcite-components/src/components/input/input.scss b/packages/calcite-components/src/components/input/input.scss
index 2f52b2bd93c..c5890155d41 100755
--- a/packages/calcite-components/src/components/input/input.scss
+++ b/packages/calcite-components/src/components/input/input.scss
@@ -99,7 +99,10 @@
 
 textarea,
 input {
-  transition: var(--calcite-animation-timing), block-size 0, outline-offset 0s;
+  transition:
+    var(--calcite-animation-timing),
+    block-size 0,
+    outline-offset 0s;
   -webkit-appearance: none;
   @apply font-inherit
     text-color-1
diff --git a/packages/calcite-components/src/components/input/input.stories.ts b/packages/calcite-components/src/components/input/input.stories.ts
index b3ec6fc53c7..b9fb488edae 100644
--- a/packages/calcite-components/src/components/input/input.stories.ts
+++ b/packages/calcite-components/src/components/input/input.stories.ts
@@ -19,7 +19,7 @@ export const simple = (): string => html`
       type="${select(
         "type",
         ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"],
-        "text"
+        "text",
       )}"
       alignment="${select("alignment", ["start", "end"], "start")}"
       number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
@@ -48,7 +48,7 @@ export const withSlottedAction = (): string => html`
       type="${select(
         "type",
         ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"],
-        "text"
+        "text",
       )}"
       alignment="${select("alignment", ["start", "end"], "start")}"
       number-button-type="${select("number-button-type", ["none", "horizontal", "vertical"], "horizontal")}"
@@ -108,7 +108,7 @@ export const darkModeRTL_TestOnly = (): string => html`
         type="${select(
           "type",
           ["text", "textarea", "email", "password", "tel", "number", "search", "file", "time", "date"],
-          "text"
+          "text",
         )}"
         status="${select("status", ["idle", "invalid", "valid"], "idle")}"
         alignment="${select("alignment", ["start", "end"], "start")}"
@@ -134,43 +134,42 @@ darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 export const arabicLocaleWithLatinNumberingSystem_TestOnly = (): string =>
   html` <calcite-input type="number" lang="ar-EG" value="123456"></calcite-input>`;
 
-export const validationMessageAllScales_TestOnly = (): string =>
-  html`
-    <style>
-      .container {
-        display: flex;
-        flex-direction: column;
-        width: 400px;
-        height: 200px;
-        gap: 20px;
-      }
-    </style>
-    <div class="container">
-      <calcite-input
-        type="number"
-        scale="s"
-        status="invalid"
-        validation-message="This field is required."
-        validation-icon="frown"
-      ></calcite-input>
-      <calcite-input
-        type="number"
-        scale="m"
-        status="invalid"
-        validation-message="Value must be greater than 1337"
-        validation-icon
-        value="420"
-      ></calcite-input>
-      <calcite-input
-        type="number"
-        scale="l"
-        status="invalid"
-        validation-message="Exceeds the maximum length of 2 characters"
-        validation-icon
-        value="123"
-      ></calcite-input>
-    </div>
-  `;
+export const validationMessageAllScales_TestOnly = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 400px;
+      height: 200px;
+      gap: 20px;
+    }
+  </style>
+  <div class="container">
+    <calcite-input
+      type="number"
+      scale="s"
+      status="invalid"
+      validation-message="This field is required."
+      validation-icon="frown"
+    ></calcite-input>
+    <calcite-input
+      type="number"
+      scale="m"
+      status="invalid"
+      validation-message="Value must be greater than 1337"
+      validation-icon
+      value="420"
+    ></calcite-input>
+    <calcite-input
+      type="number"
+      scale="l"
+      status="invalid"
+      validation-message="Exceeds the maximum length of 2 characters"
+      validation-icon
+      value="123"
+    ></calcite-input>
+  </div>
+`;
 
 export const widthSetToBreakpoints_TestOnly = (): string =>
   createBreakpointStories(html`
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index 53d2ee4a8b2..be5a21c7464 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -380,10 +380,10 @@ export class Input
           newValue == null || newValue == ""
             ? ""
             : this.type === "number"
-            ? isValidNumber(newValue)
-              ? newValue
-              : this.previousValue || ""
-            : newValue,
+              ? isValidNumber(newValue)
+                ? newValue
+                : this.previousValue || ""
+              : newValue,
       });
       this.warnAboutInvalidNumberValue(newValue);
     }
@@ -624,7 +624,7 @@ export class Input
     direction: NumberNudgeDirection,
     inputMax: number | null,
     inputMin: number | null,
-    nativeEvent: KeyboardEvent | MouseEvent
+    nativeEvent: KeyboardEvent | MouseEvent,
   ): void {
     const { value } = this;
     const adjustment = direction === "up" ? 1 : -1;
@@ -645,8 +645,8 @@ export class Input
     const finalValue = nudgedValueBelowInputMin()
       ? `${inputMin}`
       : nudgedValueAboveInputMax()
-      ? `${inputMax}`
-      : nudgedValue.toString();
+        ? `${inputMax}`
+        : nudgedValue.toString();
 
     this.setValue({
       committing: true,
@@ -818,7 +818,7 @@ export class Input
 
   private nudgeNumberValue = (
     direction: NumberNudgeDirection,
-    nativeEvent: KeyboardEvent | MouseEvent
+    nativeEvent: KeyboardEvent | MouseEvent,
   ): void => {
     if ((nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) || this.type !== "number") {
       return;
@@ -987,7 +987,7 @@ export class Input
         newLocalizedValue = addLocalizedTrailingDecimalZeros(
           newLocalizedValue,
           newValue,
-          numberStringFormatter
+          numberStringFormatter,
         );
       }
 
diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
index ae6705b3fb7..92108c17d16 100755
--- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts
+++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -136,22 +136,24 @@ describe("calcite-list-item", () => {
 
   it("does not emit calciteListItemSelect on Enter within action slots", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-list-item selection-mode="single" label="hello" description="world" active
-      ><calcite-action
-        appearance="transparent"
-        icon="banana"
-        text="menu"
-        label="menu"
-        slot="filter-actions-start"
-      ></calcite-action>
-      <calcite-action
-        appearance="transparent"
-        icon="sort-ascending"
-        text="menu"
-        label="menu"
-        slot="filter-actions-end"
-      ></calcite-action
-    ></calcite-list-item>`);
+    await page.setContent(
+      html`<calcite-list-item selection-mode="single" label="hello" description="world" active
+        ><calcite-action
+          appearance="transparent"
+          icon="banana"
+          text="menu"
+          label="menu"
+          slot="filter-actions-start"
+        ></calcite-action>
+        <calcite-action
+          appearance="transparent"
+          icon="sort-ascending"
+          text="menu"
+          label="menu"
+          slot="filter-actions-end"
+        ></calcite-action
+      ></calcite-list-item>`,
+    );
 
     await page.waitForChanges();
 
diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index 2f1fdbcd594..d1325028925 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -448,8 +448,8 @@ export class ListItem
       ? open
         ? ICONS.open
         : dir === "rtl"
-        ? ICONS.closedRTL
-        : ICONS.closedLTR
+          ? ICONS.closedRTL
+          : ICONS.closedLTR
       : ICONS.blank;
 
     const clickHandler = openable ? this.handleToggleClick : this.handleItemClick;
@@ -787,7 +787,7 @@ export class ListItem
 
   private getGridCells(): HTMLTableCellElement[] {
     return [this.handleGridEl, this.actionsStartEl, this.contentEl, this.actionsEndEl].filter(
-      (el) => el && !el.hidden
+      (el) => el && !el.hidden,
     );
   }
 
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 3cf752cfd51..e80051602d7 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -80,7 +80,7 @@ describe("calcite-list", () => {
       </calcite-list>`,
       {
         focusTargetSelector: "calcite-list-item",
-      }
+      },
     );
   });
 
@@ -93,17 +93,19 @@ describe("calcite-list", () => {
   });
 
   describe("accessible", () => {
-    accessible(html`<calcite-list>
-      <calcite-list-item label="candy" description="kingdom">
-        <calcite-action icon="banana" label="finn" slot="actions-start" />
-        <calcite-icon icon="banana" slot="content-start" />
-        <img slot="content-start" src="${placeholder}" alt="Test image" />
-        <calcite-icon icon="banana" slot="content-end" />
-        <calcite-action icon="banana" label="jake" slot="actions-end" />
-      </calcite-list-item>
-      <calcite-list-item label="test" non-interactive description="hello world"></calcite-list-item>
-      <calcite-list-item label="test" description="hello world"></calcite-list-item>
-    </calcite-list>`);
+    accessible(
+      html`<calcite-list>
+        <calcite-list-item label="candy" description="kingdom">
+          <calcite-action icon="banana" label="finn" slot="actions-start" />
+          <calcite-icon icon="banana" slot="content-start" />
+          <img slot="content-start" src="${placeholder}" alt="Test image" />
+          <calcite-icon icon="banana" slot="content-end" />
+          <calcite-action icon="banana" label="jake" slot="actions-end" />
+        </calcite-list-item>
+        <calcite-list-item label="test" non-interactive description="hello world"></calcite-list-item>
+        <calcite-list-item label="test" description="hello world"></calcite-list-item>
+      </calcite-list>`,
+    );
   });
 
   describe("disabled", () => {
@@ -111,7 +113,7 @@ describe("calcite-list", () => {
       html`<calcite-list>
         <calcite-list-item label="test" description="hello world"></calcite-list-item>
       </calcite-list>`,
-      { focusTarget: "child" }
+      { focusTarget: "child" },
     );
 
     it("disabling and enabling an item restores actions from being tabbable", async () => {
@@ -258,12 +260,14 @@ describe("calcite-list", () => {
     };
 
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-list selection-mode="multiple">
-      <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
-      <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
-      <calcite-list-item id="item-3" label="hello 3" description="world 3"></calcite-list-item>
-      <calcite-list-item id="item-4" label="hello 4" description="world 4"></calcite-list-item>
-    </calcite-list>`);
+    await page.setContent(
+      html`<calcite-list selection-mode="multiple">
+        <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
+        <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
+        <calcite-list-item id="item-3" label="hello 3" description="world 3"></calcite-list-item>
+        <calcite-list-item id="item-4" label="hello 4" description="world 4"></calcite-list-item>
+      </calcite-list>`,
+    );
     await page.waitForChanges();
     await page.waitForTimeout(listDebounceTimeout);
 
@@ -326,11 +330,13 @@ describe("calcite-list", () => {
 
   it("should update active item on init and click", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-list selection-mode="none">
-      <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
-      <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
-      <calcite-list-item id="item-3" label="hello 3" description="world 3"></calcite-list-item>
-    </calcite-list>`);
+    await page.setContent(
+      html`<calcite-list selection-mode="none">
+        <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
+        <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
+        <calcite-list-item id="item-3" label="hello 3" description="world 3"></calcite-list-item>
+      </calcite-list>`,
+    );
     await page.waitForChanges();
     await page.waitForTimeout(listDebounceTimeout);
 
@@ -356,11 +362,13 @@ describe("calcite-list", () => {
 
   it("should prevent de-selection of selected item in single-persist mode", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-list selection-mode="single-persist">
-      <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
-      <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
-      <calcite-list-item id="item-3" selected label="hello 3" description="world 3"></calcite-list-item>
-    </calcite-list>`);
+    await page.setContent(
+      html`<calcite-list selection-mode="single-persist">
+        <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
+        <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
+        <calcite-list-item id="item-3" selected label="hello 3" description="world 3"></calcite-list-item>
+      </calcite-list>`,
+    );
 
     await page.waitForChanges();
     await page.waitForTimeout(listDebounceTimeout);
@@ -386,11 +394,13 @@ describe("calcite-list", () => {
 
   it("should correctly allow de-selection and change of selected item in single mode", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-list selection-mode="single">
-      <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
-      <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
-      <calcite-list-item id="item-3" selected label="hello 3" description="world 3"></calcite-list-item>
-    </calcite-list>`);
+    await page.setContent(
+      html`<calcite-list selection-mode="single">
+        <calcite-list-item id="item-1" label="hello" description="world"></calcite-list-item>
+        <calcite-list-item id="item-2" label="hello 2" description="world 2"></calcite-list-item>
+        <calcite-list-item id="item-3" selected label="hello 3" description="world 3"></calcite-list-item>
+      </calcite-list>`,
+    );
 
     await page.waitForChanges();
     await page.waitForTimeout(listDebounceTimeout);
@@ -717,11 +727,13 @@ describe("calcite-list", () => {
   describe("drag and drop", () => {
     async function createSimpleList(): Promise<E2EPage> {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-list drag-enabled>
-        <calcite-list-item value="one" label="One"></calcite-list-item>
-        <calcite-list-item value="two" label="Two"></calcite-list-item>
-        <calcite-list-item value="three" label="Three"></calcite-list-item>
-      </calcite-list>`);
+      await page.setContent(
+        html`<calcite-list drag-enabled>
+          <calcite-list-item value="one" label="One"></calcite-list-item>
+          <calcite-list-item value="two" label="Two"></calcite-list-item>
+          <calcite-list-item value="three" label="Three"></calcite-list-item>
+        </calcite-list>`,
+      );
       await page.waitForChanges();
       await page.waitForTimeout(listDebounceTimeout);
       return page;
@@ -776,7 +788,7 @@ describe("calcite-list", () => {
         {
           element: `calcite-list-item[value="two"]`,
           shadow: "calcite-handle",
-        }
+        },
       );
 
       const [first, second] = await page.findAll("calcite-list-item");
@@ -846,7 +858,7 @@ describe("calcite-list", () => {
         lists.forEach((list) =>
           list.addEventListener("calciteListOrderChange", () => {
             testWindow.calledTimes++;
-          })
+          }),
         );
       });
 
@@ -861,7 +873,7 @@ describe("calcite-list", () => {
           pointerPosition: {
             vertical: "bottom",
           },
-        }
+        },
       );
 
       await dragAndDrop(
@@ -875,7 +887,7 @@ describe("calcite-list", () => {
           pointerPosition: {
             vertical: "bottom",
           },
-        }
+        },
       );
 
       await dragAndDrop(
@@ -889,12 +901,11 @@ describe("calcite-list", () => {
           pointerPosition: {
             vertical: "bottom",
           },
-        }
+        },
       );
 
-      const [first, second, third, fourth, fifth, sixth, seventh, eight, ninth] = await page.findAll(
-        "calcite-list-item"
-      );
+      const [first, second, third, fourth, fifth, sixth, seventh, eight, ninth] =
+        await page.findAll("calcite-list-item");
       expect(await first.getProperty("value")).toBe("a");
       expect(await second.getProperty("value")).toBe("b");
       expect(await third.getProperty("value")).toBe("d");
@@ -936,7 +947,7 @@ describe("calcite-list", () => {
         arrowKey: "ArrowDown" | "ArrowUp",
         expectedValueOrder: string[],
         newIndex: number,
-        oldIndex: number
+        oldIndex: number,
       ): Promise<void> {
         await page.waitForChanges();
         await page.keyboard.press(arrowKey);
@@ -1020,7 +1031,7 @@ describe("calcite-list", () => {
           setPosition: startIndex + 1,
           label: itemLabel,
           setSize: items.length,
-        })
+        }),
       );
 
       await page.keyboard.press("Space");
@@ -1033,7 +1044,7 @@ describe("calcite-list", () => {
           setPosition: startIndex + 1,
           label: itemLabel,
           setSize: items.length,
-        })
+        }),
       );
 
       await page.keyboard.press("ArrowDown");
@@ -1050,7 +1061,7 @@ describe("calcite-list", () => {
           setPosition: startIndex + 1,
           label: itemLabel,
           setSize: items.length,
-        })
+        }),
       );
       await page.keyboard.press("Space");
       await page.waitForChanges();
@@ -1061,7 +1072,7 @@ describe("calcite-list", () => {
           setPosition: startIndex + 1,
           label: itemLabel,
           setSize: items.length,
-        })
+        }),
       );
 
       await page.keyboard.press("Space");
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index 7c44db7d64c..bd0598aecd5 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -324,7 +324,7 @@ export class List
   handleCalciteInternalListItemSelectMultiple(
     event: CustomEvent<{
       selectMultiple: boolean;
-    }>
+    }>,
   ): void {
     if (!!this.parentListEl) {
       return;
@@ -579,7 +579,7 @@ export class List
         <div key="aria-item-count">
           {messages.total.replace(
             "{count}",
-            numberStringFormatter.localize(enabledListItems.length.toString())
+            numberStringFormatter.localize(enabledListItems.length.toString()),
           )}
         </div>
         {enabledListItems.length ? (
@@ -709,7 +709,7 @@ export class List
     const values = filteredData.map((item) => item.value);
 
     const lastDescendantItems = listItems?.filter((listItem) =>
-      listItems.every((li) => li === listItem || !listItem.contains(li))
+      listItems.every((li) => li === listItem || !listItem.contains(li)),
     );
 
     const filteredItems =
@@ -718,7 +718,7 @@ export class List
     const visibleParents = new WeakSet<HTMLElement>();
 
     lastDescendantItems.forEach((listItem) =>
-      this.filterElements({ el: listItem, filteredItems, visibleParents })
+      this.filterElements({ el: listItem, filteredItems, visibleParents }),
     );
 
     if (filteredItems.length > 0) {
@@ -900,7 +900,7 @@ export class List
   };
 
   private getTopLevelAncestorItemElement = (
-    el: HTMLCalciteListItemElement
+    el: HTMLCalciteListItemElement,
   ): HTMLCalciteListItemElement | null => {
     let closestParent = el.parentElement.closest<HTMLCalciteListItemElement>("calcite-list-item");
 
@@ -923,11 +923,11 @@ export class List
     const composedPath = event.composedPath();
 
     const handle = composedPath.find(
-      (el: HTMLElement) => el.tagName === "CALCITE-HANDLE"
+      (el: HTMLElement) => el.tagName === "CALCITE-HANDLE",
     ) as HTMLCalciteHandleElement;
 
     const sortItem = composedPath.find(
-      (el: HTMLElement) => el.tagName === "CALCITE-LIST-ITEM"
+      (el: HTMLElement) => el.tagName === "CALCITE-LIST-ITEM",
     ) as HTMLCalciteListItemElement;
 
     const parentEl = sortItem?.parentElement as HTMLCalciteListElement;
@@ -970,7 +970,7 @@ export class List
     } else {
       parentEl.insertBefore(
         sortItem,
-        sameParentItems[direction === "up" ? newIndex : newIndex + 1]
+        sameParentItems[direction === "up" ? newIndex : newIndex + 1],
       );
     }
 
diff --git a/packages/calcite-components/src/components/modal/modal.e2e.ts b/packages/calcite-components/src/components/modal/modal.e2e.ts
index 6f97b2481e4..f8cc083aa3b 100644
--- a/packages/calcite-components/src/components/modal/modal.e2e.ts
+++ b/packages/calcite-components/src/components/modal/modal.e2e.ts
@@ -2,7 +2,7 @@ import { E2EPage, newE2EPage } from "@stencil/core/testing";
 import { focusable, hidden, openClose, renders, slots, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
-import { GlobalTestProps, isElementFocused, newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
+import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils";
 
 describe("calcite-modal", () => {
   describe("renders", () => {
@@ -105,7 +105,7 @@ describe("calcite-modal", () => {
     // set small page to test overflow
     await page.setViewport({ width: 800, height: 800 });
     await page.setContent(
-      `<calcite-modal style="--calcite-modal-height:1200px;--calcite-modal-width:1200px;" open></calcite-modal>`
+      `<calcite-modal style="--calcite-modal-height:1200px;--calcite-modal-width:1200px;" open></calcite-modal>`,
     );
     const modal = await page.find("calcite-modal");
     await modal.setProperty("open", true);
@@ -135,7 +135,7 @@ describe("calcite-modal", () => {
       (el: HTMLCalciteModalElement) =>
         (el.beforeClose = (
           window as GlobalTestProps<{ beforeClose: HTMLCalciteModalElement["beforeClose"] }>
-        ).beforeClose)
+        ).beforeClose),
     );
     await page.waitForChanges();
     modal.setProperty("open", true);
@@ -161,7 +161,7 @@ describe("calcite-modal", () => {
       (el: HTMLCalciteModalElement) =>
         (el.beforeClose = (
           window as GlobalTestProps<{ beforeClose: HTMLCalciteModalElement["beforeClose"] }>
-        ).beforeClose)
+        ).beforeClose),
     );
     await page.waitForChanges();
     modal.setProperty("open", true);
@@ -187,7 +187,7 @@ describe("calcite-modal", () => {
       (el: HTMLCalciteModalElement) =>
         (el.beforeClose = (
           window as GlobalTestProps<{ beforeClose: HTMLCalciteModalElement["beforeClose"] }>
-        ).beforeClose)
+        ).beforeClose),
     );
     await page.waitForChanges();
     modal.setProperty("open", true);
@@ -210,7 +210,7 @@ describe("calcite-modal", () => {
     await page.$eval(
       "calcite-modal",
       (elm: HTMLCalciteModalElement) =>
-        (elm.beforeClose = (window as typeof window & Pick<typeof elm, "beforeClose">).beforeClose)
+        (elm.beforeClose = (window as typeof window & Pick<typeof elm, "beforeClose">).beforeClose),
     );
 
     const modal = await page.find("calcite-modal");
@@ -229,7 +229,7 @@ describe("calcite-modal", () => {
     await page.$eval(
       "calcite-modal",
       (elm: HTMLCalciteModalElement) =>
-        (elm.beforeClose = (window as typeof window & Pick<typeof elm, "beforeClose">).beforeClose)
+        (elm.beforeClose = (window as typeof window & Pick<typeof elm, "beforeClose">).beforeClose),
     );
 
     const modal = await page.find("calcite-modal");
@@ -241,208 +241,6 @@ describe("calcite-modal", () => {
     expect(modal.getAttribute("open")).toBe(""); // Makes sure attribute is added back
   });
 
-  describe("opening and closing behavior", () => {
-    it("opens and closes", async () => {
-      const page = await newE2EPage();
-      await page.setContent(html`<calcite-modal></calcite-modal>`);
-      const modal = await page.find("calcite-modal");
-
-      type ModalEventOrderWindow = GlobalTestProps<{ events: string[] }>;
-
-      await page.$eval("calcite-modal", (modal: HTMLCalciteModalElement) => {
-        const receivedEvents: string[] = [];
-        (window as ModalEventOrderWindow).events = receivedEvents;
-
-        ["calciteModalBeforeOpen", "calciteModalOpen", "calciteModalBeforeClose", "calciteModalClose"].forEach(
-          (eventType) => {
-            modal.addEventListener(eventType, (event) => receivedEvents.push(event.type));
-          }
-        );
-      });
-
-      const beforeOpenSpy = await modal.spyOnEvent("calciteModalBeforeOpen");
-      const openSpy = await modal.spyOnEvent("calciteModalOpen");
-      const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
-      const closeSpy = await modal.spyOnEvent("calciteModalClose");
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(0);
-      expect(openSpy).toHaveReceivedEventTimes(0);
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
-      expect(closeSpy).toHaveReceivedEventTimes(0);
-
-      expect(await modal.isVisible()).toBe(false);
-
-      const modalBeforeOpen = page.waitForEvent("calciteModalBeforeOpen");
-      const modalOpen = page.waitForEvent("calciteModalOpen");
-      await modal.setProperty("open", true);
-      await page.waitForChanges();
-
-      await modalBeforeOpen;
-      await modalOpen;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
-      expect(closeSpy).toHaveReceivedEventTimes(0);
-
-      expect(await modal.isVisible()).toBe(true);
-
-      const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
-      const modalClose = page.waitForEvent("calciteModalClose");
-      await modal.setProperty("open", false);
-      await page.waitForChanges();
-
-      await modalBeforeClose;
-      await modalClose;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
-      expect(closeSpy).toHaveReceivedEventTimes(1);
-
-      expect(await modal.isVisible()).toBe(false);
-
-      expect(await page.evaluate(() => (window as ModalEventOrderWindow).events)).toEqual([
-        "calciteModalBeforeOpen",
-        "calciteModalOpen",
-        "calciteModalBeforeClose",
-        "calciteModalClose",
-      ]);
-    });
-
-    it("emits when closing on click", async () => {
-      const page = await newE2EPage();
-      await page.setContent(html`<calcite-modal></calcite-modal>`);
-      const modal = await page.find("calcite-modal");
-
-      const beforeOpenSpy = await modal.spyOnEvent("calciteModalBeforeOpen");
-      const openSpy = await modal.spyOnEvent("calciteModalOpen");
-      const beforeCloseSpy = await modal.spyOnEvent("calciteModalBeforeClose");
-      const closeSpy = await modal.spyOnEvent("calciteModalClose");
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(0);
-      expect(openSpy).toHaveReceivedEventTimes(0);
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
-      expect(closeSpy).toHaveReceivedEventTimes(0);
-
-      expect(await modal.isVisible()).toBe(false);
-
-      const modalBeforeOpen = page.waitForEvent("calciteModalBeforeOpen");
-      const modalOpen = page.waitForEvent("calciteModalOpen");
-      modal.setProperty("open", true);
-      await page.waitForChanges();
-
-      await modalBeforeOpen;
-      await modalOpen;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(0);
-      expect(closeSpy).toHaveReceivedEventTimes(0);
-
-      expect(await modal.isVisible()).toBe(true);
-
-      const modalBeforeClose = page.waitForEvent("calciteModalBeforeClose");
-      const modalClose = page.waitForEvent("calciteModalClose");
-      const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
-      await closeButton.click();
-      await page.waitForChanges();
-
-      await modalBeforeClose;
-      await modalClose;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
-      expect(closeSpy).toHaveReceivedEventTimes(1);
-
-      expect(await modal.isVisible()).toBe(false);
-    });
-
-    it("emits when set to open on initial render", async () => {
-      const page = await newProgrammaticE2EPage();
-
-      const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
-      const openSpy = await page.spyOnEvent("calciteModalOpen");
-
-      const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
-      const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
-
-      await page.evaluate((): void => {
-        const modal = document.createElement("calcite-modal");
-        modal.open = true;
-        document.body.append(modal);
-      });
-
-      await page.waitForChanges();
-      await waitForBeforeOpenEvent;
-      await waitForOpenEvent;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-    });
-
-    it("emits when set to open on initial render and duration is 0", async () => {
-      const page = await newProgrammaticE2EPage();
-      await skipAnimations(page);
-
-      const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
-      const openSpy = await page.spyOnEvent("calciteModalOpen");
-
-      const waitForOpenEvent = page.waitForEvent("calciteModalOpen");
-      const waitForBeforeOpenEvent = page.waitForEvent("calciteModalBeforeOpen");
-
-      await page.evaluate((): void => {
-        const modal = document.createElement("calcite-modal");
-        modal.open = true;
-        document.body.append(modal);
-      });
-
-      await page.waitForChanges();
-      await waitForBeforeOpenEvent;
-      await waitForOpenEvent;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-    });
-
-    it("emits when duration is set to 0", async () => {
-      const page = await newProgrammaticE2EPage();
-      await skipAnimations(page);
-
-      const beforeOpenSpy = await page.spyOnEvent("calciteModalBeforeOpen");
-      const openSpy = await page.spyOnEvent("calciteModalOpen");
-
-      const beforeCloseSpy = await page.spyOnEvent("calciteModalBeforeClose");
-      const closeSpy = await page.spyOnEvent("calciteModalClose");
-
-      await page.evaluate((): void => {
-        const modal = document.createElement("calcite-modal");
-        modal.open = true;
-        document.body.append(modal);
-      });
-
-      await page.waitForChanges();
-      await beforeOpenSpy;
-      await openSpy;
-
-      expect(beforeOpenSpy).toHaveReceivedEventTimes(1);
-      expect(openSpy).toHaveReceivedEventTimes(1);
-
-      await page.evaluate(() => {
-        const modal = document.querySelector("calcite-modal");
-        modal.open = false;
-      });
-
-      await page.waitForChanges();
-      await beforeCloseSpy;
-      await closeSpy;
-
-      expect(beforeCloseSpy).toHaveReceivedEventTimes(1);
-      expect(closeSpy).toHaveReceivedEventTimes(1);
-    });
-  });
-
   describe("calcite-modal accessibility checks", () => {
     it("traps focus within the modal when open", async () => {
       const button1Id = "button1";
@@ -454,7 +252,7 @@ describe("calcite-modal", () => {
             <button id="${button1Id}">Focus1</button>
             <button id="${button2Id}">Focus2</button>
           </div>
-        </calcite-modal>`
+        </calcite-modal>`,
       );
       const modal = await page.find("calcite-modal");
       const opened = page.waitForEvent("calciteModalOpen");
@@ -482,12 +280,10 @@ describe("calcite-modal", () => {
       const initiallyFocusedId = "initially-focused";
       const initiallyFocusedIdSelector = `#${initiallyFocusedId}`;
       const page = await newE2EPage();
-      await page.setContent(
-        html`
-          <button id="${initiallyFocusedId}">Focus</button>
-          <calcite-modal></calcite-modal>
-        `
-      );
+      await page.setContent(html`
+        <button id="${initiallyFocusedId}">Focus</button>
+        <calcite-modal></calcite-modal>
+      `);
       await skipAnimations(page);
       const modal = await page.find("calcite-modal");
       await page.$eval(initiallyFocusedIdSelector, (button: HTMLButtonElement) => {
@@ -510,7 +306,7 @@ describe("calcite-modal", () => {
             <button id="${button1Id}">Focus1</button>
             <button id="${button2Id}">Focus2</button>
           </div>
-        </calcite-modal>`
+        </calcite-modal>`,
       );
       await skipAnimations(page);
       const modal = await page.find("calcite-modal");
@@ -530,243 +326,242 @@ describe("calcite-modal", () => {
       await page.keyboard.press("Tab");
       expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
     });
-  });
 
-  describe("setFocus", () => {
-    const createModalHTML = (contentHTML?: string, attrs?: string) =>
-      `<calcite-modal open ${attrs}>${contentHTML}</calcite-modal>`;
+    describe("setFocus", () => {
+      const createModalHTML = (contentHTML?: string, attrs?: string) =>
+        `<calcite-modal open ${attrs}>${contentHTML}</calcite-modal>`;
 
-    const closeButtonTargetSelector = `.${CSS.close}`;
-    const focusableContentTargetClass = "test";
+      const closeButtonTargetSelector = `.${CSS.close}`;
+      const focusableContentTargetClass = "test";
 
-    const focusableContentHTML = html`<h3 slot="header">Title</h3>
-      <p slot="content">This is the content <button class=${focusableContentTargetClass}>test</button></p>`;
+      const focusableContentHTML = html`<h3 slot="header">Title</h3>
+        <p slot="content">This is the content <button class=${focusableContentTargetClass}>test</button></p>`;
 
-    describe("focuses close button by default", () => {
-      focusable(createModalHTML(focusableContentHTML), {
-        shadowFocusTargetSelector: closeButtonTargetSelector,
+      describe("focuses close button by default", () => {
+        focusable(createModalHTML(focusableContentHTML), {
+          shadowFocusTargetSelector: closeButtonTargetSelector,
+        });
       });
-    });
 
-    describe("focuses content if there is no close button", () => {
-      focusable(createModalHTML(focusableContentHTML, "close-button-disabled"), {
-        focusTargetSelector: `.${focusableContentTargetClass}`,
+      describe("focuses content if there is no close button", () => {
+        focusable(createModalHTML(focusableContentHTML, "close-button-disabled"), {
+          focusTargetSelector: `.${focusableContentTargetClass}`,
+        });
       });
     });
-  });
-
-  it("has correct aria role/attribute", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal></calcite-modal>`);
-    const modal = await page.find("calcite-modal");
-    expect(modal).toEqualAttribute("role", "dialog");
-    expect(modal).toEqualAttribute("aria-modal", "true");
-  });
-
-  it("closes and allows re-opening when Escape key is pressed", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal ></calcite-modal>`);
-    await skipAnimations(page);
-    const modal = await page.find("calcite-modal");
-    await modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(await modal.isVisible()).toBe(true);
-    await page.keyboard.press("Escape");
-    await page.waitForChanges();
-    expect(await modal.isVisible()).toBe(false);
-    expect(await modal.getProperty("open")).toBe(false);
-    await modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(await modal.isVisible()).toBe(true);
-  });
-
-  it("closes when Escape key is pressed and modal is open on page load", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal  open></calcite-modal>`);
-    const modal = await page.find("calcite-modal");
-    await page.waitForChanges();
-    expect(modal).toHaveAttribute("open");
-    expect(modal).toHaveAttribute("open");
-    await page.keyboard.press("Escape");
-    await page.waitForChanges();
-    expect(modal).not.toHaveAttribute("open");
-    expect(modal).not.toHaveAttribute("open");
-    await modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(modal).toHaveAttribute("open");
-    expect(modal).toHaveAttribute("open");
-  });
-
-  it("closes and allows re-opening when Close button is clicked", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal></calcite-modal>`);
-    await skipAnimations(page);
-    const modal = await page.find("calcite-modal");
-    modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(await modal.isVisible()).toBe(true);
-    const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
-    await closeButton.click();
-    await page.waitForChanges();
-    expect(await modal.isVisible()).toBe(false);
-    expect(await modal.getProperty("open")).toBe(false);
-    modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(await modal.isVisible()).toBe(true);
-  });
-
-  it("should close when the scrim is clicked", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal ></calcite-modal>`);
-    const modal = await page.find("calcite-modal");
-    modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(modal).toHaveAttribute("open");
-    await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector("calcite-scrim").click());
-    await page.waitForChanges();
-    expect(await modal.getProperty("open")).toBe(false);
-  });
 
-  it("should not close when the scrim is clicked", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal outside-close-disabled ></calcite-modal>`);
-    const modal = await page.find("calcite-modal");
-    modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(modal).toHaveAttribute("open");
-    await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector("calcite-scrim").click());
-    await page.waitForChanges();
-    expect(await modal.getProperty("open")).toBe(true);
-  });
-
-  it("does not close when Escape is pressed and escape-disabled is set", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`<calcite-modal escape-disabled></calcite-modal>`);
-    const modal = await page.find("calcite-modal");
-    await modal.setProperty("open", true);
-    await page.waitForChanges();
-    expect(modal).toHaveAttribute("open");
-    await page.keyboard.press("Escape");
-    await page.waitForChanges();
-    expect(modal).toHaveAttribute("open");
-  });
-
-  describe("overflow prevention", () => {
-    async function hasOverflowStyle(page: E2EPage): Promise<boolean> {
-      return page.evaluate(() => document.documentElement.style.overflow === "hidden");
-    }
-
-    it("correctly sets overflow style on document when opened/closed", async () => {
+    it("has correct aria role/attribute", async () => {
       const page = await newE2EPage();
       await page.setContent(`<calcite-modal></calcite-modal>`);
       const modal = await page.find("calcite-modal");
+      expect(modal).toEqualAttribute("role", "dialog");
+      expect(modal).toEqualAttribute("aria-modal", "true");
+    });
 
+    it("closes and allows re-opening when Escape key is pressed", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-modal ></calcite-modal>`);
+      await skipAnimations(page);
+      const modal = await page.find("calcite-modal");
       await modal.setProperty("open", true);
       await page.waitForChanges();
-
-      expect(await hasOverflowStyle(page)).toEqual(true);
-
-      await modal.setProperty("open", false);
+      expect(await modal.isVisible()).toBe(true);
+      await page.keyboard.press("Escape");
       await page.waitForChanges();
-
-      expect(await hasOverflowStyle(page)).toEqual(false);
+      expect(await modal.isVisible()).toBe(false);
+      expect(await modal.getProperty("open")).toBe(false);
+      await modal.setProperty("open", true);
+      await page.waitForChanges();
+      expect(await modal.isVisible()).toBe(true);
     });
 
-    it("preserves existing overflow style when modal is opened/closed", async () => {
+    it("closes when Escape key is pressed and modal is open on page load", async () => {
       const page = await newE2EPage();
-      await page.setContent(`<calcite-modal></calcite-modal>`);
-      await page.evaluate(() => (document.documentElement.style.overflow = "scroll"));
+      await page.setContent(`<calcite-modal  open></calcite-modal>`);
       const modal = await page.find("calcite-modal");
-
-      await modal.setProperty("open", true);
       await page.waitForChanges();
-
-      expect(await hasOverflowStyle(page)).toEqual(true);
-
-      await modal.setProperty("open", false);
+      expect(modal).toHaveAttribute("open");
+      expect(modal).toHaveAttribute("open");
+      await page.keyboard.press("Escape");
       await page.waitForChanges();
-
-      expect(await page.evaluate(() => document.documentElement.style.overflow)).toEqual("scroll");
+      expect(modal).not.toHaveAttribute("open");
+      expect(modal).not.toHaveAttribute("open");
+      await modal.setProperty("open", true);
+      await page.waitForChanges();
+      expect(modal).toHaveAttribute("open");
+      expect(modal).toHaveAttribute("open");
     });
 
-    it("correctly does not add overflow style on document when open and slotted in shell modals slot", async () => {
+    it("closes and allows re-opening when Close button is clicked", async () => {
       const page = await newE2EPage();
-      await page.setContent(`<calcite-shell><calcite-modal slot="modals"></calcite-modal></calcite-shell>`);
+      await page.setContent(`<calcite-modal></calcite-modal>`);
+      await skipAnimations(page);
       const modal = await page.find("calcite-modal");
-
-      await modal.setProperty("open", true);
+      modal.setProperty("open", true);
       await page.waitForChanges();
-
-      expect(await hasOverflowStyle(page)).toEqual(false);
+      expect(await modal.isVisible()).toBe(true);
+      const closeButton = await page.find(`calcite-modal >>> .${CSS.close}`);
+      await closeButton.click();
+      await page.waitForChanges();
+      expect(await modal.isVisible()).toBe(false);
+      expect(await modal.getProperty("open")).toBe(false);
+      modal.setProperty("open", true);
+      await page.waitForChanges();
+      expect(await modal.isVisible()).toBe(true);
     });
 
-    it("correctly removes overflow style on document when multiple modals are closed in first-in-last-out order", async () => {
+    it("should close when the scrim is clicked", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`
-        <calcite-modal id="modal-1"></calcite-modal>
-        <calcite-modal id="modal-2"></calcite-modal>
-      `);
-      const modal1 = await page.find("#modal-1");
-      const modal2 = await page.find("#modal-2");
-
-      await modal1.setProperty("open", true);
+      await page.setContent(`<calcite-modal ></calcite-modal>`);
+      const modal = await page.find("calcite-modal");
+      modal.setProperty("open", true);
       await page.waitForChanges();
-      await modal2.setProperty("open", true);
+      expect(modal).toHaveAttribute("open");
+      await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector("calcite-scrim").click());
       await page.waitForChanges();
+      expect(await modal.getProperty("open")).toBe(false);
+    });
 
-      expect(await hasOverflowStyle(page)).toEqual(true);
-
-      await modal2.setProperty("open", false);
+    it("should not close when the scrim is clicked", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`<calcite-modal outside-close-disabled ></calcite-modal>`);
+      const modal = await page.find("calcite-modal");
+      modal.setProperty("open", true);
       await page.waitForChanges();
-      await modal1.setProperty("open", false);
+      expect(modal).toHaveAttribute("open");
+      await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector("calcite-scrim").click());
       await page.waitForChanges();
-
-      expect(await hasOverflowStyle(page)).toEqual(false);
+      expect(await modal.getProperty("open")).toBe(true);
     });
 
-    it("correctly removes overflow style on document when multiple modals are closed in first-in-first-out order", async () => {
+    it("does not close when Escape is pressed and escape-disabled is set", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`
-        <calcite-modal id="modal-1"></calcite-modal>
-        <calcite-modal id="modal-2"></calcite-modal>
-      `);
-      const modal1 = await page.find("#modal-1");
-      const modal2 = await page.find("#modal-2");
-
-      await modal1.setProperty("open", true);
+      await page.setContent(`<calcite-modal escape-disabled></calcite-modal>`);
+      const modal = await page.find("calcite-modal");
+      await modal.setProperty("open", true);
       await page.waitForChanges();
-      await modal2.setProperty("open", true);
+      expect(modal).toHaveAttribute("open");
+      await page.keyboard.press("Escape");
       await page.waitForChanges();
+      expect(modal).toHaveAttribute("open");
+    });
 
-      expect(await hasOverflowStyle(page)).toEqual(true);
+    describe("overflow prevention", () => {
+      async function hasOverflowStyle(page: E2EPage): Promise<boolean> {
+        return page.evaluate(() => document.documentElement.style.overflow === "hidden");
+      }
 
-      await modal1.setProperty("open", false);
-      await page.waitForChanges();
-      await modal2.setProperty("open", false);
-      await page.waitForChanges();
+      it("correctly sets overflow style on document when opened/closed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-modal></calcite-modal>`);
+        const modal = await page.find("calcite-modal");
+
+        await modal.setProperty("open", true);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(true);
+
+        await modal.setProperty("open", false);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(false);
+      });
+
+      it("preserves existing overflow style when modal is opened/closed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-modal></calcite-modal>`);
+        await page.evaluate(() => (document.documentElement.style.overflow = "scroll"));
+        const modal = await page.find("calcite-modal");
+
+        await modal.setProperty("open", true);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(true);
+
+        await modal.setProperty("open", false);
+        await page.waitForChanges();
+
+        expect(await page.evaluate(() => document.documentElement.style.overflow)).toEqual("scroll");
+      });
+
+      it("correctly does not add overflow style on document when open and slotted in shell modals slot", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell><calcite-modal slot="modals"></calcite-modal></calcite-shell>`);
+        const modal = await page.find("calcite-modal");
+
+        await modal.setProperty("open", true);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(false);
+      });
+
+      it("correctly removes overflow style on document when multiple modals are closed in first-in-last-out order", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`
+          <calcite-modal id="modal-1"></calcite-modal>
+          <calcite-modal id="modal-2"></calcite-modal>
+        `);
+        const modal1 = await page.find("#modal-1");
+        const modal2 = await page.find("#modal-2");
+
+        await modal1.setProperty("open", true);
+        await page.waitForChanges();
+        await modal2.setProperty("open", true);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(true);
+
+        await modal2.setProperty("open", false);
+        await page.waitForChanges();
+        await modal1.setProperty("open", false);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(false);
+      });
 
-      expect(await hasOverflowStyle(page)).toEqual(false);
+      it("correctly removes overflow style on document when multiple modals are closed in first-in-first-out order", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html`
+          <calcite-modal id="modal-1"></calcite-modal>
+          <calcite-modal id="modal-2"></calcite-modal>
+        `);
+        const modal1 = await page.find("#modal-1");
+        const modal2 = await page.find("#modal-2");
+
+        await modal1.setProperty("open", true);
+        await page.waitForChanges();
+        await modal2.setProperty("open", true);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(true);
+
+        await modal1.setProperty("open", false);
+        await page.waitForChanges();
+        await modal2.setProperty("open", false);
+        await page.waitForChanges();
+
+        expect(await hasOverflowStyle(page)).toEqual(false);
+      });
     });
-  });
 
-  it("renders correctly with no footer", async () => {
-    const page = await newE2EPage();
-    await page.setContent(`
+    it("renders correctly with no footer", async () => {
+      const page = await newE2EPage();
+      await page.setContent(`
       <calcite-modal>
         <calcite-button slot="primary">TEST</calcite-button>
       </calcite-modal>
     `);
-    let footer = await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector(".footer"));
-    expect(footer).toBeDefined();
-    await page.$eval("calcite-button", (el) => el.parentElement.removeChild(el));
-    await page.waitForChanges();
-    footer = await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector(".footer"));
-    expect(footer).toBeFalsy();
-  });
+      let footer = await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector(".footer"));
+      expect(footer).toBeDefined();
+      await page.$eval("calcite-button", (el) => el.parentElement.removeChild(el));
+      await page.waitForChanges();
+      footer = await page.$eval("calcite-modal", (el) => el.shadowRoot.querySelector(".footer"));
+      expect(footer).toBeFalsy();
+    });
 
-  it("should render calcite-scrim with default background color", async () => {
-    const page = await newE2EPage({
-      html: `
+    it("should render calcite-scrim with default background color", async () => {
+      const page = await newE2EPage({
+        html: `
       <calcite-modal aria-labelledby="modal-title" open>
         <h3 slot="header" id="modal-title">Title of the modal</h3>
         <div slot="content">The actual content of the modal</div>
@@ -777,18 +572,18 @@ describe("calcite-modal", () => {
         <calcite-button slot="primary" width="full"> Save </calcite-button>
       </calcite-modal>
       `,
+      });
+      const scrimStyles = await page.evaluate(() => {
+        const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
+        return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+      });
+      expect(scrimStyles.trim()).toEqual("rgba(0, 0, 0, 0.85)");
     });
-    const scrimStyles = await page.evaluate(() => {
-      const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
-      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
-    });
-    expect(scrimStyles.trim()).toEqual("rgba(0, 0, 0, 0.85)");
-  });
 
-  it("when modal css override set, scrim should adhere to requested color", async () => {
-    const overrideStyle = "rgba(160, 20, 10, 0.5)";
-    const page = await newE2EPage({
-      html: `
+    it("when modal css override set, scrim should adhere to requested color", async () => {
+      const overrideStyle = "rgba(160, 20, 10, 0.5)";
+      const page = await newE2EPage({
+        html: `
       <calcite-modal aria-labelledby="modal-title" open style="--calcite-modal-scrim-background:${overrideStyle}">
         <h3 slot="header" id="modal-title">Title of the modal</h3>
         <div slot="content">The actual content of the modal</div>
@@ -799,31 +594,32 @@ describe("calcite-modal", () => {
         <calcite-button slot="primary" width="full"> Save </calcite-button>
       </calcite-modal>
       `,
+      });
+      const scrimStyles = await page.evaluate(() => {
+        const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
+        return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+      });
+      expect(scrimStyles).toEqual(overrideStyle);
     });
-    const scrimStyles = await page.evaluate(() => {
-      const scrim = document.querySelector("calcite-modal").shadowRoot.querySelector(".scrim");
-      return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
-    });
-    expect(scrimStyles).toEqual(overrideStyle);
-  });
 
-  it("correctly reflects the scale of the modal on the close button icon", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html` <calcite-modal open></calcite-modal> `);
-    const modal = await page.find("calcite-modal");
-    modal.setProperty("scale", "s");
-    await page.waitForChanges();
-    let closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="s"]');
-    expect(closeIcon).not.toBe(null);
+    it("correctly reflects the scale of the modal on the close button icon", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html` <calcite-modal open></calcite-modal> `);
+      const modal = await page.find("calcite-modal");
+      modal.setProperty("scale", "s");
+      await page.waitForChanges();
+      let closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="s"]');
+      expect(closeIcon).not.toBe(null);
 
-    modal.setProperty("scale", "m");
-    await page.waitForChanges();
-    closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="s"]');
-    expect(closeIcon).not.toBe(null);
+      modal.setProperty("scale", "m");
+      await page.waitForChanges();
+      closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="s"]');
+      expect(closeIcon).not.toBe(null);
 
-    modal.setProperty("scale", "l");
-    await page.waitForChanges();
-    closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="m"]');
-    expect(closeIcon).not.toBe(null);
+      modal.setProperty("scale", "l");
+      await page.waitForChanges();
+      closeIcon = await page.find('calcite-modal >>> calcite-icon[scale="m"]');
+      expect(closeIcon).not.toBe(null);
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/modal/modal.tsx b/packages/calcite-components/src/components/modal/modal.tsx
index e5b0877592c..a9e33703cf9 100644
--- a/packages/calcite-components/src/components/modal/modal.tsx
+++ b/packages/calcite-components/src/components/modal/modal.tsx
@@ -357,7 +357,7 @@ export class Modal
   initialOverflowCSS: string;
 
   private mutationObserver: MutationObserver = createObserver("mutation", () =>
-    this.handleMutationObserver()
+    this.handleMutationObserver(),
   );
 
   private cssVarObserver: MutationObserver = createObserver("mutation", () => {
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index acb98b1732f..94538fd30ae 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -292,8 +292,8 @@ export class Panel
   };
 
   handleActionBarSlotChange = (event: Event): void => {
-    const actionBars = slotChangeGetAssignedElements(event).filter((el) =>
-      el?.matches("calcite-action-bar")
+    const actionBars = slotChangeGetAssignedElements(event).filter(
+      (el) => el?.matches("calcite-action-bar"),
     ) as HTMLCalciteActionBarElement[];
 
     actionBars.forEach((actionBar) => (actionBar.layout = "horizontal"));
diff --git a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
index 96ca51124d3..ccca301d21c 100644
--- a/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
+++ b/packages/calcite-components/src/components/pick-list/shared-list-render.tsx
@@ -18,7 +18,7 @@ interface ListProps extends DOMAttributes<any> {
   el: HTMLCalcitePickListElement | HTMLCalciteValueListElement;
   setFilterEl: (el: HTMLCalciteFilterElement) => void;
   setFilteredItems: (
-    filteredItems: HTMLCalcitePickListItemElement | HTMLCalciteValueListItemElement[]
+    filteredItems: HTMLCalcitePickListItemElement | HTMLCalciteValueListItemElement[],
   ) => void;
   dragEnabled?: boolean;
   storeAssistiveEl?: (el: HTMLSpanElement) => void;
diff --git a/packages/calcite-components/src/components/popover/popover.tsx b/packages/calcite-components/src/components/popover/popover.tsx
index e3cc9098cd5..e68339a5a01 100644
--- a/packages/calcite-components/src/components/popover/popover.tsx
+++ b/packages/calcite-components/src/components/popover/popover.tsx
@@ -253,7 +253,7 @@ export class Popover
   @Element() el: HTMLCalcitePopoverElement;
 
   mutationObserver: MutationObserver = createObserver("mutation", () =>
-    this.updateFocusTrapElements()
+    this.updateFocusTrapElements(),
   );
 
   filteredFlipPlacements: EffectivePlacement[];
@@ -381,7 +381,7 @@ export class Popover
         arrowEl,
         type: "popover",
       },
-      delayed
+      delayed,
     );
   }
 
diff --git a/packages/calcite-components/src/components/radio-button/radio-button.tsx b/packages/calcite-components/src/components/radio-button/radio-button.tsx
index 93d27b1b0b7..b032fc2a11a 100644
--- a/packages/calcite-components/src/components/radio-button/radio-button.tsx
+++ b/packages/calcite-components/src/components/radio-button/radio-button.tsx
@@ -186,7 +186,7 @@ export class RadioButton
 
   queryButtons = (): HTMLCalciteRadioButtonElement[] => {
     return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden])")).filter(
-      (radioButton: HTMLCalciteRadioButtonElement) => radioButton.name === this.name
+      (radioButton: HTMLCalciteRadioButtonElement) => radioButton.name === this.name,
     ) as HTMLCalciteRadioButtonElement[];
   };
 
@@ -231,10 +231,10 @@ export class RadioButton
 
     const radioButton = label.for
       ? this.rootNode.querySelector<HTMLCalciteRadioButtonElement>(
-          `calcite-radio-button[id="${label.for}"]`
+          `calcite-radio-button[id="${label.for}"]`,
         )
       : label.querySelector<HTMLCalciteRadioButtonElement>(
-          `calcite-radio-button[name="${this.name}"]`
+          `calcite-radio-button[name="${this.name}"]`,
         );
 
     if (!radioButton) {
@@ -302,7 +302,7 @@ export class RadioButton
   private updateTabIndexOfOtherRadioButtonsInGroup(): void {
     const radioButtons = this.queryButtons();
     const otherFocusableRadioButtons = radioButtons.filter(
-      (radioButton) => radioButton.guid !== this.guid && !radioButton.disabled
+      (radioButton) => radioButton.guid !== this.guid && !radioButton.disabled,
     );
     otherFocusableRadioButtons.forEach((radioButton) => {
       forceUpdate(radioButton);
@@ -403,9 +403,9 @@ export class RadioButton
     }
 
     const radioButtons = Array.from(
-      this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")
+      this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]"),
     ).filter(
-      (radioButton: HTMLCalciteRadioButtonElement) => radioButton.name === this.name
+      (radioButton: HTMLCalciteRadioButtonElement) => radioButton.name === this.name,
     ) as HTMLCalciteRadioButtonElement[];
     let currentIndex = 0;
 
@@ -424,7 +424,7 @@ export class RadioButton
         event.preventDefault();
         this.selectItem(
           radioButtons,
-          getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength)
+          getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength),
         );
         return;
       case "ArrowRight":
diff --git a/packages/calcite-components/src/components/rating/rating.tsx b/packages/calcite-components/src/components/rating/rating.tsx
index 24d1152d504..5f83d21ae67 100644
--- a/packages/calcite-components/src/components/rating/rating.tsx
+++ b/packages/calcite-components/src/components/rating/rating.tsx
@@ -286,7 +286,7 @@ export class Rating
                       </span>
                     </label>
                   );
-                }
+                },
               )}
 
               {(this.count || this.average) && this.showChip ? (
diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
index 393641bf613..472c218fced 100644
--- a/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
+++ b/packages/calcite-components/src/components/segmented-control/segmented-control.tsx
@@ -116,7 +116,7 @@ export class SegmentedControl
   @Watch("selectedItem")
   protected handleSelectedItemChange<T extends HTMLCalciteSegmentedControlItemElement>(
     newItem: T,
-    oldItem: T
+    oldItem: T,
   ): void {
     this.value = newItem?.value;
     if (newItem === oldItem) {
diff --git a/packages/calcite-components/src/components/select/select.stories.ts b/packages/calcite-components/src/components/select/select.stories.ts
index bf678931d00..6e8276f222a 100644
--- a/packages/calcite-components/src/components/select/select.stories.ts
+++ b/packages/calcite-components/src/components/select/select.stories.ts
@@ -13,7 +13,7 @@ import optionGroupReadme from "../option-group/readme.md";
 import { iconNames, storyFilters } from "../../../.storybook/helpers";
 
 const createSelectAttributes: (options?: { exceptions: string[] }) => Attributes = (
-  { exceptions } = { exceptions: [] }
+  { exceptions } = { exceptions: [] },
 ) => {
   const group = "select";
 
@@ -68,7 +68,7 @@ const createSelectAttributes: (options?: { exceptions: string[] }) => Attributes
         },
       },
     ],
-    exceptions
+    exceptions,
   );
 };
 
@@ -130,7 +130,7 @@ export const simple = (): string =>
           value="some-fixed-value"
         ></calcite-option>
         <calcite-option label="another fixed option" value="another-fixed-value"></calcite-option>
-      `
+      `,
     )}
   </div>`;
 
@@ -146,13 +146,13 @@ export const grouped = (): string =>
           ${create("calcite-option", createOptionAttributes())}
           <calcite-option label="some fixed option (A)" value="some-fixed-value-a"></calcite-option>
           <calcite-option label="another fixed option (A)" value="another-fixed-value-a"></calcite-option>
-        `
+        `,
       )}
       <calcite-option-group label="group B (fixed)">
         <calcite-option label="some fixed option (B)" value="some-fixed-value-b"></calcite-option>
         <calcite-option label="another fixed option (B)" value="another-fixed-value-b"></calcite-option>
       </calcite-option-group>
-    `
+    `,
   );
 
 export const darkModeRTL_TestOnly = (): string =>
@@ -177,13 +177,13 @@ export const darkModeRTL_TestOnly = (): string =>
           ${create("calcite-option", createOptionAttributes())}
           <calcite-option label="some fixed option (A)" value="some-fixed-value-a"></calcite-option>
           <calcite-option label="another fixed option (A)" value="another-fixed-value-a"></calcite-option>
-        `
+        `,
       )}
       <calcite-option-group label="group B (fixed)">
         <calcite-option label="some fixed option (B)" value="some-fixed-value-b"></calcite-option>
         <calcite-option label="another fixed option (B)" value="another-fixed-value-b"></calcite-option>
       </calcite-option-group>
-    `
+    `,
   );
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
diff --git a/packages/calcite-components/src/components/select/select.tsx b/packages/calcite-components/src/components/select/select.tsx
index 4c85e3181d7..8d716faae50 100644
--- a/packages/calcite-components/src/components/select/select.tsx
+++ b/packages/calcite-components/src/components/select/select.tsx
@@ -47,7 +47,7 @@ function isOption(optionOrGroup: OptionOrGroup): optionOrGroup is HTMLCalciteOpt
 }
 
 function isOptionGroup(
-  optionOrGroup: OptionOrGroup
+  optionOrGroup: OptionOrGroup,
 ): optionOrGroup is HTMLCalciteOptionGroupElement {
   return optionOrGroup.tagName === "CALCITE-OPTION-GROUP";
 }
@@ -263,7 +263,7 @@ export class Select
 
   private updateNativeElement(
     optionOrGroup: OptionOrGroup,
-    nativeOptionOrGroup: NativeOptionOrGroup
+    nativeOptionOrGroup: NativeOptionOrGroup,
   ): void {
     nativeOptionOrGroup.disabled = optionOrGroup.disabled;
     nativeOptionOrGroup.label = optionOrGroup.label;
@@ -281,15 +281,15 @@ export class Select
 
   private populateInternalSelect = (): void => {
     const optionsAndGroups = Array.from(
-      this.el.children as HTMLCollectionOf<OptionOrGroup | HTMLSlotElement>
+      this.el.children as HTMLCollectionOf<OptionOrGroup | HTMLSlotElement>,
     ).filter(
-      (child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP"
+      (child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP",
     ) as OptionOrGroup[];
 
     this.clearInternalSelect();
 
-    optionsAndGroups.forEach((optionOrGroup) =>
-      this.selectEl?.append(this.toNativeElement(optionOrGroup))
+    optionsAndGroups.forEach(
+      (optionOrGroup) => this.selectEl?.append(this.toNativeElement(optionOrGroup)),
     );
   };
 
@@ -327,7 +327,7 @@ export class Select
   }
 
   private toNativeElement(
-    optionOrGroup: HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement
+    optionOrGroup: HTMLCalciteOptionElement | HTMLCalciteOptionGroupElement,
   ): NativeOptionOrGroup {
     if (isOption(optionOrGroup)) {
       const option = document.createElement("option");
@@ -346,7 +346,7 @@ export class Select
           const nativeOption = this.toNativeElement(option);
           group.append(nativeOption);
           this.componentToNativeEl.set(optionOrGroup, nativeOption);
-        }
+        },
       );
 
       this.componentToNativeEl.set(optionOrGroup, group);
diff --git a/packages/calcite-components/src/components/slider/slider.tsx b/packages/calcite-components/src/components/slider/slider.tsx
index 83b95ea5aa3..fcfa37c632c 100644
--- a/packages/calcite-components/src/components/slider/slider.tsx
+++ b/packages/calcite-components/src/components/slider/slider.tsx
@@ -1173,7 +1173,7 @@ export class Slider
   private setValue(
     values: Partial<{
       [Property in keyof Pick<Slider, "maxValue" | "minValue" | "value">]: number;
-    }>
+    }>,
   ): void {
     let valueChanged: boolean;
 
@@ -1293,10 +1293,10 @@ export class Slider
   private adjustHostObscuredHandleLabel(name: "value" | "minValue"): void {
     const label: HTMLSpanElement = this.el.shadowRoot.querySelector(`.handle__label--${name}`);
     const labelStatic: HTMLSpanElement = this.el.shadowRoot.querySelector(
-      `.handle__label--${name}.static`
+      `.handle__label--${name}.static`,
     );
     const labelTransformed: HTMLSpanElement = this.el.shadowRoot.querySelector(
-      `.handle__label--${name}.transformed`
+      `.handle__label--${name}.transformed`,
     );
     const labelStaticBounds = labelStatic.getBoundingClientRect();
     const labelStaticOffset = this.getHostOffset(labelStaticBounds.left, labelStaticBounds.right);
@@ -1312,37 +1312,37 @@ export class Slider
     const rightModifier = mirror ? "minValue" : "value";
 
     const leftValueLabel: HTMLSpanElement = shadowRoot.querySelector(
-      `.handle__label--${leftModifier}`
+      `.handle__label--${leftModifier}`,
     );
     const leftValueLabelStatic: HTMLSpanElement = shadowRoot.querySelector(
-      `.handle__label--${leftModifier}.static`
+      `.handle__label--${leftModifier}.static`,
     );
     const leftValueLabelTransformed: HTMLSpanElement = shadowRoot.querySelector(
-      `.handle__label--${leftModifier}.transformed`
+      `.handle__label--${leftModifier}.transformed`,
     );
     const leftValueLabelStaticHostOffset = this.getHostOffset(
       leftValueLabelStatic.getBoundingClientRect().left,
-      leftValueLabelStatic.getBoundingClientRect().right
+      leftValueLabelStatic.getBoundingClientRect().right,
     );
 
     const rightValueLabel: HTMLSpanElement = shadowRoot.querySelector(
-      `.handle__label--${rightModifier}`
+      `.handle__label--${rightModifier}`,
     );
     const rightValueLabelStatic: HTMLSpanElement = shadowRoot.querySelector(
-      `.handle__label--${rightModifier}.static`
+      `.handle__label--${rightModifier}.static`,
     );
     const rightValueLabelTransformed: HTMLSpanElement = shadowRoot.querySelector(
-      `.handle__label--${rightModifier}.transformed`
+      `.handle__label--${rightModifier}.transformed`,
     );
     const rightValueLabelStaticHostOffset = this.getHostOffset(
       rightValueLabelStatic.getBoundingClientRect().left,
-      rightValueLabelStatic.getBoundingClientRect().right
+      rightValueLabelStatic.getBoundingClientRect().right,
     );
 
     const labelFontSize = this.getFontSizeForElement(leftValueLabel);
     const labelTransformedOverlap = this.getRangeLabelOverlap(
       leftValueLabelTransformed,
-      rightValueLabelTransformed
+      rightValueLabelTransformed,
     );
 
     const hyphenLabel = leftValueLabel;
@@ -1364,13 +1364,13 @@ export class Slider
             labelOffset,
           leftValueLabelTransformed.getBoundingClientRect().right +
             leftValueLabelTranslate -
-            labelOffset
+            labelOffset,
         );
 
         let rightValueLabelTranslate = labelTransformedOverlap / 2;
         const rightValueLabelTransformedHostOffset = this.getHostOffset(
           rightValueLabelTransformed.getBoundingClientRect().left + rightValueLabelTranslate,
-          rightValueLabelTransformed.getBoundingClientRect().right + rightValueLabelTranslate
+          rightValueLabelTransformed.getBoundingClientRect().right + rightValueLabelTranslate,
         );
 
         if (leftValueLabelTransformedHostOffset !== 0) {
diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
index 319313e1d42..40cff42b2b2 100644
--- a/packages/calcite-components/src/components/split-button/split-button.tsx
+++ b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -242,9 +242,9 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
     return this.dropdownIconType === "chevron"
       ? "chevronDown"
       : this.dropdownIconType === "caret"
-      ? "caretDown"
-      : this.dropdownIconType === "ellipsis"
-      ? "ellipsis"
-      : "handle-vertical";
+        ? "caretDown"
+        : this.dropdownIconType === "ellipsis"
+          ? "ellipsis"
+          : "handle-vertical";
   }
 }
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 04276937b43..0e122cc6dd0 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -431,7 +431,7 @@ export class StepperItem
 
   private getItemPosition(): number {
     return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item")).indexOf(
-      this.el
+      this.el,
     );
   }
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index cc6539013ad..c2b3073e8d3 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -68,7 +68,7 @@ describe("calcite-stepper", () => {
           <div>Step 4 content</div>
         </calcite-stepper-item>
       </calcite-stepper>`,
-      { display: "flex" }
+      { display: "flex" },
     );
   });
 
@@ -78,14 +78,16 @@ describe("calcite-stepper", () => {
 
   it("root container display is set to grid in horizontal layout", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper>
-      <calcite-stepper-item heading="Step 1" id="step-1">
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
+    await page.setContent(
+      html`<calcite-stepper>
+        <calcite-stepper-item heading="Step 1" id="step-1">
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>`,
+    );
 
     const containerEl = await page.find("calcite-stepper >>> .container");
     expect((await containerEl.getComputedStyle()).display).toBe("grid");
@@ -126,20 +128,22 @@ describe("calcite-stepper", () => {
 
   it("adds selected attribute to requested item", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper layout="vertical" scale="l" numbered icon>
-      <calcite-stepper-item heading="Step 1" id="step-1">
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 3" id="step-3" selected>
-        <div>Step 3 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 4" id="step-4">
-        <div>Step 4 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
+    await page.setContent(
+      html`<calcite-stepper layout="vertical" scale="l" numbered icon>
+        <calcite-stepper-item heading="Step 1" id="step-1">
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 3" id="step-3" selected>
+          <div>Step 3 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 4" id="step-4">
+          <div>Step 4 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>`,
+    );
     const step1 = await page.find("#step-1");
     const step2 = await page.find("#step-2");
     const step3 = await page.find("#step-3");
@@ -155,20 +159,22 @@ describe("calcite-stepper", () => {
 
   it("adds selected attribute to first item if none are requested", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper layout="vertical" scale="l" numbered icon>
-      <calcite-stepper-item heading="Step 1" id="step-1">
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 3" id="step-3">
-        <div>Step 3 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 4" id="step-4">
-        <div>Step 4 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
+    await page.setContent(
+      html`<calcite-stepper layout="vertical" scale="l" numbered icon>
+        <calcite-stepper-item heading="Step 1" id="step-1">
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 3" id="step-3">
+          <div>Step 3 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 4" id="step-4">
+          <div>Step 4 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>`,
+    );
     const step1 = await page.find("#step-1");
     const step2 = await page.find("#step-2");
     const step3 = await page.find("#step-3");
@@ -185,20 +191,22 @@ describe("calcite-stepper", () => {
   describe("navigation", () => {
     it("navigates correctly with nextStep and prevStep methods", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper>
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2" selected>
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-3">
-          <div>Step 3 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 4" id="step-4">
-          <div>Step 4 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2" selected>
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div>Step 3 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4">
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
@@ -240,17 +248,19 @@ describe("calcite-stepper", () => {
 
     it("navigates disabled items correctly with nextStep and prevStep methods", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper>
-        <calcite-stepper-item heading="Step 1" id="step-1" selected>
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2" disabled>
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-3">
-          <div>Step 3 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1" selected>
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2" disabled>
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div>Step 3 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
@@ -284,20 +294,22 @@ describe("calcite-stepper", () => {
 
     it("navigates correctly with startStep and endStep methods", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper>
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-3">
-          <div>Step 3 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 4" id="step-4">
-          <div>Step 4 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div>Step 3 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4">
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
@@ -331,20 +343,22 @@ describe("calcite-stepper", () => {
 
     it("navigates disabled items correctly with startStep and endStep methods", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper>
-        <calcite-stepper-item heading="Step 1" id="step-1" disabled>
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-3">
-          <div id="step-3 >>> .stepper-item-content">Step 3 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 4" id="step-4" disabled>
-          <div>Step 4 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1" disabled>
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div id="step-3 >>> .stepper-item-content">Step 3 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4" disabled>
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
@@ -378,20 +392,22 @@ describe("calcite-stepper", () => {
 
     it("navigates to requested step with goToStep method", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper>
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-3">
-          <div>Step 3 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 4" id="step-4">
-          <div>Step 4 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper>
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-3">
+            <div>Step 3 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 4" id="step-4">
+            <div>Step 4 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
       const element = await page.find("calcite-stepper");
       const step1 = await page.find("#step-1");
       const step2 = await page.find("#step-2");
@@ -463,7 +479,7 @@ describe("calcite-stepper", () => {
               this.shadowRoot.getElementById("next").addEventListener("click", () => stepper.nextStep());
               this.shadowRoot.getElementById("prev").addEventListener("click", () => stepper.prevStep());
             }
-          }
+          },
         );
 
         document.body.innerHTML = `<${wrapperName}></${wrapperName}>`;
@@ -512,7 +528,7 @@ describe("calcite-stepper", () => {
 
       if (hasContent) {
         await page.$eval("#step-1", (item: HTMLCalciteStepperItemElement) =>
-          item.shadowRoot.querySelector<HTMLElement>(".stepper-item-content").click()
+          item.shadowRoot.querySelector<HTMLElement>(".stepper-item-content").click(),
         );
 
         if (layout === "vertical") {
@@ -562,7 +578,7 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 4" id="step-4">
               <div>Step 4 content</div>
             </calcite-stepper-item>
-          </calcite-stepper>`
+          </calcite-stepper>`,
         );
 
         await assertEmitting(page, true);
@@ -576,7 +592,7 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
             <calcite-stepper-item heading="Step 3" id="step-3" disabled></calcite-stepper-item>
             <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
-          </calcite-stepper>`
+          </calcite-stepper>`,
         );
 
         await assertEmitting(page, false);
@@ -604,7 +620,7 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 4" id="step-4">
               <div>Step 4 content</div>
             </calcite-stepper-item>
-          </calcite-stepper>`
+          </calcite-stepper>`,
         );
 
         await assertEmitting(page, true);
@@ -618,7 +634,7 @@ describe("calcite-stepper", () => {
             <calcite-stepper-item heading="Step 2" id="step-2"></calcite-stepper-item>
             <calcite-stepper-item heading="Step 3" id="step-3" disabled></calcite-stepper-item>
             <calcite-stepper-item heading="Step 4" id="step-4"></calcite-stepper-item>
-          </calcite-stepper>`
+          </calcite-stepper>`,
         );
 
         await assertEmitting(page, false);
@@ -665,14 +681,16 @@ describe("calcite-stepper", () => {
 
   it("should have correct ARIA attributes", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper>
-      <calcite-stepper-item heading="Step 1" id="step-1">
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
+    await page.setContent(
+      html`<calcite-stepper>
+        <calcite-stepper-item heading="Step 1" id="step-1">
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>`,
+    );
 
     const stepper = await page.find("calcite-stepper");
     const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
@@ -709,14 +727,16 @@ describe("calcite-stepper", () => {
 
   it("should select the next enabled stepper-item if first stepper-item is disabled", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper>
-      <calcite-stepper-item heading="Step 1" id="step-1" disabled>
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
+    await page.setContent(
+      html`<calcite-stepper>
+        <calcite-stepper-item heading="Step 1" id="step-1" disabled>
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>`,
+    );
 
     const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
     expect(await stepperItem1.getProperty("selected")).toBe(false);
@@ -726,14 +746,16 @@ describe("calcite-stepper", () => {
   describe("responsive layout", () => {
     it("should display action buttons when width is smaller", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper style="width: 100px">
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper style="width: 100px">
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
 
       const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
       const [stepperItem1, stepperItem2] = await page.findAll("calcite-stepper-item");
@@ -752,17 +774,19 @@ describe("calcite-stepper", () => {
 
     it("focus order", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper style="width: 100px">
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <calcite-button id="button1">Click</calcite-button>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2">
-          <calcite-button id="button2">Click</calcite-button>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-2">
-          <calcite-button id="button3">Click</calcite-button>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper style="width: 100px">
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <calcite-button id="button1">Click</calcite-button>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2">
+            <calcite-button id="button2">Click</calcite-button>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-2">
+            <calcite-button id="button3">Click</calcite-button>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
 
       const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
 
@@ -797,17 +821,19 @@ describe("calcite-stepper", () => {
 
     it("should emit calciteStepperItemChange on user interaction", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<calcite-stepper style="width: 100px">
-        <calcite-stepper-item heading="Step 1" id="step-1">
-          <div>Step 1 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 2" id="step-2" disabled>
-          <div>Step 2 content</div>
-        </calcite-stepper-item>
-        <calcite-stepper-item heading="Step 3" id="step-2">
-          <div>Step 3 content</div>
-        </calcite-stepper-item>
-      </calcite-stepper>`);
+      await page.setContent(
+        html`<calcite-stepper style="width: 100px">
+          <calcite-stepper-item heading="Step 1" id="step-1">
+            <div>Step 1 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 2" id="step-2" disabled>
+            <div>Step 2 content</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Step 3" id="step-2">
+            <div>Step 3 content</div>
+          </calcite-stepper-item>
+        </calcite-stepper>`,
+      );
 
       const stepper = await page.find("calcite-stepper");
       const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index 625ca1dba4d..de487d192b5 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -382,7 +382,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   private resizeObserver = createObserver(
     "resize",
-    (entries) => (this.elWidth = entries[0].contentRect.width)
+    (entries) => (this.elWidth = entries[0].contentRect.width),
   );
 
   private updateItems(): void {
@@ -432,7 +432,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   private getEnabledStepIndex(
     startIndex: number,
-    direction: "next" | "previous" = "next"
+    direction: "next" | "previous" = "next",
   ): number | null {
     const { items, currentActivePosition } = this;
 
@@ -528,7 +528,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   handleDefaultSlotChange = (event: Event): void => {
     const items = slotChangeGetAssignedElements(event).filter(
-      (el) => el?.tagName === "CALCITE-STEPPER-ITEM"
+      (el) => el?.tagName === "CALCITE-STEPPER-ITEM",
     );
     this.items = items as HTMLCalciteStepperItemElement[];
     this.setGridTemplateColumns(items);
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 9fbb148b712..1639909a7a9 100644
--- a/packages/calcite-components/src/components/tab-title/tab-title.tsx
+++ b/packages/calcite-components/src/components/tab-title/tab-title.tsx
@@ -161,7 +161,7 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
     document.body?.dispatchEvent(
       new CustomEvent("calciteTabTitleUnregister", {
         detail: this.el,
-      })
+      }),
     );
     this.resizeObserver?.disconnect();
     disconnectInteractive(this);
@@ -415,9 +415,9 @@ export class TabTitle implements InteractiveComponent, LocalizedComponent, T9nCo
   async getTabIndex(): Promise<number> {
     return Array.prototype.indexOf.call(
       nodeListToArray(this.el.parentElement.children).filter((el) =>
-        el.matches("calcite-tab-title")
+        el.matches("calcite-tab-title"),
       ),
-      this.el
+      this.el,
     );
   }
 
diff --git a/packages/calcite-components/src/components/table-header/table-header.tsx b/packages/calcite-components/src/components/table-header/table-header.tsx
index 04789d7d037..8627c6614b9 100644
--- a/packages/calcite-components/src/components/table-header/table-header.tsx
+++ b/packages/calcite-components/src/components/table-header/table-header.tsx
@@ -195,10 +195,10 @@ export class TableHeader implements LocalizedComponent, LoadableComponent, T9nCo
     const scope = this.rowSpan
       ? "rowgroup"
       : this.colSpan
-      ? "colgroup"
-      : this.parentRowType === "body"
-      ? "row"
-      : "col";
+        ? "colgroup"
+        : this.parentRowType === "body"
+          ? "row"
+          : "col";
 
     const allSelected = this.selectedRowCount === this.bodyRowCount;
     const selectionIcon = allSelected ? "check-square-f" : "check-square";
diff --git a/packages/calcite-components/src/components/table-row/table-row.tsx b/packages/calcite-components/src/components/table-row/table-row.tsx
index f2498f94e16..25b57f9dfff 100644
--- a/packages/calcite-components/src/components/table-row/table-row.tsx
+++ b/packages/calcite-components/src/components/table-row/table-row.tsx
@@ -251,7 +251,7 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
     cellPosition: number,
     rowPosition: number,
     destination: FocusElementInGroupDestination,
-    lastCell?: boolean
+    lastCell?: boolean,
   ): void => {
     this.calciteInternalTableRowFocusRequest.emit({
       cellPosition,
@@ -266,14 +266,14 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
       ?.assignedElements({ flatten: true })
       ?.filter(
         (el: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement) =>
-          el.matches("calcite-table-cell") || el.matches("calcite-table-header")
+          el.matches("calcite-table-cell") || el.matches("calcite-table-header"),
       );
 
     const renderedCells = Array.from(
-      this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell")
+      this.tableRowEl?.querySelectorAll("calcite-table-header, calcite-table-cell"),
     )?.filter(
       (el: HTMLCalciteTableCellElement | HTMLCalciteTableHeaderElement) =>
-        el.numberCell || el.selectionCell
+        el.numberCell || el.selectionCell,
     );
 
     const cells = renderedCells ? renderedCells.concat(slottedCells) : slottedCells;
@@ -321,10 +321,10 @@ export class TableRow implements InteractiveComponent, LocalizedComponent {
       this.selectionMode === "multiple" && this.selected
         ? "check-square-f"
         : this.selectionMode === "multiple"
-        ? "square"
-        : this.selected
-        ? "circle-f"
-        : "circle";
+          ? "square"
+          : this.selected
+            ? "circle-f"
+            : "circle";
 
     return <calcite-icon icon={icon} scale={getIconScale(this.scale)} />;
   }
diff --git a/packages/calcite-components/src/components/table/table.e2e.ts b/packages/calcite-components/src/components/table/table.e2e.ts
index bcf88a8e5b1..a505010d0a8 100644
--- a/packages/calcite-components/src/components/table/table.e2e.ts
+++ b/packages/calcite-components/src/components/table/table.e2e.ts
@@ -27,7 +27,7 @@ describe("calcite-table", () => {
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
       </calcite-table>`,
-      { display: "table" }
+      { display: "table" },
     );
   });
 
@@ -109,7 +109,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -132,7 +132,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -155,7 +155,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -178,7 +178,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -201,7 +201,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -224,7 +224,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -263,7 +263,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
 
@@ -302,7 +302,7 @@ describe("calcite-table", () => {
             <calcite-table-cell>cell</calcite-table-cell>
             <calcite-table-cell>cell</calcite-table-cell>
           </calcite-table-row>
-        </calcite-table>`
+        </calcite-table>`,
       );
     });
   });
@@ -329,7 +329,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -444,7 +444,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -559,7 +559,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -669,7 +669,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -778,7 +778,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -829,7 +829,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -880,7 +880,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -931,7 +931,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -985,7 +985,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -1039,7 +1039,7 @@ describe("selection modes", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -1101,7 +1101,7 @@ describe("pagination event", () => {
           <calcite-table-cell>cell</calcite-table-cell>
           <calcite-table-cell>cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await assertSelectedItems.setUpEvents(page);
@@ -1167,7 +1167,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="cell-3a">cell</calcite-table-cell>
           <calcite-table-cell id="cell-3b">cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await page.keyboard.press("Tab");
@@ -1246,7 +1246,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="cell-5a">cell</calcite-table-cell>
           <calcite-table-cell id="cell-5b">cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await page.keyboard.press("Tab");
@@ -1317,7 +1317,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="cell-5a">cell</calcite-table-cell>
           <calcite-table-cell id="cell-5b">cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await page.keyboard.press("Tab");
@@ -1481,7 +1481,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="cell-4a">cell</calcite-table-cell>
           <calcite-table-cell id="cell-4b">cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await page.keyboard.press("Tab");
@@ -1534,7 +1534,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="cell-4a">cell</calcite-table-cell>
           <calcite-table-cell id="cell-4b">cell</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     await page.keyboard.press("Tab");
@@ -1611,7 +1611,7 @@ describe("keyboard navigation", () => {
             <calcite-table-cell id="foot-2b" col-span="2">foot</calcite-table-cell>
           </calcite-table-row>
         </calcite-table>
-        >;`
+        >;`,
     );
 
     await page.keyboard.press("Tab");
@@ -1710,7 +1710,7 @@ describe("keyboard navigation", () => {
             <calcite-table-cell id="foot-2b" col-span="2">foot</calcite-table-cell>
           </calcite-table-row>
         </calcite-table>
-        >;`
+        >;`,
     );
 
     await page.keyboard.press("Tab");
@@ -1887,7 +1887,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="foot-1a">foot</calcite-table-cell>
           <calcite-table-cell id="foot-1b">foot</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     const rowHead = await page.find("#row-head");
@@ -1898,7 +1898,10 @@ describe("keyboard navigation", () => {
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell });
 
     await page.keyboard.press("ArrowRight");
@@ -1912,19 +1915,25 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell });
 
     await page.keyboard.press("PageDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell });
 
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowRight");
@@ -1940,7 +1949,10 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell });
   });
 
@@ -1968,7 +1980,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="foot-1a">foot</calcite-table-cell>
           <calcite-table-cell id="foot-1b">foot</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     const rowHead = await page.find("#row-head");
@@ -1979,7 +1991,10 @@ describe("keyboard navigation", () => {
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
@@ -1993,19 +2008,25 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("PageDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell });
 
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
@@ -2021,7 +2042,10 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
   });
 
@@ -2049,7 +2073,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="foot-1a">foot</calcite-table-cell>
           <calcite-table-cell id="foot-1b">foot</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     const rowHead = await page.find("#row-head");
@@ -2060,14 +2084,20 @@ describe("keyboard navigation", () => {
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowRight");
@@ -2077,25 +2107,31 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("ArrowLeft");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("PageDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell });
 
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowLeft");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
@@ -2108,7 +2144,10 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
   });
 
@@ -2140,7 +2179,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="foot-1a">foot</calcite-table-cell>
           <calcite-table-cell id="foot-1b">foot</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     const rowHead = await page.find("#row-head");
@@ -2151,14 +2190,20 @@ describe("keyboard navigation", () => {
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell });
 
     await page.keyboard.press("ArrowRight");
@@ -2168,19 +2213,25 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("ArrowLeft");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell, "1": CSS.multipleSelectionCell });
 
     await page.keyboard.press("PageDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell });
 
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowRight");
@@ -2195,14 +2246,20 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell });
 
     page.keyboard.press("ControlLeft");
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
   });
 
@@ -2234,7 +2291,7 @@ describe("keyboard navigation", () => {
           <calcite-table-cell id="foot-1a">foot</calcite-table-cell>
           <calcite-table-cell id="foot-1b">foot</calcite-table-cell>
         </calcite-table-row>
-      </calcite-table>`
+      </calcite-table>`,
     );
 
     const rowHead = await page.find("#row-head");
@@ -2248,14 +2305,20 @@ describe("keyboard navigation", () => {
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
     await page.waitForChanges();
 
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowRight");
@@ -2265,37 +2328,43 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("ArrowLeft");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowLeft");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row1.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("PageDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell });
 
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row2.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     page.keyboard.press("ControlRight");
@@ -2306,7 +2375,10 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell });
 
     page.keyboard.press("ControlRight");
@@ -2314,7 +2386,10 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.$eval("calcite-table", () => {
@@ -2336,37 +2411,43 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowHead.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList)
+      await page.$eval(
+        `#${rowHead.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("th").classList,
+      ),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.numberCell });
 
     await page.keyboard.press("ArrowRight");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row3.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("PageDown");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.selectionCell });
 
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.selectionCell });
 
     await page.keyboard.press("ArrowLeft");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(`#${row4.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList),
     ).toEqual({ "0": CSS.numberCell });
 
     page.keyboard.press("ControlRight");
@@ -2377,7 +2458,10 @@ describe("keyboard navigation", () => {
     await page.keyboard.press("Home");
     await page.waitForChanges();
     expect(
-      await page.$eval(`#${rowFoot.id}`, (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList)
+      await page.$eval(
+        `#${rowFoot.id}`,
+        (el) => el.shadowRoot?.activeElement.shadowRoot?.querySelector("td").classList,
+      ),
     ).toEqual({ "0": CELL_CSS.footerCell, "1": CSS.numberCell });
   });
 });
diff --git a/packages/calcite-components/src/components/table/table.stories.ts b/packages/calcite-components/src/components/table/table.stories.ts
index 44194428918..931cc6d547b 100644
--- a/packages/calcite-components/src/components/table/table.stories.ts
+++ b/packages/calcite-components/src/components/table/table.stories.ts
@@ -50,623 +50,608 @@ export const simple = (): string =>
     </calcite-table-row>
   </calcite-table>`;
 
-export const simpleStriped_TestOnly = (): string => html`<calcite-table striped caption="Simple-striped table">
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const simpleStriped_TestOnly = (): string =>
+  html`<calcite-table striped caption="Simple-striped table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const bordered_TestOnly = (): string => html`<calcite-table bordered caption="Bordered table">
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const bordered_TestOnly = (): string =>
+  html`<calcite-table bordered caption="Bordered table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const borderedStriped_TestOnly = (): string => html`<calcite-table
-  bordered
-  striped
-  caption="Bordered striped table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const borderedStriped_TestOnly = (): string =>
+  html`<calcite-table bordered striped caption="Bordered striped table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const deprecatedZebraStriped_TestOnly = (): string => html`<calcite-table
-  bordered
-  zebra
-  caption="Bordered striped table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const deprecatedZebraStriped_TestOnly = (): string =>
+  html`<calcite-table bordered zebra caption="Bordered striped table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const alignments_TestOnly = (): string => html`<calcite-table numbered>
-  <calcite-table-row slot="table-header" caption="Various alignments table">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" alignment="end" description="End"></calcite-table-header>
-    <calcite-table-header heading="Heading" alignment="center" description="Center"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Mixed"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell alignment="end">cell</calcite-table-cell>
-    <calcite-table-cell alignment="center">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell alignment="end">cell</calcite-table-cell>
-    <calcite-table-cell alignment="center">cell</calcite-table-cell>
-    <calcite-table-cell alignment="center">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell alignment="end">cell</calcite-table-cell>
-    <calcite-table-cell alignment="center">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end">cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const alignments_TestOnly = (): string =>
+  html`<calcite-table numbered>
+    <calcite-table-row slot="table-header" caption="Various alignments table">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" alignment="end" description="End"></calcite-table-header>
+      <calcite-table-header heading="Heading" alignment="center" description="Center"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Mixed"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell alignment="end">cell</calcite-table-cell>
+      <calcite-table-cell alignment="center">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell alignment="end">cell</calcite-table-cell>
+      <calcite-table-cell alignment="center">cell</calcite-table-cell>
+      <calcite-table-cell alignment="center">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell alignment="end">cell</calcite-table-cell>
+      <calcite-table-cell alignment="center">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end">cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const disabledRows_TestOnly = (): string => html`<calcite-table caption="Bordered-striped table">
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row disabled>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row disabled>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const disabledRows_TestOnly = (): string =>
+  html`<calcite-table caption="Bordered-striped table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row disabled>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row disabled>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const numbered_TestOnly = (): string => html` <calcite-table numbered caption="Numbered table">
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const numbered_TestOnly = (): string =>
+  html` <calcite-table numbered caption="Numbered table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const richCellContent_TestOnly = (): string => html` <calcite-table
-  numbered
-  caption="With rich cell content table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell><calcite-icon icon="layer"></calcite-icon></calcite-table-cell>
-    <calcite-table-cell><calcite-chip scale="s">Chip</calcite-chip></calcite-table-cell>
-    <calcite-table-cell><calcite-input placeholder="input"></calcite-input></calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell><calcite-input placeholder="input"></calcite-input></calcite-table-cell>
-    <calcite-table-cell
-      ><calcite-chip scale="s">Chip</calcite-chip
-      ><calcite-button kind="neutral">button</calcite-button></calcite-table-cell
-    >
-    <calcite-table-cell><calcite-chip>chip</calcite-chip></calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell><calcite-chip>chip</calcite-chip></calcite-table-cell>
-    <calcite-table-cell><calcite-icon icon="layer"></calcite-icon></calcite-table-cell>
-    <calcite-table-cell
-      ><calcite-chip-group
-        ><calcite-chip>chip</calcite-chip><calcite-chip icon="smile">chip</calcite-chip></calcite-chip-group
-      ></calcite-table-cell
-    >
-  </calcite-table-row>
-</calcite-table>`;
+export const richCellContent_TestOnly = (): string =>
+  html` <calcite-table numbered caption="With rich cell content table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell><calcite-icon icon="layer"></calcite-icon></calcite-table-cell>
+      <calcite-table-cell><calcite-chip scale="s">Chip</calcite-chip></calcite-table-cell>
+      <calcite-table-cell><calcite-input placeholder="input"></calcite-input></calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell><calcite-input placeholder="input"></calcite-input></calcite-table-cell>
+      <calcite-table-cell
+        ><calcite-chip scale="s">Chip</calcite-chip
+        ><calcite-button kind="neutral">button</calcite-button></calcite-table-cell
+      >
+      <calcite-table-cell><calcite-chip>chip</calcite-chip></calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell><calcite-chip>chip</calcite-chip></calcite-table-cell>
+      <calcite-table-cell><calcite-icon icon="layer"></calcite-icon></calcite-table-cell>
+      <calcite-table-cell
+        ><calcite-chip-group
+          ><calcite-chip>chip</calcite-chip><calcite-chip icon="smile">chip</calcite-chip></calcite-chip-group
+        ></calcite-table-cell
+      >
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const layoutFixed_TestOnly = (): string => html`<calcite-table layout="fixed" caption="Layout fixed">
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const layoutFixed_TestOnly = (): string =>
+  html`<calcite-table layout="fixed" caption="Layout fixed">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const rowSpanAndColSpan_TestOnly = (): string => html`<calcite-table
-  bordered
-  striped
-  caption="Using row-span and col-span table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description" col-span="7"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell col-span="7">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell col-span="7">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="3">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="2">cell</calcite-table-cell>
-    <calcite-table-cell row-span="2">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const rowSpanAndColSpan_TestOnly = (): string =>
+  html`<calcite-table bordered striped caption="Using row-span and col-span table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description" col-span="7"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell col-span="7">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell col-span="7">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="3">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="2">cell</calcite-table-cell>
+      <calcite-table-cell row-span="2">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const rowSpanAndColSpanNumbered_TestOnly = (): string => html`<calcite-table
-  bordered
-  striped
-  numbered
-  caption="Using row-span and col-span table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description" col-span="7"></calcite-table-header>
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell col-span="7">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell col-span="7">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="3">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="2">cell</calcite-table-cell>
-    <calcite-table-cell row-span="2">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const rowSpanAndColSpanNumbered_TestOnly = (): string =>
+  html`<calcite-table bordered striped numbered caption="Using row-span and col-span table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description" col-span="7"></calcite-table-header>
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell col-span="7">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell col-span="7">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="3">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="2">cell</calcite-table-cell>
+      <calcite-table-cell row-span="2">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const rowSpanAndColSpan3_TestOnly = (): string => html`<calcite-table
-  bordered
-  striped
-  caption="Using row-span and col-span table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
-    <calcite-table-header col-span="3" heading="Heading" description="Description"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="4">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="2">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="4">cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const rowSpanAndColSpan3_TestOnly = (): string =>
+  html`<calcite-table bordered striped caption="Using row-span and col-span table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading" description="Description"></calcite-table-header>
+      <calcite-table-header col-span="3" heading="Heading" description="Description"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="4">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="2">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="4">cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const complexWithFooter_TestOnly = (): string => html`<calcite-table
-  caption="Multiple headers using col-span table"
-  bordered
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header col-span="2" heading="Name"></calcite-table-header>
-    <calcite-table-header col-span="2" heading="Information"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="First"></calcite-table-header>
-    <calcite-table-header heading="Last"></calcite-table-header>
-    <calcite-table-header heading="Education level"></calcite-table-header>
-    <calcite-table-header heading="Age"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="4">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="2">cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell col-span="2">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell row-span="4">cell</calcite-table-cell>
-    <calcite-table-cell col-span="3">cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row slot="table-footer">
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row slot="table-footer">
-    <calcite-table-cell col-span="2">foot</calcite-table-cell>
-    <calcite-table-cell col-span="2">foot</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const complexWithFooter_TestOnly = (): string =>
+  html`<calcite-table caption="Multiple headers using col-span table" bordered>
+    <calcite-table-row slot="table-header">
+      <calcite-table-header col-span="2" heading="Name"></calcite-table-header>
+      <calcite-table-header col-span="2" heading="Information"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="First"></calcite-table-header>
+      <calcite-table-header heading="Last"></calcite-table-header>
+      <calcite-table-header heading="Education level"></calcite-table-header>
+      <calcite-table-header heading="Age"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="4">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="2">cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell col-span="2">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell row-span="4">cell</calcite-table-cell>
+      <calcite-table-cell col-span="3">cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row slot="table-footer">
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row slot="table-footer">
+      <calcite-table-cell col-span="2">foot</calcite-table-cell>
+      <calcite-table-cell col-span="2">foot</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const headersInRows_TestOnly = (): string => html` <calcite-table caption="Headers in rows table">
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const headersInRows_TestOnly = (): string =>
+  html` <calcite-table caption="Headers in rows table">
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const headersInRowsAndHeadAndFooter_TestOnly = (): string => html` <calcite-table
-  caption="Headers in rows and table-head table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row slot="table-footer">
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const headersInRowsAndHeadAndFooter_TestOnly = (): string =>
+  html` <calcite-table caption="Headers in rows and table-head table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row slot="table-footer">
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const singleSelection_TestOnly = (): string => html` <calcite-table
-  selection-mode="single"
-  caption="selection-mode single table"
->
-  <calcite-action slot="selection-actions" icon="layer"></calcite-action>
-  <calcite-action slot="selection-actions" icon="send"></calcite-action>
-  <calcite-action slot="selection-actions" icon="copy"></calcite-action>
-  <calcite-action slot="selection-actions" icon="plus"></calcite-action>
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const singleSelection_TestOnly = (): string =>
+  html` <calcite-table selection-mode="single" caption="selection-mode single table">
+    <calcite-action slot="selection-actions" icon="layer"></calcite-action>
+    <calcite-action slot="selection-actions" icon="send"></calcite-action>
+    <calcite-action slot="selection-actions" icon="copy"></calcite-action>
+    <calcite-action slot="selection-actions" icon="plus"></calcite-action>
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string => html` <calcite-table
-  page-size="4"
-  selection-mode="multiple"
-  numbered
-  caption="selection-mode multiple with selected at load"
->
-  <calcite-action slot="selection-actions" icon="layer"></calcite-action>
-  <calcite-action slot="selection-actions" icon="send"></calcite-action>
-  <calcite-action slot="selection-actions" icon="copy"></calcite-action>
-  <calcite-action slot="selection-actions" icon="plus"></calcite-action>
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const selectionModeMultipleAndSelectedOnLoad_TestOnly = (): string =>
+  html` <calcite-table
+    page-size="4"
+    selection-mode="multiple"
+    numbered
+    caption="selection-mode multiple with selected at load"
+  >
+    <calcite-action slot="selection-actions" icon="layer"></calcite-action>
+    <calcite-action slot="selection-actions" icon="send"></calcite-action>
+    <calcite-action slot="selection-actions" icon="copy"></calcite-action>
+    <calcite-action slot="selection-actions" icon="plus"></calcite-action>
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly =
-  (): string => html`<calcite-table
+export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_TestOnly = (): string =>
+  html`<calcite-table
     page-size="4"
     selection-mode="multiple"
     numbered
@@ -750,311 +735,307 @@ export const selectionModeMultipleAndSelectedOnLoadWithMultipleFooterAndHeader_T
     </calcite-table-row>
   </calcite-table>`;
 
-export const tableHeaderInRows_TestOnly = (): string => html` <calcite-table
-  selection-mode="multiple"
-  caption="selection-mode single table"
-  striped
->
-  <calcite-action slot="selection-actions" icon="layer"></calcite-action>
-  <calcite-action slot="selection-actions" icon="send"></calcite-action>
-  <calcite-action slot="selection-actions" icon="copy"></calcite-action>
-  <calcite-action slot="selection-actions" icon="plus"></calcite-action>
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-    <calcite-table-header heading="Heading"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-header heading="Row heading"></calcite-table-header>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-    <calcite-table-cell>cell</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const tableHeaderInRows_TestOnly = (): string =>
+  html` <calcite-table selection-mode="multiple" caption="selection-mode single table" striped>
+    <calcite-action slot="selection-actions" icon="layer"></calcite-action>
+    <calcite-action slot="selection-actions" icon="send"></calcite-action>
+    <calcite-action slot="selection-actions" icon="copy"></calcite-action>
+    <calcite-action slot="selection-actions" icon="plus"></calcite-action>
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+      <calcite-table-header heading="Heading"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-header heading="Row heading"></calcite-table-header>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+      <calcite-table-cell>cell</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const LongWrappingTextContent_TestOnly = (): string => html` <calcite-table
-  numbered
-  caption="Long cell wrapping table"
->
-  <calcite-table-row slot="table-header">
-    <calcite-table-header
-      heading="Heading or a longer wrapping text that goes here"
-      description="Description"
-    ></calcite-table-header>
-    <calcite-table-header
-      heading="Heading or a longer wrapping text that goes here"
-      description="Description"
-    ></calcite-table-header>
-    <calcite-table-header
-      heading="Heading or a longer wrapping text that goes here and maybe one is longer"
-      description="Description"
-    ></calcite-table-header>
-    <calcite-table-header
-      heading="Heading or a longer wrapping text that goes here"
-      description="Description or a longer bit of text that can go here"
-    ></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
-      more calcite-table-row is selected.</calcite-table-cell
-    >
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
-      more calcite-table-row is selected.</calcite-table-cell
-    >
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
-      "none".</calcite-table-cell
-    >
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
-      more calcite-table-row is selected.</calcite-table-cell
-    >
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
-      more calcite-table-row is selected.</calcite-table-cell
-    >
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
-      "none".</calcite-table-cell
-    >
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
-      more calcite-table-row is selected.</calcite-table-cell
-    >
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one or
-      more calcite-table-row is selected.</calcite-table-cell
-    >
-    <calcite-table-cell
-      >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
-      "none".</calcite-table-cell
-    >
-  </calcite-table-row>
-  <calcite-table-row slot="table-footer">
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-    <calcite-table-cell>foot</calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const LongWrappingTextContent_TestOnly = (): string =>
+  html` <calcite-table numbered caption="Long cell wrapping table">
+    <calcite-table-row slot="table-header">
+      <calcite-table-header
+        heading="Heading or a longer wrapping text that goes here"
+        description="Description"
+      ></calcite-table-header>
+      <calcite-table-header
+        heading="Heading or a longer wrapping text that goes here"
+        description="Description"
+      ></calcite-table-header>
+      <calcite-table-header
+        heading="Heading or a longer wrapping text that goes here and maybe one is longer"
+        description="Description"
+      ></calcite-table-header>
+      <calcite-table-header
+        heading="Heading or a longer wrapping text that goes here"
+        description="Description or a longer bit of text that can go here"
+      ></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one
+        or more calcite-table-row is selected.</calcite-table-cell
+      >
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one
+        or more calcite-table-row is selected.</calcite-table-cell
+      >
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+        "none".</calcite-table-cell
+      >
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one
+        or more calcite-table-row is selected.</calcite-table-cell
+      >
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one
+        or more calcite-table-row is selected.</calcite-table-cell
+      >
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+        "none".</calcite-table-cell
+      >
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell>A slot for adding a calcite-action-bar or other components to display.</calcite-table-cell>
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one
+        or more calcite-table-row is selected.</calcite-table-cell
+      >
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not "none" and one
+        or more calcite-table-row is selected.</calcite-table-cell
+      >
+      <calcite-table-cell
+        >A slot for adding a calcite-action-bar or other components to display when selectionMode is not
+        "none".</calcite-table-cell
+      >
+    </calcite-table-row>
+    <calcite-table-row slot="table-footer">
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+      <calcite-table-cell>foot</calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
-export const localized_TestOnly = (): string => html`<calcite-table
-  lang="ar"
-  numbering-system="arab"
-  numbered
-  selection-mode="multiple"
-  caption="Example table"
-  page-size="4"
->
-  <calcite-action slot="selection-actions" icon="layer"></calcite-action>
-  <calcite-action slot="selection-actions" icon="send"></calcite-action>
-  <calcite-action slot="selection-actions" icon="copy"></calcite-action>
-  <calcite-action slot="selection-actions" icon="plus"></calcite-action>
-  <calcite-table-row slot="table-header">
-    <calcite-table-header heading="Column 1"></calcite-table-header>
-    <calcite-table-header heading="Column 2"></calcite-table-header>
-    <calcite-table-header heading="Column 3">
-      <calcite-chip scale="s" appearance="outline-fill" slot="actions-end">slot</calcite-chip>
-    </calcite-table-header>
-    <calcite-table-header heading="Column 4"></calcite-table-header>
-    <calcite-table-header heading="Column 5" description="With a description"> </calcite-table-header>
-    <calcite-table-header heading="Site visits" alignment="end"></calcite-table-header>
-    <calcite-table-header heading="Status"></calcite-table-header>
-    <calcite-table-header alignment="center" heading="More"></calcite-table-header>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">34</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">53</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell> </calcite-table-row
-  ><calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">25</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell> </calcite-table-row
-  ><calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">63</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell> </calcite-table-row
-  ><calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">1643</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">63</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">62</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell> </calcite-table-row
-  ><calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">6</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="62">262</calcite-table-cell>
-    <calcite-table-cell value="frown"><calcite-chip scale="s" icon="frown">Sad</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="127">63</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="120">120</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-  <calcite-table-row selected>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell value="cell">cell</calcite-table-cell>
-    <calcite-table-cell alignment="end" value="987">987</calcite-table-cell>
-    <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
-    <calcite-table-cell alignment="center">
-      <calcite-chip scale="s">Another thing</calcite-chip>
-    </calcite-table-cell>
-  </calcite-table-row>
-</calcite-table>`;
+export const localized_TestOnly = (): string =>
+  html`<calcite-table
+    lang="ar"
+    numbering-system="arab"
+    numbered
+    selection-mode="multiple"
+    caption="Example table"
+    page-size="4"
+  >
+    <calcite-action slot="selection-actions" icon="layer"></calcite-action>
+    <calcite-action slot="selection-actions" icon="send"></calcite-action>
+    <calcite-action slot="selection-actions" icon="copy"></calcite-action>
+    <calcite-action slot="selection-actions" icon="plus"></calcite-action>
+    <calcite-table-row slot="table-header">
+      <calcite-table-header heading="Column 1"></calcite-table-header>
+      <calcite-table-header heading="Column 2"></calcite-table-header>
+      <calcite-table-header heading="Column 3">
+        <calcite-chip scale="s" appearance="outline-fill" slot="actions-end">slot</calcite-chip>
+      </calcite-table-header>
+      <calcite-table-header heading="Column 4"></calcite-table-header>
+      <calcite-table-header heading="Column 5" description="With a description"> </calcite-table-header>
+      <calcite-table-header heading="Site visits" alignment="end"></calcite-table-header>
+      <calcite-table-header heading="Status"></calcite-table-header>
+      <calcite-table-header alignment="center" heading="More"></calcite-table-header>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">34</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">53</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell> </calcite-table-row
+    ><calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">25</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell> </calcite-table-row
+    ><calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">63</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell> </calcite-table-row
+    ><calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">1643</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">63</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">62</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell> </calcite-table-row
+    ><calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">6</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="62">262</calcite-table-cell>
+      <calcite-table-cell value="frown"><calcite-chip scale="s" icon="frown">Sad</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="127">63</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="120">120</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+    <calcite-table-row selected>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell value="cell">cell</calcite-table-cell>
+      <calcite-table-cell alignment="end" value="987">987</calcite-table-cell>
+      <calcite-table-cell value="happy"><calcite-chip scale="s" icon="smile">Happy</calcite-chip></calcite-table-cell>
+      <calcite-table-cell alignment="center">
+        <calcite-chip scale="s">Another thing</calcite-chip>
+      </calcite-table-cell>
+    </calcite-table-row>
+  </calcite-table>`;
 
 export const tableCellCssBackgroundVariable_TestOnly = (): string =>
   html`<calcite-table striped caption="Simple-striped table" dir="rtl" selection-mode="multiple">
diff --git a/packages/calcite-components/src/components/table/table.tsx b/packages/calcite-components/src/components/table/table.tsx
index 886684ee452..0decdbbe114 100644
--- a/packages/calcite-components/src/components/table/table.tsx
+++ b/packages/calcite-components/src/components/table/table.tsx
@@ -266,9 +266,8 @@ export class Table implements LocalizedComponent, LoadableComponent, T9nComponen
         break;
     }
 
-    const destinationCount = this.allRows?.find(
-      (row) => row.positionAll === rowPosition
-    )?.cellCount;
+    const destinationCount = this.allRows?.find((row) => row.positionAll === rowPosition)
+      ?.cellCount;
 
     const adjustedPos = cellPosition > destinationCount ? destinationCount : cellPosition;
 
diff --git a/packages/calcite-components/src/components/tabs/tabs.stories.ts b/packages/calcite-components/src/components/tabs/tabs.stories.ts
index d5a7cd1f3ca..8f544ef880e 100644
--- a/packages/calcite-components/src/components/tabs/tabs.stories.ts
+++ b/packages/calcite-components/src/components/tabs/tabs.stories.ts
@@ -374,20 +374,21 @@ 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>`;
+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 },
diff --git a/packages/calcite-components/src/components/text-area/text-area.stories.ts b/packages/calcite-components/src/components/text-area/text-area.stories.ts
index 624aa691884..2b43b355592 100644
--- a/packages/calcite-components/src/components/text-area/text-area.stories.ts
+++ b/packages/calcite-components/src/components/text-area/text-area.stories.ts
@@ -83,37 +83,36 @@ export const chineseLang_TestOnly = (): string => html`
 export const insideContainerWithHeightAndWidth_TestOnly = (): string =>
   html`<div style="width:500px;height:500px"><calcite-text-area></calcite-text-area></div>`;
 
-export const validationMessageAllScales_TestOnly = (): string =>
-  html`
-    <style>
-      .container {
-        display: flex;
-        flex-direction: column;
-        width: 420px;
-        height: 80px;
-        gap: 45px;
-      }
-    </style>
-    <div class="container">
-      <calcite-text-area
-        scale="s"
-        status="invalid"
-        validation-message="This field is required."
-        validation-icon="frown"
-      ></calcite-text-area>
-      <calcite-text-area
-        scale="m"
-        status="invalid"
-        validation-message="Less than the minimum length of 6 characters"
-        validation-icon
-        value="Hi"
-      ></calcite-text-area>
-      <calcite-text-area
-        scale="l"
-        status="invalid"
-        validation-message="Exceeds the maximum length of 9 characters"
-        validation-icon
-        value="Lorem ipsum"
-      ></calcite-text-area>
-    </div>
-  `;
+export const validationMessageAllScales_TestOnly = (): string => html`
+  <style>
+    .container {
+      display: flex;
+      flex-direction: column;
+      width: 420px;
+      height: 80px;
+      gap: 45px;
+    }
+  </style>
+  <div class="container">
+    <calcite-text-area
+      scale="s"
+      status="invalid"
+      validation-message="This field is required."
+      validation-icon="frown"
+    ></calcite-text-area>
+    <calcite-text-area
+      scale="m"
+      status="invalid"
+      validation-message="Less than the minimum length of 6 characters"
+      validation-icon
+      value="Hi"
+    ></calcite-text-area>
+    <calcite-text-area
+      scale="l"
+      status="invalid"
+      validation-message="Exceeds the maximum length of 9 characters"
+      validation-icon
+      value="Lorem ipsum"
+    ></calcite-text-area>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/text-area/text-area.tsx b/packages/calcite-components/src/components/text-area/text-area.tsx
index 3ff576979e7..d3d39f4f181 100644
--- a/packages/calcite-components/src/components/text-area/text-area.tsx
+++ b/packages/calcite-components/src/components/text-area/text-area.tsx
@@ -538,7 +538,7 @@ export class TextArea
       }
     },
     RESIZE_TIMEOUT,
-    { leading: false }
+    { leading: false },
   );
 
   private isCharacterLimitExceeded(): boolean {
diff --git a/packages/calcite-components/src/components/tile-select/tile-select.tsx b/packages/calcite-components/src/components/tile-select/tile-select.tsx
index d170772a3ff..dbe31094d91 100644
--- a/packages/calcite-components/src/components/tile-select/tile-select.tsx
+++ b/packages/calcite-components/src/components/tile-select/tile-select.tsx
@@ -277,7 +277,7 @@ export class TileSelect implements InteractiveComponent, LoadableComponent {
 
   private renderInput(): void {
     this.input = document.createElement(
-      this.type === "radio" ? "calcite-radio-button" : "calcite-checkbox"
+      this.type === "radio" ? "calcite-radio-button" : "calcite-checkbox",
     );
     this.input.checked = this.checked;
     this.input.disabled = this.disabled;
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.tsx b/packages/calcite-components/src/components/tooltip/tooltip.tsx
index 75fe42ecd08..2b2107d0851 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.tsx
+++ b/packages/calcite-components/src/components/tooltip/tooltip.tsx
@@ -239,7 +239,7 @@ export class Tooltip implements FloatingUIComponent, OpenCloseComponent {
         arrowEl,
         type: "tooltip",
       },
-      delayed
+      delayed,
     );
   }
 
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
index 5d9b136fe52..9257f3c42aa 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
+++ b/packages/calcite-components/src/components/tree-item/tree-item.e2e.ts
@@ -17,16 +17,18 @@ describe("calcite-tree-item", () => {
   });
 
   describe("accessible: with nested children", () => {
-    accessible(html`<calcite-tree lines>
-      <calcite-tree-item>
-        <a href="#">Child 2</a>
-        <calcite-tree slot="children">
-          <calcite-tree-item>
-            <a href="http://www.esri.com">Grandchild 1</a>
-          </calcite-tree-item>
-        </calcite-tree>
-      </calcite-tree-item>
-    </calcite-tree>`);
+    accessible(
+      html`<calcite-tree lines>
+        <calcite-tree-item>
+          <a href="#">Child 2</a>
+          <calcite-tree slot="children">
+            <calcite-tree-item>
+              <a href="http://www.esri.com">Grandchild 1</a>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>`,
+    );
   });
 
   describe("defaults", () => {
@@ -363,18 +365,16 @@ describe("calcite-tree-item", () => {
 
   it("displaying an expanded item is visible", async () => {
     const page = await newE2EPage();
-    await page.setContent(
-      html`
-        <calcite-tree id="root" style="display:none;">
-          <calcite-tree-item expanded
-            >parent
-            <calcite-tree slot="children">
-              <calcite-tree-item id="child">child</calcite-tree-item>
-            </calcite-tree>
-          </calcite-tree-item>
-        </calcite-tree>
-      `
-    );
+    await page.setContent(html`
+      <calcite-tree id="root" style="display:none;">
+        <calcite-tree-item expanded
+          >parent
+          <calcite-tree slot="children">
+            <calcite-tree-item id="child">child</calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+    `);
 
     await page.$eval("#root", (root: HTMLCalciteTreeElement) => (root.style.display = ""));
     await page.waitForChanges();
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index ebe7a27f462..5da09447bf9 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -237,10 +237,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
     const selectedIcon = showBulletPoint
       ? ICONS.bulletPoint
       : showCheckmark
-      ? ICONS.checkmark
-      : showBlank
-      ? ICONS.blank
-      : null;
+        ? ICONS.checkmark
+        : showBlank
+          ? ICONS.blank
+          : null;
     const itemIndicator = selectedIcon ? (
       <calcite-icon
         class={{
@@ -376,7 +376,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
       case "Enter":
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
         const link = Array.from(this.el.children).find((el) =>
-          el.matches("a")
+          el.matches("a"),
         ) as HTMLAnchorElement;
 
         this.userChangedValue = true;
@@ -472,7 +472,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
       const parentTree = this.el.parentElement;
       const siblings = Array.from(parentTree?.children);
       const selectedSiblings = siblings.filter(
-        (child: HTMLCalciteTreeItemElement) => child.selected
+        (child: HTMLCalciteTreeItemElement) => child.selected,
       );
 
       if (siblings.length === selectedSiblings.length) {
@@ -483,7 +483,7 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
       }
 
       const childItems = Array.from(
-        this.el.querySelectorAll<HTMLCalciteTreeItemElement>("calcite-tree-item:not([disabled])")
+        this.el.querySelectorAll<HTMLCalciteTreeItemElement>("calcite-tree-item:not([disabled])"),
       );
 
       childItems.forEach((item: HTMLCalciteTreeItemElement) => {
diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
index c2d146e3f9e..c4433ffa7a9 100644
--- a/packages/calcite-components/src/components/tree/tree.e2e.ts
+++ b/packages/calcite-components/src/components/tree/tree.e2e.ts
@@ -380,7 +380,7 @@ describe("calcite-tree", () => {
                 <calcite-tree-item id="4"> Grandchild 2 </calcite-tree-item>
               </calcite-tree>
             </calcite-tree-item>
-          </calcite-tree>`
+          </calcite-tree>`,
         );
 
         const tree = await page.find("calcite-tree");
@@ -434,7 +434,7 @@ describe("calcite-tree", () => {
           `,
         });
         const checkbox = await page.find(
-          `calcite-tree-item >>> .${CSS.nodeContainer} .${CSS.checkboxLabel} .${CSS.checkbox}`
+          `calcite-tree-item >>> .${CSS.nodeContainer} .${CSS.checkboxLabel} .${CSS.checkbox}`,
         );
         expect(checkbox).not.toBeNull();
       });
@@ -598,36 +598,38 @@ describe("calcite-tree", () => {
 
     it("supports navigating the entire tree structure", async () => {
       const page = await newE2EPage();
-      await page.setContent(html` <calcite-tree id="root">
-        <calcite-tree-item id="root-item-1">
-          <span>Root Item 1</span>
-        </calcite-tree-item>
-        <calcite-tree-item id="parent">
-          <span>Parent</span>
-          <calcite-tree slot="children">
-            <calcite-tree-item id="child">
-              <span>Child</span>
-            </calcite-tree-item>
-            <calcite-tree-item id="child2">
-              <span>Child 2</span>
-              <calcite-tree slot="children">
-                <calcite-tree-item id="grandchild">
-                  <span>Grandchild</span>
-                </calcite-tree-item>
-                <calcite-tree-item id="grandchild2">
-                  <span>Grandchild 2</span>
-                </calcite-tree-item>
-              </calcite-tree>
-            </calcite-tree-item>
-            <calcite-tree-item id="child3">
-              <span>Child 3</span>
-            </calcite-tree-item>
-          </calcite-tree>
-        </calcite-tree-item>
-        <calcite-tree-item id="root-item-3">
-          <span>Root Item 3</span>
-        </calcite-tree-item>
-      </calcite-tree>`);
+      await page.setContent(
+        html` <calcite-tree id="root">
+          <calcite-tree-item id="root-item-1">
+            <span>Root Item 1</span>
+          </calcite-tree-item>
+          <calcite-tree-item id="parent">
+            <span>Parent</span>
+            <calcite-tree slot="children">
+              <calcite-tree-item id="child">
+                <span>Child</span>
+              </calcite-tree-item>
+              <calcite-tree-item id="child2">
+                <span>Child 2</span>
+                <calcite-tree slot="children">
+                  <calcite-tree-item id="grandchild">
+                    <span>Grandchild</span>
+                  </calcite-tree-item>
+                  <calcite-tree-item id="grandchild2">
+                    <span>Grandchild 2</span>
+                  </calcite-tree-item>
+                </calcite-tree>
+              </calcite-tree-item>
+              <calcite-tree-item id="child3">
+                <span>Child 3</span>
+              </calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+          <calcite-tree-item id="root-item-3">
+            <span>Root Item 3</span>
+          </calcite-tree-item>
+        </calcite-tree>`,
+      );
 
       const root = await page.find("#root");
       const parent = await page.find("#parent");
@@ -856,7 +858,7 @@ describe("calcite-tree", () => {
           <calcite-tree-item id="child-4">
             <span>Child 4</span>
           </calcite-tree-item>
-        </calcite-tree>`
+        </calcite-tree>`,
       );
 
       const root = await page.find("#child-1");
@@ -1012,13 +1014,15 @@ describe("calcite-tree", () => {
 
     it("does prevent space/enter keyboard event on actions with selectionMode of single", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<div id="container">
-        <calcite-tree selection-mode="single">
-          <calcite-tree-item>
-            <button>My button</button>
-          </calcite-tree-item>
-        </calcite-tree>
-      </div>`);
+      await page.setContent(
+        html`<div id="container">
+          <calcite-tree selection-mode="single">
+            <calcite-tree-item>
+              <button>My button</button>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`,
+      );
 
       const container = await page.find("#container");
       const button = await page.find("button");
@@ -1040,13 +1044,15 @@ describe("calcite-tree", () => {
 
     it("does prevent space/enter keyboard event on actions with selectionMode of none", async () => {
       const page = await newE2EPage();
-      await page.setContent(html`<div id="container">
-        <calcite-tree selection-mode="none">
-          <calcite-tree-item>
-            <button>My button</button>
-          </calcite-tree-item>
-        </calcite-tree>
-      </div>`);
+      await page.setContent(
+        html`<div id="container">
+          <calcite-tree selection-mode="none">
+            <calcite-tree-item>
+              <button>My button</button>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>`,
+      );
 
       const container = await page.find("#container");
       const button = await page.find("button");
@@ -1090,7 +1096,7 @@ describe("calcite-tree", () => {
                   <calcite-tree-item>Child</calcite-tree-item>
                 </calcite-tree>`;
             }
-          }
+          },
         );
       });
       await page.waitForChanges();
@@ -1114,7 +1120,7 @@ describe("calcite-tree", () => {
         },
         async (_page, item) => {
           await item.press("Enter");
-        }
+        },
       );
     });
 
@@ -1129,7 +1135,7 @@ describe("calcite-tree", () => {
         },
         async (page, item) => {
           await directItemClick(page, item);
-        }
+        },
       );
     });
 
@@ -1149,7 +1155,7 @@ describe("calcite-tree", () => {
       childToggleTraversesParent: boolean,
       selectItem: (page: E2EPage, item: E2EElement) => Promise<void>,
       toggleItem: (page: E2EPage, item: E2EElement, toggle: E2EElement) => Promise<void>,
-      selectItemChild: (page: E2EPage, item: E2EElement) => Promise<void>
+      selectItemChild: (page: E2EPage, item: E2EElement) => Promise<void>,
     ): Promise<void> {
       const selectionModesTests: SelectionModeTest[] = [
         {
@@ -1278,35 +1284,35 @@ describe("calcite-tree", () => {
             await selectItemChild(page, expandableChildItem);
 
             expect(await expandableParentItem.getProperty("expanded")).toBe(
-              !selectsItem && !childToggleTraversesParent
+              !selectsItem && !childToggleTraversesParent,
             );
             expect(await tree.getProperty("selectedItems")).toHaveLength(
               selectionMode === "none"
                 ? 0
                 : selectionMode === "ancestors" && !childToggleTraversesParent
-                ? 7
-                : !childToggleTraversesParent &&
-                  (selectionMode === "multiple" || selectionMode === "single" || selectionMode === "single-persist")
-                ? 0
-                : 1
+                  ? 7
+                  : !childToggleTraversesParent &&
+                      (selectionMode === "multiple" || selectionMode === "single" || selectionMode === "single-persist")
+                    ? 0
+                    : 1,
             );
 
             await selectItemChild(page, expandableChildItem);
 
             expect(await expandableParentItem.getProperty("expanded")).toBe(
-              !selectsItem && !childToggleTraversesParent
+              !selectsItem && !childToggleTraversesParent,
             );
             expect(await tree.getProperty("selectedItems")).toHaveLength(
               selectionMode === "none"
                 ? 0
                 : !childToggleTraversesParent && selectionMode === "multiple"
-                ? 1
-                : canDeselect.child
-                ? 0
-                : 1
+                  ? 1
+                  : canDeselect.child
+                    ? 0
+                    : 1,
             );
           });
-        }
+        },
       );
     }
   });
diff --git a/packages/calcite-components/src/demos/combobox.html b/packages/calcite-components/src/demos/combobox.html
index c9991d959bc..7dc46ffc2ae 100644
--- a/packages/calcite-components/src/demos/combobox.html
+++ b/packages/calcite-components/src/demos/combobox.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/dropdown.html b/packages/calcite-components/src/demos/dropdown.html
index c1613f131e0..cae81025684 100644
--- a/packages/calcite-components/src/demos/dropdown.html
+++ b/packages/calcite-components/src/demos/dropdown.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/input-date-picker.html b/packages/calcite-components/src/demos/input-date-picker.html
index 35cf55268f0..04587f4923f 100644
--- a/packages/calcite-components/src/demos/input-date-picker.html
+++ b/packages/calcite-components/src/demos/input-date-picker.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/input-number.html b/packages/calcite-components/src/demos/input-number.html
index f2d994ca719..8c0bac5d615 100644
--- a/packages/calcite-components/src/demos/input-number.html
+++ b/packages/calcite-components/src/demos/input-number.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/input-text.html b/packages/calcite-components/src/demos/input-text.html
index c5ef54193b8..bbeccdc2199 100644
--- a/packages/calcite-components/src/demos/input-text.html
+++ b/packages/calcite-components/src/demos/input-text.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/input-time-zone.html b/packages/calcite-components/src/demos/input-time-zone.html
index aa7fea862bd..1e32b39ef6e 100644
--- a/packages/calcite-components/src/demos/input-time-zone.html
+++ b/packages/calcite-components/src/demos/input-time-zone.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/input.html b/packages/calcite-components/src/demos/input.html
index 85de024a1a0..f3977cba1e9 100644
--- a/packages/calcite-components/src/demos/input.html
+++ b/packages/calcite-components/src/demos/input.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html
index e355dd4a08a..2600655e661 100644
--- a/packages/calcite-components/src/demos/list.html
+++ b/packages/calcite-components/src/demos/list.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
diff --git a/packages/calcite-components/src/demos/menu.html b/packages/calcite-components/src/demos/menu.html
index b5c523e4639..2ea4822e234 100644
--- a/packages/calcite-components/src/demos/menu.html
+++ b/packages/calcite-components/src/demos/menu.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/select.html b/packages/calcite-components/src/demos/select.html
index 4a18c3066d5..08adc356000 100644
--- a/packages/calcite-components/src/demos/select.html
+++ b/packages/calcite-components/src/demos/select.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/table.html b/packages/calcite-components/src/demos/table.html
index 5acf7975de4..6125ec0bc95 100644
--- a/packages/calcite-components/src/demos/table.html
+++ b/packages/calcite-components/src/demos/table.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/demos/text-area.html b/packages/calcite-components/src/demos/text-area.html
index 6b8f57bf403..837ffbed5c1 100644
--- a/packages/calcite-components/src/demos/text-area.html
+++ b/packages/calcite-components/src/demos/text-area.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="UTF-8" />
diff --git a/packages/calcite-components/src/tests/commonTests.ts b/packages/calcite-components/src/tests/commonTests.ts
index 4e0795b6f4e..897dcb24199 100644
--- a/packages/calcite-components/src/tests/commonTests.ts
+++ b/packages/calcite-components/src/tests/commonTests.ts
@@ -93,7 +93,7 @@ export function accessible(componentTestSetup: ComponentTestSetup): void {
     await page.waitForFunction(() => (window as AxeOwningWindow).axe);
 
     expect(
-      await page.evaluate(async (componentTag: ComponentTag) => (window as AxeOwningWindow).axe.run(componentTag), tag)
+      await page.evaluate(async (componentTag: ComponentTag) => (window as AxeOwningWindow).axe.run(componentTag), tag),
     ).toHaveNoViolations();
   });
 }
@@ -117,7 +117,7 @@ export async function renders(
   options?: {
     visible?: boolean;
     display: string;
-  }
+  },
 ): Promise<void> {
   it(`renders`, async () => {
     const { page, tag } = await getTagAndPage(componentTestSetup);
@@ -160,7 +160,7 @@ export function reflects(
   propsToTest: {
     propertyName: string;
     value: any;
-  }[]
+  }[],
 ): void {
   const cases = propsToTest.map(({ propertyName, value }) => [propertyName, value]);
 
@@ -228,7 +228,7 @@ export function defaults(
   propsToTest: {
     propertyName: string;
     defaultValue: any;
-  }[]
+  }[],
 ): void {
   it.each(propsToTest.map(({ propertyName, defaultValue }) => [propertyName, defaultValue]))(
     "%p",
@@ -237,7 +237,7 @@ export function defaults(
       const element = await page.find(tag);
       const prop = await element.getProperty(propertyName);
       expect(prop).toEqual(defaultValue);
-    }
+    },
   );
 }
 
@@ -311,8 +311,8 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu
         await page.$eval(
           tag,
           (element: HTMLElement, selector: string) => element.shadowRoot.activeElement?.matches(selector),
-          options?.shadowFocusTargetSelector
-        )
+          options?.shadowFocusTargetSelector,
+        ),
       ).toBe(true);
     }
 
@@ -320,7 +320,7 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu
     await page.waitForChanges();
 
     expect(await page.evaluate((selector) => document.activeElement?.matches(selector), focusTargetSelector)).toBe(
-      true
+      true,
     );
   });
 }
@@ -342,7 +342,7 @@ export function focusable(componentTestSetup: ComponentTestSetup, options?: Focu
 export function slots(
   componentTagOrHTML: TagOrHTML,
   slots: Record<string, string> | string[],
-  includeDefaultSlot = false
+  includeDefaultSlot = false,
 ): void {
   it("has slots", async () => {
     const page = await simplePageSetup(componentTagOrHTML);
@@ -373,7 +373,7 @@ export function slots(
         }
       },
       slotNames,
-      includeDefaultSlot
+      includeDefaultSlot,
     );
 
     await page.waitForChanges();
@@ -381,7 +381,7 @@ export function slots(
     const slotted = await page.evaluate(() =>
       Array.from(document.querySelectorAll(".slotted-into-named-slot"))
         .filter((slotted) => slotted.assignedSlot)
-        .map((slotted) => slotted.slot)
+        .map((slotted) => slotted.slot),
     );
 
     expect(slotNames).toEqual(slotted);
@@ -424,8 +424,8 @@ async function assertLabelable({
   expect(
     await page.evaluate(
       (focusTargetSelector: string): boolean => !!document.activeElement?.closest(focusTargetSelector),
-      focusTargetSelector
-    )
+      focusTargetSelector,
+    ),
   ).toBe(true);
 
   if (shadowFocusTargetSelector) {
@@ -433,8 +433,8 @@ async function assertLabelable({
       await page.$eval(
         componentTag,
         (element: HTMLElement, selector: string) => element.shadowRoot.activeElement.matches(selector),
-        shadowFocusTargetSelector
-      )
+        shadowFocusTargetSelector,
+      ),
     ).toBe(true);
   }
 
@@ -479,7 +479,7 @@ interface LabelableOptions extends Pick<FocusableOptions, "focusTargetSelector"
  */
 export function labelable(
   componentTagOrHtml: TagOrHTML | TagOrHTMLWithBeforeContent,
-  options?: LabelableOptions
+  options?: LabelableOptions,
 ): void {
   const id = "labelable-id";
   const labelTitle = "My Component";
@@ -715,7 +715,7 @@ interface FormAssociatedOptions {
  */
 export function formAssociated(
   componentTagOrHtml: TagOrHTML | TagOrHTMLWithBeforeContent,
-  options: FormAssociatedOptions
+  options: FormAssociatedOptions,
 ): void {
   it("supports association via ancestry", () => testAncestorFormAssociated());
   it("supports association via form ID", () => testIdFormAssociated());
@@ -763,7 +763,7 @@ export function formAssociated(
         keeping things simple by using submit-type input
         this should cover button and calcite-button submit cases
         -->
-        <input id="submitter" form="test-form" type="submit" />`
+        <input id="submitter" form="test-form" type="submit" />`,
     );
     await page.waitForChanges();
     const component = await page.find(tag);
@@ -799,7 +799,7 @@ export function formAssociated(
   async function assertValueSubmissionType(
     page: E2EPage,
     component: E2EElement,
-    options: FormAssociatedOptions
+    options: FormAssociatedOptions,
   ): Promise<void> {
     const name = await component.getProperty("name");
     const inputType = options.inputType ?? "text";
@@ -807,13 +807,13 @@ export function formAssociated(
     const hiddenFormInputType = await page.evaluate(
       async (inputName: string, hiddenFormInputSlotName: string): Promise<string> => {
         const hiddenFormInput = document.querySelector<HTMLInputElement>(
-          `[name="${inputName}"] input[slot=${hiddenFormInputSlotName}]`
+          `[name="${inputName}"] input[slot=${hiddenFormInputSlotName}]`,
         );
 
         return hiddenFormInput.type;
       },
       name,
-      hiddenFormInputSlotName
+      hiddenFormInputSlotName,
     );
 
     if (await isCheckable(page, component, options)) {
@@ -826,7 +826,7 @@ export function formAssociated(
   async function assertValueResetOnFormReset(
     page: E2EPage,
     component: E2EElement,
-    options: FormAssociatedOptions
+    options: FormAssociatedOptions,
   ): Promise<void> {
     const resettablePropName = (await isCheckable(page, component, options)) ? "checked" : "value";
     const initialValue = await component.getProperty(resettablePropName);
@@ -842,7 +842,7 @@ export function formAssociated(
   async function assertValueSubmittedOnFormSubmit(
     page: E2EPage,
     component: E2EElement,
-    options: FormAssociatedOptions
+    options: FormAssociatedOptions,
   ): Promise<void> {
     const stringifiedTestValue = stringifyTestValue(options.testValue);
     const name = await component.getProperty("name");
@@ -878,7 +878,7 @@ export function formAssociated(
             ? // `input[type="color"]` will set its value to #000000 when set to an invalid value
               // see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#value
               "#000"
-            : undefined
+            : undefined,
         );
 
         component.setProperty("required", false);
@@ -917,10 +917,10 @@ export function formAssociated(
         async (
           form: HTMLFormElement,
           inputName: string,
-          hiddenFormInputSlotName: string
+          hiddenFormInputSlotName: string,
         ): Promise<SubmitValueResult> => {
           const hiddenFormInput = document.querySelector(
-            `[name="${inputName}"] input[slot=${hiddenFormInputSlotName}]`
+            `[name="${inputName}"] input[slot=${hiddenFormInputSlotName}]`,
           );
 
           let resolve: (value: SubmitValueResult) => void;
@@ -953,7 +953,7 @@ export function formAssociated(
           return submitPromise;
         },
         name,
-        hiddenFormInputSlotName
+        hiddenFormInputSlotName,
       );
     }
   }
@@ -961,7 +961,7 @@ export function formAssociated(
   async function assertFormSubmitOnEnter(
     page: E2EPage,
     component: E2EElement,
-    options: FormAssociatedOptions
+    options: FormAssociatedOptions,
   ): Promise<void> {
     type TestWindow = GlobalTestProps<{
       called: boolean;
@@ -1068,7 +1068,7 @@ export function disabled(componentTestSetup: ComponentTestSetup, options?: Disab
             anchor.addEventListener("click", (event) => event.preventDefault(), { once: true });
           }
         },
-        true
+        true,
       );
     });
   };
@@ -1106,7 +1106,7 @@ export function disabled(componentTestSetup: ComponentTestSetup, options?: Disab
   const getTabAndClickFocusTarget = async (
     page: E2EPage,
     tag: string,
-    focusTarget: DisabledOptions["focusTarget"]
+    focusTarget: DisabledOptions["focusTarget"],
   ): Promise<string[]> => {
     if (typeof focusTarget === "object") {
       return [focusTarget.tab, focusTarget.click];
@@ -1176,7 +1176,7 @@ export function disabled(componentTestSetup: ComponentTestSetup, options?: Disab
 
     const [shadowFocusableCenterX, shadowFocusableCenterY] = await getShadowFocusableCenterCoordinates(
       page,
-      tabFocusTarget
+      tabFocusTarget,
     );
 
     async function resetFocusOrder(): Promise<void> {
@@ -1265,7 +1265,7 @@ export function disabled(componentTestSetup: ComponentTestSetup, options?: Disab
         component.disabled = true;
         allExpectedEvents.forEach((event) => component.dispatchEvent(new MouseEvent(event)));
       },
-      allExpectedEvents
+      allExpectedEvents,
     );
 
     assertOnMouseAndPointerEvents(eventSpies, (spy) => {
@@ -1308,7 +1308,7 @@ export function floatingUIOwner(
      * Use this to specify the selector in the shadow DOM for the floating-ui element.
      */
     shadowSelector?: string;
-  }
+  },
 ): void {
   it("owns a floating-ui", async () => {
     const page = await simplePageSetup(componentTagOrHTML);
@@ -1336,7 +1336,7 @@ export function floatingUIOwner(
 
           return floatingUIEl.getAttribute("style");
         },
-        options?.shadowSelector
+        options?.shadowSelector,
       );
     }
 
@@ -1453,7 +1453,7 @@ export async function t9n(componentTestSetup: ComponentTestSetup): Promise<void>
         };
       },
       enMessages,
-      fakeBundleIdentifier
+      fakeBundleIdentifier,
     );
 
     component.setAttribute("lang", "es");
@@ -1576,7 +1576,7 @@ export function openClose(componentTagOrHTML: TagOrHTML, options?: OpenCloseOpti
       eventSequence,
       customizedOptions.initialToggleValue,
       customizedOptions.openPropName,
-      componentTagOrHTML
+      componentTagOrHTML,
     );
   }
 
@@ -1585,11 +1585,11 @@ export function openClose(componentTagOrHTML: TagOrHTML, options?: OpenCloseOpti
     const element = await page.find(tag);
 
     const [beforeOpenEvent, openEvent, beforeCloseEvent, closeEvent] = eventSequence.map((event) =>
-      page.waitForEvent(event)
+      page.waitForEvent(event),
     );
 
     const [beforeOpenSpy, openSpy, beforeCloseSpy, closeSpy] = await Promise.all(
-      eventSequence.map(async (event) => await element.spyOnEvent(event))
+      eventSequence.map(async (event) => await element.spyOnEvent(event)),
     );
 
     await page.waitForChanges();
diff --git a/packages/calcite-components/src/utils/floating-ui.spec.ts b/packages/calcite-components/src/utils/floating-ui.spec.ts
index 7d9931e33ed..dd65a4bf420 100644
--- a/packages/calcite-components/src/utils/floating-ui.spec.ts
+++ b/packages/calcite-components/src/utils/floating-ui.spec.ts
@@ -170,6 +170,6 @@ it("should have correct value for defaultOffsetDistance", () => {
 
 it("should filter computed placements", () => {
   expect(new Set(filterComputedPlacements([...placements], document.createElement("div")))).toEqual(
-    new Set(effectivePlacements)
+    new Set(effectivePlacements),
   );
 });
diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts
index 8f844bcb810..40dc06c182a 100644
--- a/packages/calcite-components/src/utils/floating-ui.ts
+++ b/packages/calcite-components/src/utils/floating-ui.ts
@@ -96,7 +96,7 @@ export const positionFloatingUI =
       offsetSkidding?: number;
       arrowEl?: SVGElement;
       type: UIType;
-    }
+    },
   ): Promise<void> => {
     if (!referenceEl || !floatingEl) {
       return null;
@@ -354,7 +354,7 @@ function getMiddleware({
 
     if (placement === "auto" || placement === "auto-start" || placement === "auto-end") {
       middleware.push(
-        autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null })
+        autoPlacement({ alignment: placement === "auto-start" ? "start" : placement === "auto-end" ? "end" : null }),
       );
     } else if (!flipDisabled) {
       middleware.push(flip(flipPlacements ? { fallbackPlacements: flipPlacements } : {}));
@@ -364,7 +364,7 @@ function getMiddleware({
       middleware.push(
         arrow({
           element: arrowEl,
-        })
+        }),
       );
     }
 
@@ -376,7 +376,7 @@ function getMiddleware({
 
 export function filterComputedPlacements(placements: string[], el: HTMLElement): EffectivePlacement[] {
   const filteredPlacements = placements.filter((placement: EffectivePlacement) =>
-    effectivePlacements.includes(placement)
+    effectivePlacements.includes(placement),
   ) as EffectivePlacement[];
 
   if (filteredPlacements.length !== placements.length) {
@@ -385,7 +385,7 @@ export function filterComputedPlacements(placements: string[], el: HTMLElement):
         .map((placement) => `"${placement}"`)
         .join(", ")
         .trim()}`,
-      { el }
+      { el },
     );
   }
 
@@ -425,7 +425,7 @@ export function getEffectivePlacement(floatingEl: HTMLElement, placement: Logica
 export async function reposition(
   component: FloatingUIComponent,
   options: Parameters<typeof positionFloatingUI>[1],
-  delayed = false
+  delayed = false,
 ): Promise<void> {
   if (!component.open) {
     return;
@@ -479,7 +479,7 @@ const componentToDebouncedRepositionMap = new WeakMap<FloatingUIComponent, Debou
 export function connectFloatingUI(
   component: FloatingUIComponent,
   referenceEl: ReferenceElement,
-  floatingEl: HTMLElement
+  floatingEl: HTMLElement,
 ): void {
   if (!floatingEl || !referenceEl) {
     return;
@@ -506,7 +506,7 @@ export function connectFloatingUI(
 
   cleanupMap.set(
     component,
-    runAutoUpdate(referenceEl, floatingEl, () => component.reposition())
+    runAutoUpdate(referenceEl, floatingEl, () => component.reposition()),
   );
 }
 
@@ -520,7 +520,7 @@ export function connectFloatingUI(
 export function disconnectFloatingUI(
   component: FloatingUIComponent,
   referenceEl: ReferenceElement,
-  floatingEl: HTMLElement
+  floatingEl: HTMLElement,
 ): void {
   if (!floatingEl || !referenceEl) {
     return;
diff --git a/packages/calcite-components/src/utils/interactive.tsx b/packages/calcite-components/src/utils/interactive.tsx
index 19e57379c68..0e6ed677429 100644
--- a/packages/calcite-components/src/utils/interactive.tsx
+++ b/packages/calcite-components/src/utils/interactive.tsx
@@ -120,7 +120,7 @@ function addInteractionListeners(element: HTMLElement): void {
 
   element.addEventListener("pointerdown", onPointerDown, captureOnlyOptions);
   nonBubblingWhenDisabledMouseEvents.forEach((event) =>
-    element.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions)
+    element.addEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions),
   );
 }
 
@@ -141,7 +141,7 @@ function removeInteractionListeners(element: HTMLElement): void {
 
   element.removeEventListener("pointerdown", onPointerDown, captureOnlyOptions);
   nonBubblingWhenDisabledMouseEvents.forEach((event) =>
-    element.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions)
+    element.removeEventListener(event, onNonBubblingWhenDisabledMouseEvent, captureOnlyOptions),
   );
 }
 
@@ -191,7 +191,7 @@ export const CSS = {
 
 export function InteractiveContainer(
   { disabled }: InteractiveContainerOptions,
-  children: VNode[]
+  children: VNode[],
 ): FunctionalComponent {
   return (
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
index 4b74ac636ba..80b04b2cd56 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts
@@ -72,5 +72,5 @@ export declare function calledTransformerFunction<R = any>(
   token: TransformedToken,
   args: {
     [K in keyof TransformerArgs]: TransformerArgs[K];
-  }
+  },
 ): R;
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts
index 44e8f78c997..631697feac1 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueCheckEvaluateMath.ts
@@ -8,10 +8,13 @@ export function evaluateMathInValue(value: any): any {
   }
 
   if (value === Object(value)) {
-    return Object.entries(value).reduce((acc, [k, v]) => {
-      acc[k] = evaluateMathInValue(v);
-      return acc;
-    }, {} as Record<string, any>);
+    return Object.entries(value).reduce(
+      (acc, [k, v]) => {
+        acc[k] = evaluateMathInValue(v);
+        return acc;
+      },
+      {} as Record<string, any>,
+    );
   }
 
   return typeof value === "string" || typeof value === "number" ? `${checkAndEvaluateMath(`${value}`)}` : value;
diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
index c3dd5651391..eb6a44ba1cd 100644
--- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
+++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueFontFamilyFallbacks.ts
@@ -12,7 +12,7 @@ export const matcher: Matcher = (token: TransformedToken) => {
 type FontFamilyFallbackToken = TransformedToken & { value: string[] };
 
 export const transformValuesFontFamilyWithFallbacks: CalledTransformerFunction<string> = (
-  token: FontFamilyFallbackToken
+  token: FontFamilyFallbackToken,
 ) => {
   return token.value.join(" ");
 };