From 9c5c1669419af63af8f38445d30112b31822580d Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Thu, 18 Jul 2024 15:49:32 -0500
Subject: [PATCH 1/5] feat(popover): add autoAlignBoundary for configurable
 collision boundary

---
 .../src/components/Popover/Popover.stories.js | 69 +++++++++++++++++
 .../react/src/components/Popover/index.tsx    | 74 +++++++++++++------
 2 files changed, 120 insertions(+), 23 deletions(-)

diff --git a/packages/react/src/components/Popover/Popover.stories.js b/packages/react/src/components/Popover/Popover.stories.js
index f32b32e60068..95f41d398bc6 100644
--- a/packages/react/src/components/Popover/Popover.stories.js
+++ b/packages/react/src/components/Popover/Popover.stories.js
@@ -269,6 +269,75 @@ export const ExperimentalAutoAlign = () => {
     </div>
   );
 };
+
+export const ExperimentalAutoAlignBoundary = () => {
+  const [open, setOpen] = useState(true);
+  const ref = useRef();
+  const [boundary, setBoundary] = useState();
+
+  useEffect(() => {
+    ref?.current?.scrollIntoView({ block: 'center', inline: 'center' });
+  });
+
+  return (
+    <div
+      style={{
+        display: 'grid',
+        placeItems: 'center',
+        overflow: 'scroll',
+        width: '800px',
+        height: '500px',
+        border: '1px',
+        borderStyle: 'dashed',
+        borderColor: 'black',
+        margin: '0 auto',
+      }}
+      ref={setBoundary}>
+      <div
+        style={{
+          width: '2100px',
+          height: '1px',
+          placeItems: 'center',
+        }}
+      />
+      <div style={{ placeItems: 'center', height: '32px', width: '32px' }}>
+        <Popover
+          open={open}
+          align="top"
+          autoAlign
+          autoAlignBoundary={boundary}
+          ref={ref}>
+          <div className="playground-trigger">
+            <CheckboxIcon
+              onClick={() => {
+                setOpen(!open);
+              }}
+            />
+          </div>
+          <PopoverContent className="p-3">
+            <div>
+              <p className="popover-title">This popover uses autoAlign</p>
+              <p className="popover-details">
+                Scroll the container up, down, left or right to observe how the
+                popover will automatically change its position in attempt to
+                stay within the viewport. This works on initial render in
+                addition to on scroll.
+              </p>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <div
+          style={{
+            height: '1000px',
+            width: '1px',
+            placeItems: 'center',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
 export const Test = () => {
   const [open, setOpen] = useState();
   const align = document?.dir === 'rtl' ? 'bottom-right' : 'bottom-left';
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index 286308491759..71ce870bc433 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -28,6 +28,7 @@ import {
   autoUpdate,
   arrow,
   offset,
+  type Boundary,
 } from '@floating-ui/react';
 
 interface PopoverContext {
@@ -100,6 +101,11 @@ interface PopoverBaseProps {
    */
   autoAlign?: boolean;
 
+  /**
+   * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlignBoundary?: Boundary;
+
   /**
    * Specify whether a caret should be rendered
    */
@@ -163,6 +169,7 @@ export const Popover: PopoverComponent = React.forwardRef(
       align: initialAlign = isTabTip ? 'bottom-start' : 'bottom',
       as: BaseComponent = 'span' as E,
       autoAlign = false,
+      autoAlignBoundary,
       caret = isTabTip ? false : true,
       className: customClassName,
       children,
@@ -240,29 +247,35 @@ export const Popover: PopoverComponent = React.forwardRef(
       }
     });
 
-    const { refs, floatingStyles, placement, middlewareData } = useFloating(
-      autoAlign
-        ? {
-            placement: align,
-
-            // The floating element is positioned relative to its nearest
-            // containing block (usually the viewport). It will in many cases also
-            // “break” the floating element out of a clipping ancestor.
-            // https://floating-ui.com/docs/misc#clipping
-            strategy: 'fixed',
-
-            // Middleware order matters, arrow should be last
-            middleware: [
-              offset(!isTabTip ? popoverDimensions?.current?.offset : 0),
-              flip({ fallbackAxisSideDirection: 'start' }),
-              arrow({
-                element: caretRef,
-              }),
-            ],
-            whileElementsMounted: autoUpdate,
-          }
-        : {} // When autoAlign is turned off, floating-ui will not be used
-    );
+    const { refs, floatingStyles, placement, middlewareData, ...allTheRest } =
+      useFloating(
+        autoAlign
+          ? {
+              placement: align,
+
+              // The floating element is positioned relative to its nearest
+              // containing block (usually the viewport). It will in many cases also
+              // “break” the floating element out of a clipping ancestor.
+              // https://floating-ui.com/docs/misc#clipping
+              strategy: 'fixed',
+
+              // Middleware order matters, arrow should be last
+              middleware: [
+                offset(!isTabTip ? popoverDimensions?.current?.offset : 0),
+                flip({
+                  fallbackAxisSideDirection: 'start',
+                  boundary: autoAlignBoundary,
+                }),
+                arrow({
+                  element: caretRef,
+                }),
+              ],
+              whileElementsMounted: autoUpdate,
+            }
+          : {} // When autoAlign is turned off, floating-ui will not be used
+      );
+
+    console.log(allTheRest);
 
     const value = useMemo(() => {
       return {
@@ -484,6 +497,21 @@ Popover.propTypes = {
    */
   autoAlign: PropTypes.bool,
 
+  /**
+   * Specify a bounding element to be used for autoAlign calculations. The viewport is used by default. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlignBoundary: PropTypes.oneOfType([
+    PropTypes.oneOf(['clippingAncestors']),
+    PropTypes.element,
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.exact({
+      x: PropTypes.number,
+      y: PropTypes.number,
+      width: PropTypes.number,
+      height: PropTypes.number,
+    }),
+  ]),
+
   /**
    * Specify whether a caret should be rendered
    */

From e340a963dc56f9bb150c5faf4562ba9cc1d8b27a Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Tue, 19 Nov 2024 12:39:10 -0600
Subject: [PATCH 2/5] chore: yarn format

---
 docs/guides/icons.md                          |   3 +-
 docs/guides/support.md                        |   4 +-
 packages/grid/scss/_css-grid.scss             |  12 +-
 .../src/builders/vanilla.js                   |   5 +-
 .../src/builders/vue/builder.js               |   5 +-
 .../src/components/Button/ButtonBase.tsx      |   2 +-
 .../src/components/ComboBox/ComboBox.tsx      |  12 +-
 .../ComposedModal/ComposedModal.tsx           |   2 +-
 .../DatePickerInput/DatePickerInput.tsx       |   2 +-
 .../react/src/components/Heading/index.tsx    |   2 +-
 packages/react/src/components/Layer/index.tsx |   2 +-
 .../MultiSelect/FilterableMultiSelect.tsx     |   2 +-
 .../components/NumberInput/NumberInput.tsx    |   2 +-
 .../components/RadioButton/RadioButton.tsx    |   2 +-
 .../RadioButtonGroup/RadioButtonGroup.tsx     |   2 +-
 .../react/src/components/Search/Search.tsx    |   4 +-
 .../react/src/components/Slider/Slider.tsx    |   4 +-
 packages/react/src/components/Stack/Stack.tsx |  57 +++---
 .../react/src/components/Stack/VStack.tsx     |  11 +-
 .../src/components/TextArea/TextArea.tsx      |   2 +-
 .../src/components/TextInput/TextInput.tsx    |   2 +-
 .../react/src/components/Toggletip/index.tsx  |   2 +-
 .../src/components/UIShell/SideNavLink.tsx    |   2 +-
 .../react/src/components/UIShell/Switcher.tsx | 174 +++++++++---------
 .../src/internal/__tests__/wrapFocus-test.js  |  10 +-
 packages/react/src/types/common.ts            |   2 +-
 .../scss/components/accordion/_accordion.scss |   9 +-
 .../scss/components/button/_button.scss       |   5 +-
 .../scss/components/button/_mixins.scss       |  11 +-
 .../content-switcher/_content-switcher.scss   |   4 +-
 .../data-table/action/_data-table-action.scss |  12 +-
 .../expandable/_data-table-expandable.scss    |  16 +-
 .../data-table/sort/_data-table-sort.scss     |   3 +-
 .../components/date-picker/_flatpickr.scss    |  12 +-
 .../scss/components/dialog/_dialog.scss       |  13 +-
 .../scss/components/dropdown/_dropdown.scss   |   3 +-
 .../fluid-date-picker/_fluid-date-picker.scss |   3 +-
 .../fluid-list-box/_fluid-list-box.scss       |   3 +-
 .../_fluid-number-input.scss                  |   4 +-
 .../fluid-select/_fluid-select.scss           |   3 +-
 .../fluid-text-input/_fluid-text-input.scss   |   3 +-
 .../scss/components/list-box/_list-box.scss   |   3 +-
 .../scss/components/loading/_animation.scss   |   3 +-
 .../styles/scss/components/modal/_modal.scss  |  12 +-
 .../_actionable-notification.scss             |   6 +-
 .../notification/_inline-notification.scss    |   3 +-
 .../notification/_toast-notification.scss     |   4 +-
 .../number-input/_number-input.scss           |   3 +-
 .../overflow-menu/_overflow-menu.scss         |   6 +-
 .../pagination-nav/_pagination-nav.scss       |   3 +-
 .../components/pagination/_pagination.scss    |   3 +-
 .../pagination/_unstable_pagination.scss      |   3 +-
 .../_progress-indicator.scss                  |   3 +-
 .../scss/components/search/_search.scss       |   9 +-
 .../scss/components/slider/_slider.scss       |  11 +-
 .../styles/scss/components/slug/_slug.scss    |  17 +-
 .../styles/scss/components/tabs/_tabs.scss    |   6 +-
 packages/styles/scss/components/tag/_tag.scss |   3 +-
 .../scss/components/text-area/_text-area.scss |   3 +-
 .../components/text-input/_text-input.scss    |   6 +-
 .../styles/scss/components/tile/_tile.scss    |  15 +-
 .../components/time-picker/_time-picker.scss  |   3 +-
 .../components/ui-shell/header/_header.scss   |  13 +-
 .../ui-shell/side-nav/_side-nav.scss          |  17 +-
 .../styles/scss/utilities/_ai-gradient.scss   |   9 +-
 packages/type/README.md                       |  12 +-
 .../utilities/src/dateTimeFormat/absolute.ts  |   4 +-
 packages/web-components/README.md             |   2 +-
 .../src/components/ai-label/ai-label.scss     |   3 +-
 .../src/components/combo-box/combo-box.ts     |   2 +-
 .../components/data-table/_table-action.scss  |   3 +-
 .../data-table/table-toolbar-content.ts       |   4 +-
 .../src/components/dropdown/dropdown.ts       |   4 +-
 .../file-uploader/demo-file-uploader.ts       |   2 +-
 .../file-uploader/file-uploader-button.ts     |   2 +-
 .../file-uploader-drop-container.ts           |   2 +-
 .../src/components/layer/layer.stories.ts     |   5 +-
 .../src/components/modal/modal.scss           |  12 +-
 .../notification/actionable-notification.scss |   3 +-
 .../src/components/slug/slug.scss             |   3 +-
 .../src/components/tabs/tabs.scss             |   3 +-
 .../src/components/tile/tile.scss             |   3 +-
 .../src/globals/directives/if-non-empty.ts    |   2 +-
 tasks/sync.js                                 |   4 +-
 84 files changed, 385 insertions(+), 287 deletions(-)

diff --git a/docs/guides/icons.md b/docs/guides/icons.md
index 4e59ccd676de..250cc11d4e26 100644
--- a/docs/guides/icons.md
+++ b/docs/guides/icons.md
@@ -150,8 +150,7 @@ update PR:
    `--modifiers`. All icons with `--modifiers` are listed as variants of the
    same icon.
 3. make desired edits on the icon's `aliases` list.
-4. commit changes, preferably with a commit message "[icon name] metadata
-   update".
+4. commit changes, preferably with a commit message "[icon name] metadata update".
 5. create a new branch, suggested branch name is `yourname-metadata-iconName`
 6. create the PR from your branch, or click on `Propose file change` if you are
    in browser.
diff --git a/docs/guides/support.md b/docs/guides/support.md
index 12296af4c810..62fcb4d05bb1 100644
--- a/docs/guides/support.md
+++ b/docs/guides/support.md
@@ -40,8 +40,8 @@ started in case you get stuck.
 - “Could you share more about what you’ve already tried?”
 - “Can you share more about your usecase?”
 - “Can you add a repro (reproduction) using Stackblitz?”
-- “After searching through [FILL IN RESOURCE HERE], I was able to find this and
-  thought it might be helpful... Let me know if that works.”
+- “After searching through [FILL IN RESOURCE HERE], I was able to find this and thought
+  it might be helpful... Let me know if that works.”
 
 ### What does "ongoing support" mean regarding GitHub?
 
diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index 48da59bc0e91..6913cf61ffb5 100644
--- a/packages/grid/scss/_css-grid.scss
+++ b/packages/grid/scss/_css-grid.scss
@@ -144,8 +144,10 @@
   // Condensed
   .#{$prefix}--css-grid--condensed {
     --cds-grid-gutter: #{$grid-gutter-condensed};
-    --cds-grid-column-hang: #{math.div($grid-gutter, 2) -
-      math.div($grid-gutter-condensed, 2)};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div(
+        $grid-gutter-condensed,
+        2
+      )};
   }
 
   // -----------------------------------------------------------------------------
@@ -193,8 +195,10 @@
   .#{$prefix}--subgrid--condensed {
     --cds-grid-gutter-start: #{math.div($grid-gutter-condensed, 2)};
     --cds-grid-gutter-end: #{math.div($grid-gutter-condensed, 2)};
-    --cds-grid-column-hang: #{math.div($grid-gutter, 2) -
-      math.div($grid-gutter-condensed, 2)};
+    --cds-grid-column-hang: #{math.div($grid-gutter, 2) - math.div(
+        $grid-gutter-condensed,
+        2
+      )};
   }
 
   // -----------------------------------------------------------------------------
diff --git a/packages/icon-build-helpers/src/builders/vanilla.js b/packages/icon-build-helpers/src/builders/vanilla.js
index d20343b32fb0..8362388812d2 100644
--- a/packages/icon-build-helpers/src/builders/vanilla.js
+++ b/packages/icon-build-helpers/src/builders/vanilla.js
@@ -57,9 +57,8 @@ async function builder(metadata, { output }) {
   for (const m of modules) {
     files[m.filepath] = m.source;
     input[m.filepath] = m.filepath;
-    files[
-      'index.js'
-    ] += `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
+    files['index.js'] +=
+      `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
   }
 
   const bundle = await rollup({
diff --git a/packages/icon-build-helpers/src/builders/vue/builder.js b/packages/icon-build-helpers/src/builders/vue/builder.js
index 7c33b76d25ef..3e9c22abe702 100644
--- a/packages/icon-build-helpers/src/builders/vue/builder.js
+++ b/packages/icon-build-helpers/src/builders/vue/builder.js
@@ -73,9 +73,8 @@ async function builder(metadata, { output }) {
   for (const m of modules) {
     files[m.filepath] = m.source;
     input[m.filepath] = m.filepath;
-    files[
-      'index.js'
-    ] += `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
+    files['index.js'] +=
+      `\nexport { default as ${m.moduleName} } from '${m.filepath}';`;
   }
 
   const bundle = await rollup({
diff --git a/packages/react/src/components/Button/ButtonBase.tsx b/packages/react/src/components/Button/ButtonBase.tsx
index 3dba223de95d..643773437475 100644
--- a/packages/react/src/components/Button/ButtonBase.tsx
+++ b/packages/react/src/components/Button/ButtonBase.tsx
@@ -12,7 +12,7 @@ import { useId } from '../../internal/useId';
 import { ButtonBaseProps, ButtonProps } from './Button';
 
 const ButtonBase = React.forwardRef(function ButtonBase<
-  T extends React.ElementType
+  T extends React.ElementType,
 >(
   {
     as,
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index c77ae6ac454d..00c3a5485ec5 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -531,12 +531,12 @@ const ComboBox = forwardRef(
         typeahead
           ? autocompleteCustomFilter({ item: itemToString(item), inputValue })
           : shouldFilterItem
-          ? shouldFilterItem({
-              item,
-              itemToString,
-              inputValue,
-            })
-          : defaultShouldFilterItem()
+            ? shouldFilterItem({
+                item,
+                itemToString,
+                inputValue,
+              })
+            : defaultShouldFilterItem()
       );
 
     useEffect(() => {
diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index 84d3c4834b34..6195b1c93ae9 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -434,7 +434,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
 
     // AILabel is always size `sm`
     let normalizedDecorator = React.isValidElement(slug ?? decorator)
-      ? slug ?? decorator
+      ? (slug ?? decorator)
       : null;
     if (
       normalizedDecorator &&
diff --git a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
index c89cdb77ad8d..e1b8a4913536 100644
--- a/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
+++ b/packages/react/src/components/DatePickerInput/DatePickerInput.tsx
@@ -226,7 +226,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
 
   // AILabel always size `mini`
   let normalizedDecorator = React.isValidElement(slug ?? decorator)
-    ? slug ?? decorator
+    ? (slug ?? decorator)
     : null;
   if (
     normalizedDecorator &&
diff --git a/packages/react/src/components/Heading/index.tsx b/packages/react/src/components/Heading/index.tsx
index 4c0dea11580a..2effad430b43 100644
--- a/packages/react/src/components/Heading/index.tsx
+++ b/packages/react/src/components/Heading/index.tsx
@@ -23,7 +23,7 @@ type SectionProps<E extends ElementType> = PolymorphicProps<
 >;
 
 export const Section = React.forwardRef(function Section<
-  E extends ElementType = 'section'
+  E extends ElementType = 'section',
 >(
   {
     as: BaseComponent = 'section' as E,
diff --git a/packages/react/src/components/Layer/index.tsx b/packages/react/src/components/Layer/index.tsx
index ac514a0dd8b8..886a079f10d9 100644
--- a/packages/react/src/components/Layer/index.tsx
+++ b/packages/react/src/components/Layer/index.tsx
@@ -56,7 +56,7 @@ export interface LayerComponent {
 }
 
 const LayerRenderFunction = React.forwardRef(function Layer<
-  T extends React.ElementType
+  T extends React.ElementType,
 >(
   {
     as = 'div' as T,
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
index 8ce54dadf2b3..a61fa77b9518 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -310,7 +310,7 @@ export interface FilterableMultiSelectProps<ItemType>
 }
 
 const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
-  ItemType
+  ItemType,
 >(
   {
     autoAlign = false,
diff --git a/packages/react/src/components/NumberInput/NumberInput.tsx b/packages/react/src/components/NumberInput/NumberInput.tsx
index e75142a68a93..a966e2a13b68 100644
--- a/packages/react/src/components/NumberInput/NumberInput.tsx
+++ b/packages/react/src/components/NumberInput/NumberInput.tsx
@@ -387,7 +387,7 @@ const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
 
     // AILabel always size `mini`
     let normalizedDecorator = React.isValidElement(slug ?? decorator)
-      ? slug ?? decorator
+      ? (slug ?? decorator)
       : null;
     if (
       normalizedDecorator &&
diff --git a/packages/react/src/components/RadioButton/RadioButton.tsx b/packages/react/src/components/RadioButton/RadioButton.tsx
index 1244b7ddb84d..e054451dff1d 100644
--- a/packages/react/src/components/RadioButton/RadioButton.tsx
+++ b/packages/react/src/components/RadioButton/RadioButton.tsx
@@ -152,7 +152,7 @@ const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
     const inputRef = useRef<HTMLInputElement>(null);
 
     let normalizedDecorator = React.isValidElement(slug ?? decorator)
-      ? slug ?? decorator
+      ? (slug ?? decorator)
       : null;
     if (
       normalizedDecorator &&
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
index 951450c4b03d..8f85542c4bf3 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.tsx
@@ -249,7 +249,7 @@ const RadioButtonGroup = React.forwardRef(
 
     // AILabel is always size `mini`
     let normalizedDecorator = React.isValidElement(slug ?? decorator)
-      ? slug ?? decorator
+      ? (slug ?? decorator)
       : null;
     if (
       normalizedDecorator &&
diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx
index 25b2359f1cf6..eb0af38a0a04 100644
--- a/packages/react/src/components/Search/Search.tsx
+++ b/packages/react/src/components/Search/Search.tsx
@@ -240,8 +240,8 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(function Search(
           onExpand && isExpanded
             ? true
             : onExpand && !isExpanded
-            ? false
-            : undefined
+              ? false
+              : undefined
         }
         aria-controls={onExpand ? uniqueId : undefined}>
         <CustomSearchIcon icon={renderIcon} />
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
index c6a9f0cc3e4a..a66d44d45dd2 100644
--- a/packages/react/src/components/Slider/Slider.tsx
+++ b/packages/react/src/components/Slider/Slider.tsx
@@ -1606,8 +1606,8 @@ class Slider extends PureComponent<SliderProps> {
                       twoHandles
                         ? ariaLabelInputUpper
                         : ariaLabelInput
-                        ? ariaLabelInput
-                        : undefined
+                          ? ariaLabelInput
+                          : undefined
                     }
                     disabled={disabled}
                     required={required}
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 7112d1a7bad0..76c96aede800 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -71,36 +71,35 @@ export interface StackProps extends React.HTMLAttributes<HTMLElement> {
  * - https://paste.twilio.design/layout/stack/
  * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
  */
-const Stack = React.forwardRef<React.ReactNode, StackProps>(function Stack(
-  props,
-  ref
-) {
-  const {
-    as: BaseComponent = 'div',
-    children,
-    className: customClassName,
-    gap,
-    orientation = 'vertical',
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const className = cx(customClassName, {
-    [`${prefix}--stack-${orientation}`]: true,
-    [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number',
-  });
-  const style = {};
-
-  if (typeof gap === 'string') {
-    style[`--${prefix}-stack-gap`] = gap;
+const Stack = React.forwardRef<React.ReactNode, StackProps>(
+  function Stack(props, ref) {
+    const {
+      as: BaseComponent = 'div',
+      children,
+      className: customClassName,
+      gap,
+      orientation = 'vertical',
+      ...rest
+    } = props;
+    const prefix = usePrefix();
+    const className = cx(customClassName, {
+      [`${prefix}--stack-${orientation}`]: true,
+      [`${prefix}--stack-scale-${gap}`]: typeof gap === 'number',
+    });
+    const style = {};
+
+    if (typeof gap === 'string') {
+      style[`--${prefix}-stack-gap`] = gap;
+    }
+
+    return (
+      // eslint-disable-next-line react/forbid-component-props
+      <BaseComponent {...rest} ref={ref} className={className} style={style}>
+        {children}
+      </BaseComponent>
+    );
   }
-
-  return (
-    // eslint-disable-next-line react/forbid-component-props
-    <BaseComponent {...rest} ref={ref} className={className} style={style}>
-      {children}
-    </BaseComponent>
-  );
-});
+);
 
 Stack.propTypes = {
   /**
diff --git a/packages/react/src/components/Stack/VStack.tsx b/packages/react/src/components/Stack/VStack.tsx
index 4a804d738e2c..e0ebb045e05d 100644
--- a/packages/react/src/components/Stack/VStack.tsx
+++ b/packages/react/src/components/Stack/VStack.tsx
@@ -9,11 +9,10 @@ import React from 'react';
 
 import { Stack, StackProps } from './Stack';
 
-const VStack = React.forwardRef<React.ReactNode, StackProps>(function VStack(
-  props,
-  ref
-) {
-  return <Stack {...props} ref={ref} orientation="vertical" />;
-});
+const VStack = React.forwardRef<React.ReactNode, StackProps>(
+  function VStack(props, ref) {
+    return <Stack {...props} ref={ref} orientation="vertical" />;
+  }
+);
 
 export { VStack };
diff --git a/packages/react/src/components/TextArea/TextArea.tsx b/packages/react/src/components/TextArea/TextArea.tsx
index 43ffcfdac030..7e2a13e1e23d 100644
--- a/packages/react/src/components/TextArea/TextArea.tsx
+++ b/packages/react/src/components/TextArea/TextArea.tsx
@@ -476,7 +476,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
 
   // AILabel is always size `mini`
   let normalizedDecorator = React.isValidElement(slug ?? decorator)
-    ? slug ?? decorator
+    ? (slug ?? decorator)
     : null;
   if (
     normalizedDecorator &&
diff --git a/packages/react/src/components/TextInput/TextInput.tsx b/packages/react/src/components/TextInput/TextInput.tsx
index 18a6e60901d0..f6551c83bd4f 100644
--- a/packages/react/src/components/TextInput/TextInput.tsx
+++ b/packages/react/src/components/TextInput/TextInput.tsx
@@ -353,7 +353,7 @@ const TextInput = React.forwardRef(function TextInput(
 
   // AILabel is always size `mini`
   let normalizedDecorator = React.isValidElement(slug ?? decorator)
-    ? slug ?? decorator
+    ? (slug ?? decorator)
     : null;
   if (
     normalizedDecorator &&
diff --git a/packages/react/src/components/Toggletip/index.tsx b/packages/react/src/components/Toggletip/index.tsx
index 57a1146a38b0..75091baad498 100644
--- a/packages/react/src/components/Toggletip/index.tsx
+++ b/packages/react/src/components/Toggletip/index.tsx
@@ -265,7 +265,7 @@ export type ToggleTipButtonProps<T extends React.ElementType> =
  * clicks and keyboard interactions.
  */
 export const ToggletipButton = React.forwardRef(function ToggletipButton<
-  T extends React.ElementType
+  T extends React.ElementType,
 >(
   {
     children,
diff --git a/packages/react/src/components/UIShell/SideNavLink.tsx b/packages/react/src/components/UIShell/SideNavLink.tsx
index 104f94a06372..b8c4a4863290 100644
--- a/packages/react/src/components/UIShell/SideNavLink.tsx
+++ b/packages/react/src/components/UIShell/SideNavLink.tsx
@@ -78,7 +78,7 @@ export interface SideNavLinkComponent {
 }
 
 const SideNavLink: SideNavLinkComponent = forwardRef(function SideNavLink<
-  E extends ElementType = 'a'
+  E extends ElementType = 'a',
 >(
   {
     children,
diff --git a/packages/react/src/components/UIShell/Switcher.tsx b/packages/react/src/components/UIShell/Switcher.tsx
index 933c7374a62a..9efb642aba53 100644
--- a/packages/react/src/components/UIShell/Switcher.tsx
+++ b/packages/react/src/components/UIShell/Switcher.tsx
@@ -46,102 +46,104 @@ interface SwitcherWithAriaLabelledBy extends BaseSwitcherProps {
 
 type SwitcherProps = SwitcherWithAriaLabel | SwitcherWithAriaLabelledBy;
 
-const Switcher = forwardRef<HTMLUListElement, SwitcherProps>(function Switcher(
-  props,
-  forwardRef
-) {
-  const switcherRef = useRef<HTMLUListElement>(null);
-  const ref = useMergedRefs<HTMLUListElement | null>([switcherRef, forwardRef]);
-
-  const prefix = usePrefix();
-  const {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    children,
-    expanded,
-  } = props;
-
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-  };
-
-  const className = cx(`${prefix}--switcher`, {
-    [customClassName || '']: !!customClassName,
-  });
-
-  const handleSwitcherItemFocus = ({
-    currentIndex,
-    direction,
-  }: {
-    currentIndex: number;
-    direction: number;
-  }) => {
-    const enabledIndices = React.Children.toArray(children).reduce<number[]>(
-      (acc, curr, i) => {
-        if (Object.keys((curr as any).props).length !== 0) {
-          acc.push(i);
+const Switcher = forwardRef<HTMLUListElement, SwitcherProps>(
+  function Switcher(props, forwardRef) {
+    const switcherRef = useRef<HTMLUListElement>(null);
+    const ref = useMergedRefs<HTMLUListElement | null>([
+      switcherRef,
+      forwardRef,
+    ]);
+
+    const prefix = usePrefix();
+    const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      className: customClassName,
+      children,
+      expanded,
+    } = props;
+
+    const accessibilityLabel = {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+    };
+
+    const className = cx(`${prefix}--switcher`, {
+      [customClassName || '']: !!customClassName,
+    });
+
+    const handleSwitcherItemFocus = ({
+      currentIndex,
+      direction,
+    }: {
+      currentIndex: number;
+      direction: number;
+    }) => {
+      const enabledIndices = React.Children.toArray(children).reduce<number[]>(
+        (acc, curr, i) => {
+          if (Object.keys((curr as any).props).length !== 0) {
+            acc.push(i);
+          }
+          return acc;
+        },
+        []
+      );
+
+      const nextValidIndex = (() => {
+        const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+
+        switch (enabledIndices[nextIndex]) {
+          case undefined:
+            if (direction === -1) {
+              return enabledIndices[enabledIndices.length - 1];
+            }
+            return 0;
+          default:
+            return enabledIndices[nextIndex];
         }
-        return acc;
-      },
-      []
-    );
+      })();
 
-    const nextValidIndex = (() => {
-      const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
-
-      switch (enabledIndices[nextIndex]) {
-        case undefined:
-          if (direction === -1) {
-            return enabledIndices[enabledIndices.length - 1];
-          }
-          return 0;
-        default:
-          return enabledIndices[nextIndex];
+      const switcherItem = switcherRef.current?.children[nextValidIndex]
+        ?.children[0] as HTMLElement;
+      if (switcherItem) {
+        switcherItem.focus();
       }
-    })();
-
-    const switcherItem = switcherRef.current?.children[nextValidIndex]
-      ?.children[0] as HTMLElement;
-    if (switcherItem) {
-      switcherItem.focus();
-    }
-  };
-
-  const childrenWithProps = React.Children.toArray(children).map(
-    (child, index) => {
-      // only setup click handlers if onChange event is passed
-      if (
-        React.isValidElement(child) &&
-        child.type &&
-        getDisplayName(child.type) === 'Switcher'
-      ) {
+    };
+
+    const childrenWithProps = React.Children.toArray(children).map(
+      (child, index) => {
+        // only setup click handlers if onChange event is passed
+        if (
+          React.isValidElement(child) &&
+          child.type &&
+          getDisplayName(child.type) === 'Switcher'
+        ) {
+          return React.cloneElement(child as React.ReactElement<any>, {
+            handleSwitcherItemFocus,
+            index,
+            key: index,
+            expanded,
+          });
+        }
+
         return React.cloneElement(child as React.ReactElement<any>, {
-          handleSwitcherItemFocus,
           index,
           key: index,
           expanded,
         });
       }
+    );
 
-      return React.cloneElement(child as React.ReactElement<any>, {
-        index,
-        key: index,
-        expanded,
-      });
-    }
-  );
-
-  return (
-    <ul
-      ref={ref as React.RefObject<HTMLUListElement>}
-      className={className}
-      {...accessibilityLabel}>
-      {childrenWithProps}
-    </ul>
-  );
-});
+    return (
+      <ul
+        ref={ref as React.RefObject<HTMLUListElement>}
+        className={className}
+        {...accessibilityLabel}>
+        {childrenWithProps}
+      </ul>
+    );
+  }
+);
 
 Switcher.displayName = 'Switcher';
 Switcher.propTypes = {
diff --git a/packages/react/src/internal/__tests__/wrapFocus-test.js b/packages/react/src/internal/__tests__/wrapFocus-test.js
index 43c38c21eee1..5f683a3db328 100644
--- a/packages/react/src/internal/__tests__/wrapFocus-test.js
+++ b/packages/react/src/internal/__tests__/wrapFocus-test.js
@@ -121,9 +121,8 @@ describe('wrapFocus', () => {
   });
 
   it('uses inner modal node as a escape hatch for focusing for forward focus-wrap', () => {
-    node.querySelector(
-      '#inner-modal'
-    ).innerHTML = `<div id="dummy-old-active-node"></div>`;
+    node.querySelector('#inner-modal').innerHTML =
+      `<div id="dummy-old-active-node"></div>`;
     wrapFocus({
       bodyNode: node.querySelector('#inner-modal'),
       startSentinelNode: node.querySelector('#start-sentinel'),
@@ -135,9 +134,8 @@ describe('wrapFocus', () => {
   });
 
   it('uses inner modal node as a escape hatch for focusing for reverse focus-wrap', () => {
-    node.querySelector(
-      '#inner-modal'
-    ).innerHTML = `<div id="dummy-old-active-node"></div>`;
+    node.querySelector('#inner-modal').innerHTML =
+      `<div id="dummy-old-active-node"></div>`;
     wrapFocus({
       bodyNode: node.querySelector('#inner-modal'),
       startSentinelNode: node.querySelector('#start-sentinel'),
diff --git a/packages/react/src/types/common.ts b/packages/react/src/types/common.ts
index 0a173a685159..c73c3fbddb67 100644
--- a/packages/react/src/types/common.ts
+++ b/packages/react/src/types/common.ts
@@ -33,5 +33,5 @@ export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
  */
 export type InternationalProps<
   MID = string,
-  ARGS = Record<string, unknown>
+  ARGS = Record<string, unknown>,
 > = TranslateWithId<MID, ARGS>;
diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 163a26880cb6..c5cb9e7fc132 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -109,9 +109,12 @@ $content-padding: 0 0 0 $spacing-05 !default;
       position: relative;
       z-index: 2;
       box-shadow:
-        /* Border top */ 0 -1px 0 0 $focus,
-        inset 0 1px 0 0 $focus, /* Border right */ inset 2px 0 0 0 $focus,
-        /* Border bottom */ 0 1px 0 0 $focus, inset 0 -1px 0 0 $focus,
+        /* Border top */
+        0 -1px 0 0 $focus,
+        inset 0 1px 0 0 $focus,
+        /* Border right */ inset 2px 0 0 0 $focus,
+        /* Border bottom */ 0 1px 0 0 $focus,
+        inset 0 -1px 0 0 $focus,
         /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
     }
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
index 0a14e913ce29..95d31f5e7773 100644
--- a/packages/styles/scss/components/button/_button.scss
+++ b/packages/styles/scss/components/button/_button.scss
@@ -322,8 +322,9 @@
 
     padding-block: min(
       calc(
-        (layout.size('height') - var(--temp-expressive-1lh)) / 2 -
-          convert.to-rem(1px)
+        (layout.size('height') - var(--temp-expressive-1lh)) / 2 - convert.to-rem(
+            1px
+          )
       ),
       var(--temp-padding-block-max)
     );
diff --git a/packages/styles/scss/components/button/_mixins.scss b/packages/styles/scss/components/button/_mixins.scss
index 638ed292a53e..28cf2bac3d05 100644
--- a/packages/styles/scss/components/button/_mixins.scss
+++ b/packages/styles/scss/components/button/_mixins.scss
@@ -63,12 +63,14 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
   );
   padding-inline: calc(layout.density('padding-inline') - convert.to-rem(1px))
     calc(
-      layout.density('padding-inline') * 3 + convert.to-rem(16px) -
-        convert.to-rem(1px)
+      layout.density('padding-inline') * 3 + convert.to-rem(16px) - convert.to-rem(
+          1px
+        )
     );
   text-align: start;
   text-decoration: none;
-  transition: background $duration-fast-01 motion(entrance, productive),
+  transition:
+    background $duration-fast-01 motion(entrance, productive),
     box-shadow $duration-fast-01 motion(entrance, productive),
     border-color $duration-fast-01 motion(entrance, productive),
     outline $duration-fast-01 motion(entrance, productive);
@@ -127,7 +129,8 @@ $button-focus-color: custom-property.get-var('button-focus-color', $focus);
 
   &:focus {
     border-color: $button-focus-color;
-    box-shadow: inset 0 0 0 $button-outline-width $button-focus-color,
+    box-shadow:
+      inset 0 0 0 $button-outline-width $button-focus-color,
       inset 0 0 0 $button-border-width $background;
   }
 
diff --git a/packages/styles/scss/components/content-switcher/_content-switcher.scss b/packages/styles/scss/components/content-switcher/_content-switcher.scss
index 91ab2d3632eb..edf11293fb85 100644
--- a/packages/styles/scss/components/content-switcher/_content-switcher.scss
+++ b/packages/styles/scss/components/content-switcher/_content-switcher.scss
@@ -72,7 +72,9 @@
     &:focus {
       z-index: 3;
       border-color: $focus;
-      box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 3px $focus-inset;
+      box-shadow:
+        inset 0 0 0 2px $focus,
+        inset 0 0 0 3px $focus-inset;
     }
 
     &:focus::after {
diff --git a/packages/styles/scss/components/data-table/action/_data-table-action.scss b/packages/styles/scss/components/data-table/action/_data-table-action.scss
index 0c3a92b389c9..fb22a986373e 100644
--- a/packages/styles/scss/components/data-table/action/_data-table-action.scss
+++ b/packages/styles/scss/components/data-table/action/_data-table-action.scss
@@ -40,7 +40,8 @@
     block-size: $spacing-09;
     inline-size: 100%;
     transform: translate3d(0, 0, 0);
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       clip-path $duration-fast-02 motion(standard, productive);
   }
 
@@ -75,7 +76,8 @@
     box-shadow: none;
     cursor: pointer;
     inline-size: $spacing-09;
-    transition: width $transition-expansion $standard-easing,
+    transition:
+      width $transition-expansion $standard-easing,
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:hover {
@@ -377,7 +379,8 @@
   .#{$prefix}--batch-actions--active ~ .#{$prefix}--toolbar-content {
     clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
     transform: translate3d(0, 48px, 0);
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       clip-path $duration-fast-02 motion(standard, productive);
   }
 
@@ -396,7 +399,8 @@
     opacity: 0;
     pointer-events: none;
     transform: translate3d(0, 48px, 0);
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       clip-path $duration-fast-02 motion(standard, productive),
       opacity $duration-fast-02 motion(standard, productive);
     will-change: transform;
diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
index 690139c6cdfb..0030fb871966 100644
--- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
+++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss
@@ -50,7 +50,8 @@
     border: 0;
     background-color: $layer-hover;
     padding-block: 0;
-    transition: padding $duration-moderate-01 motion(standard, productive),
+    transition:
+      padding $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
   }
 
@@ -64,15 +65,16 @@
 
   //child row visible
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] {
-    transition: height $duration-moderate-01 motion(standard, productive),
+    transition:
+      height $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
   }
 
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row + tr[data-child-row] td {
     border-block-end: 1px solid $border-subtle;
     padding-inline-start: 3.5rem;
-    transition: padding-bottom $duration-moderate-01
-        motion(standard, productive),
+    transition:
+      padding-bottom $duration-moderate-01 motion(standard, productive),
       transform $duration-moderate-01 motion(standard, productive);
   }
 
@@ -128,7 +130,8 @@
   tr.#{$prefix}--parent-row:not(.#{$prefix}--expandable-row) td,
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row td,
   tr.#{$prefix}--parent-row.#{$prefix}--expandable-row {
-    transition: height $duration-moderate-01 motion(standard, productive),
+    transition:
+      height $duration-moderate-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive),
       border-color $duration-fast-01 motion(standard, productive);
   }
@@ -352,7 +355,8 @@
     tr.#{$prefix}--parent-row.#{$prefix}--expandable-row
     + tr[data-child-row]
     td {
-    transition: transform $duration-moderate-01 motion(standard, productive),
+    transition:
+      transform $duration-moderate-01 motion(standard, productive),
       border-bottom $duration-fast-01 motion(standard, productive),
       border-top $duration-fast-01 motion(standard, productive);
   }
diff --git a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss
index 9708ad749081..bbd6007a610f 100644
--- a/packages/styles/scss/components/data-table/sort/_data-table-sort.scss
+++ b/packages/styles/scss/components/data-table/sort/_data-table-sort.scss
@@ -51,7 +51,8 @@
     min-block-size: 100%;
     padding-inline-start: $spacing-05;
     text-align: start;
-    transition: background-color $duration-fast-01 motion(entrance, productive),
+    transition:
+      background-color $duration-fast-01 motion(entrance, productive),
       outline $duration-fast-01 motion(entrance, productive);
   }
 
diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss
index dd6942545179..9b8960192e12 100644
--- a/packages/styles/scss/components/date-picker/_flatpickr.scss
+++ b/packages/styles/scss/components/date-picker/_flatpickr.scss
@@ -406,7 +406,8 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeft {
-    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
@@ -416,18 +417,21 @@
   }
 
   .flatpickr-calendar.animate .dayContainer.slideLeftNew {
-    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-left 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRight {
-    animation: fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-out 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-right 400ms cubic-bezier(0.23, 1, 0.32, 1);
     transform: translate3d(100%, 0, 0);
   }
 
   .flatpickr-calendar.animate .dayContainer.slideRightNew {
-    animation: fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
+    animation:
+      fp-fade-in 400ms cubic-bezier(0.23, 1, 0.32, 1),
       fp-slide-right-new 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
 
diff --git a/packages/styles/scss/components/dialog/_dialog.scss b/packages/styles/scss/components/dialog/_dialog.scss
index a80c5a249edf..df0c90aa7ef5 100644
--- a/packages/styles/scss/components/dialog/_dialog.scss
+++ b/packages/styles/scss/components/dialog/_dialog.scss
@@ -39,7 +39,8 @@
     /** opening and closing is used in as allow-discrete is not currently supported wide enough
      * https://caniuse.com/mdn-css_properties_display_is_transitionable
      */
-    transition: opacity $duration-moderate-02 motion(exit, expressive),
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
       transform $duration-moderate-02 motion(exit, expressive),
       overlay $duration-moderate-02 motion(exit, expressive) allow-discrete,
       display $duration-moderate-02 motion(exit, expressive) allow-discrete;
@@ -65,7 +66,8 @@
       opacity: 1;
       transform: translateY(0);
 
-      transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      transition:
+        opacity $duration-moderate-02 motion(entrance, expressive),
         transform $duration-moderate-02 motion(entrance, expressive),
         overlay $duration-moderate-02 motion(entrance, expressive)
           allow-discrete,
@@ -115,8 +117,8 @@
     /* opening and closing is used in as allow-discrete is not currently supported wide enough
      * https://caniuse.com/mdn-css_properties_display_is_transitionable
      */
-    transition: background-color $duration-moderate-02
-        motion(entrance, expressive),
+    transition:
+      background-color $duration-moderate-02 motion(entrance, expressive),
       opacity $duration-moderate-02 motion(entrance, expressive);
 
     @media (prefers-reduced-motion) {
@@ -127,7 +129,8 @@
   .#{$prefix}--dialog[open]::backdrop {
     opacity: 1;
 
-    transition: background-color $duration-moderate-02 motion(exit, expressive),
+    transition:
+      background-color $duration-moderate-02 motion(exit, expressive),
       opacity $duration-moderate-02 motion(exit, expressive);
 
     @media (prefers-reduced-motion) {
diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss
index 636d5a59e7ec..5e484bb47a61 100644
--- a/packages/styles/scss/components/dropdown/_dropdown.scss
+++ b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -219,7 +219,8 @@
   .#{$prefix}--dropdown-item {
     position: relative;
     opacity: 0;
-    transition: visibility $duration-fast-01 motion(standard, productive),
+    transition:
+      visibility $duration-fast-01 motion(standard, productive),
       opacity $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
     visibility: inherit;
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index f71e33baccae..6224b9503521 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -27,7 +27,8 @@
     position: relative;
     block-size: 100%;
     inline-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
index 1b3af5f8affb..5f286ec85f7c 100644
--- a/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
+++ b/packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss
@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
index e63880a39fd5..4fbb4be18a76 100644
--- a/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
+++ b/packages/styles/scss/components/fluid-number-input/_fluid-number-input.scss
@@ -84,7 +84,9 @@
     input[type='number']:focus
     ~ .#{$prefix}--number__controls
     .#{$prefix}--number__control-btn:last-of-type {
-    box-shadow: inset 0 -1px $focus, inset -2px 0 $focus;
+    box-shadow:
+      inset 0 -1px $focus,
+      inset -2px 0 $focus;
   }
 
   .#{$prefix}--number-input--fluid
diff --git a/packages/styles/scss/components/fluid-select/_fluid-select.scss b/packages/styles/scss/components/fluid-select/_fluid-select.scss
index 9a7376405b6c..a2e8e7ca7a75 100644
--- a/packages/styles/scss/components/fluid-select/_fluid-select.scss
+++ b/packages/styles/scss/components/fluid-select/_fluid-select.scss
@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
index 0daccfd82724..1a17104de495 100644
--- a/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
+++ b/packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss
@@ -21,7 +21,8 @@
     position: relative;
     background: $field;
     block-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
index b6218557030f..aee15128c77a 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -677,7 +677,8 @@ $list-box-menu-width: convert.to-rem(300px);
     padding-inline-end: $spacing-06;
     text-decoration: none;
     text-overflow: ellipsis;
-    transition: border-color $duration-fast-01 motion(standard, productive),
+    transition:
+      border-color $duration-fast-01 motion(standard, productive),
       color $duration-fast-01 motion(standard, productive);
     white-space: nowrap;
 
diff --git a/packages/styles/scss/components/loading/_animation.scss b/packages/styles/scss/components/loading/_animation.scss
index f29e9936d2ae..02f26d7a9c50 100644
--- a/packages/styles/scss/components/loading/_animation.scss
+++ b/packages/styles/scss/components/loading/_animation.scss
@@ -30,7 +30,8 @@
 
 @mixin stop {
   // Animate the container
-  animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
+  animation:
+    #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
     #{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards;
 
   // Animate the stroke
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index 401e6b324113..422b52a825c6 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -37,13 +37,15 @@
     inset-block-start: 0;
     inset-inline-start: 0;
     opacity: 0;
-    transition: opacity $duration-moderate-02 motion(exit, expressive),
+    transition:
+      opacity $duration-moderate-02 motion(exit, expressive),
       visibility 0ms linear $duration-moderate-02;
     visibility: hidden;
 
     &.is-visible {
       opacity: 1;
-      transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      transition:
+        opacity $duration-moderate-02 motion(entrance, expressive),
         visibility 0ms linear;
       visibility: inherit;
 
@@ -380,7 +382,8 @@
 
     border: 1px solid transparent;
     background-color: $layer;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }
 
@@ -392,7 +395,8 @@
     .#{$prefix}--modal-container:has(.#{$prefix}--modal-footer) {
     @include ai-popover-gradient('default', 64px, 'layer');
 
-    box-shadow: inset 0 -80px 0 -16px $layer,
+    box-shadow:
+      inset 0 -80px 0 -16px $layer,
       inset 0 -160px 70px -65px $ai-inner-shadow,
       0 24px 40px -24px $ai-drop-shadow;
   }
diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss
index 6ab184b6e6bd..757a8ccb1cc6 100644
--- a/packages/styles/scss/components/notification/_actionable-notification.scss
+++ b/packages/styles/scss/components/notification/_actionable-notification.scss
@@ -373,7 +373,8 @@
     .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--tertiary:focus {
     border-color: $focus-inverse;
     background-color: $notification-action-tertiary-inverse;
-    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+    box-shadow:
+      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
       inset 0 0 0 button-vars.$button-border-width $background-inverse;
     color: $notification-action-tertiary-inverse-text;
   }
@@ -439,7 +440,8 @@
     inset-inline-end: 0;
     max-inline-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
 
     &:focus {
diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
index a80c47623f7a..1d18b1e2d42f 100644
--- a/packages/styles/scss/components/notification/_inline-notification.scss
+++ b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -277,7 +277,8 @@
     inset-inline-end: 0;
     max-inline-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
 
     &:focus {
diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
index 4af3a5a20de2..1ed3c69ecbda 100644
--- a/packages/styles/scss/components/notification/_toast-notification.scss
+++ b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -165,7 +165,9 @@
     margin-inline-start: auto;
     min-block-size: convert.to-rem(48px);
     min-inline-size: convert.to-rem(48px);
-    transition: outline $transition-base, background-color $transition-base;
+    transition:
+      outline $transition-base,
+      background-color $transition-base;
 
     &:focus {
       outline: 2px solid $focus-inverse;
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index 0099fd63721f..98ef203865ba 100644
--- a/packages/styles/scss/components/number-input/_number-input.scss
+++ b/packages/styles/scss/components/number-input/_number-input.scss
@@ -60,7 +60,8 @@
     inline-size: 100%;
     min-inline-size: 9.375rem;
     padding-inline: $spacing-05 $spacing-12;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     &:focus {
diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
index 30c5868b8686..f37d9e21e785 100644
--- a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
+++ b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss
@@ -40,7 +40,8 @@
     cursor: pointer;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(40px);
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive);
 
     &:focus {
@@ -272,7 +273,8 @@
     inline-size: 100%;
     max-inline-size: 11.25rem;
     text-align: start;
-    transition: outline $duration-fast-02 motion(entrance, productive),
+    transition:
+      outline $duration-fast-02 motion(entrance, productive),
       background-color $duration-fast-02 motion(entrance, productive),
       color $duration-fast-02 motion(entrance, productive);
 
diff --git a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss
index e460a701bd66..b0cc7448c0d4 100644
--- a/packages/styles/scss/components/pagination-nav/_pagination-nav.scss
+++ b/packages/styles/scss/components/pagination-nav/_pagination-nav.scss
@@ -88,7 +88,8 @@
     outline: 0;
     text-align: center;
     text-decoration: none;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     user-select: none;
 
diff --git a/packages/styles/scss/components/pagination/_pagination.scss b/packages/styles/scss/components/pagination/_pagination.scss
index fd7050625e47..f431dfd9da7c 100644
--- a/packages/styles/scss/components/pagination/_pagination.scss
+++ b/packages/styles/scss/components/pagination/_pagination.scss
@@ -220,7 +220,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/pagination/_unstable_pagination.scss b/packages/styles/scss/components/pagination/_unstable_pagination.scss
index 5083d39b9508..5cacb8196ea8 100644
--- a/packages/styles/scss/components/pagination/_unstable_pagination.scss
+++ b/packages/styles/scss/components/pagination/_unstable_pagination.scss
@@ -85,7 +85,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     min-block-size: convert.to-rem(32px);
-    transition: outline $duration-fast-02 motion(standard, productive),
+    transition:
+      outline $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
index 4e8ad2e31c8a..d88c5dcc146e 100644
--- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
+++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss
@@ -91,7 +91,8 @@ $progress-indicator-bar-width: 1px inset transparent !default;
     line-height: 1.45;
     max-inline-size: convert.to-rem(88px);
     text-overflow: ellipsis;
-    transition: box-shadow $duration-fast-02 motion(standard, productive),
+    transition:
+      box-shadow $duration-fast-02 motion(standard, productive),
       color $duration-fast-02 motion(standard, productive);
     white-space: nowrap;
 
diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss
index 69e82074c44c..1fb95facecbb 100644
--- a/packages/styles/scss/components/search/_search.scss
+++ b/packages/styles/scss/components/search/_search.scss
@@ -54,7 +54,8 @@
 
     inline-size: 100%;
     text-overflow: ellipsis;
-    transition: background-color $duration-fast-02 motion(standard, productive),
+    transition:
+      background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive);
 
     &:focus {
@@ -199,7 +200,8 @@
     fill: $icon-primary;
     inline-size: convert.to-rem(40px);
     opacity: 1;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       background-color $duration-fast-02 motion(standard, productive),
       outline $duration-fast-02 motion(standard, productive),
       border $duration-fast-02 motion(standard, productive);
@@ -324,7 +326,8 @@
   .#{$prefix}--search--expandable .#{$prefix}--search-input {
     padding: 0;
     inline-size: 0;
-    transition: padding $duration-fast-01 motion(standard, productive),
+    transition:
+      padding $duration-fast-01 motion(standard, productive),
       width 0s linear $duration-fast-01;
 
     &::placeholder {
diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss
index 252ed64fa78e..065ba7434394 100644
--- a/packages/styles/scss/components/slider/_slider.scss
+++ b/packages/styles/scss/components/slider/_slider.scss
@@ -187,10 +187,13 @@
     position: absolute;
     border-radius: 50%;
     background: $layer-selected-inverse;
-    box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
+    box-shadow:
+      inset 0 0 0 1px transparent,
+      inset 0 0 0 2px transparent;
     inset: 0;
     outline: none;
-    transition: transform $duration-fast-02 motion(standard, productive),
+    transition:
+      transform $duration-fast-02 motion(standard, productive),
       background $duration-fast-02 motion(standard, productive),
       box-shadow $duration-fast-02 motion(standard, productive);
 
@@ -201,7 +204,9 @@
 
     &:focus {
       background-color: $interactive;
-      box-shadow: inset 0 0 0 2px $interactive, inset 0 0 0 3px $layer;
+      box-shadow:
+        inset 0 0 0 2px $interactive,
+        inset 0 0 0 3px $layer;
       // 20px / 14px = 1.4286
       transform: scale(1.4286);
     }
diff --git a/packages/styles/scss/components/slug/_slug.scss b/packages/styles/scss/components/slug/_slug.scss
index 542e58315b56..4b74f7dd6f9c 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -79,7 +79,8 @@ $sizes: (
     color: $text-primary;
     font-weight: 600;
     outline: none;
-    transition: color $duration-fast-01 motion(entrance, productive),
+    transition:
+      color $duration-fast-01 motion(entrance, productive),
       border-color $duration-fast-01 motion(entrance, productive),
       box-shadow $duration-fast-01 motion(entrance, productive),
       background $duration-fast-01 motion(entrance, productive);
@@ -122,7 +123,9 @@ $sizes: (
   .#{$prefix}--ai-label .#{$prefix}--ai-label__button:hover:active,
   .#{$prefix}--slug .#{$prefix}--slug__button:hover:active {
     background: $border-inverse;
-    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $focus-inset;
+    box-shadow:
+      inset 0 0 0 1px $focus,
+      inset 0 0 0 2px $focus-inset;
     color: $text-inverse;
   }
 
@@ -220,7 +223,8 @@ $sizes: (
     inset-inline-start: 0;
     opacity: 1;
     transform: translateY(-50%);
-    transition: background $duration-fast-01 motion(entrance, productive),
+    transition:
+      background $duration-fast-01 motion(entrance, productive),
       box-shadow $duration-fast-01 motion(entrance, productive);
   }
 
@@ -308,7 +312,8 @@ $sizes: (
     border: 1px solid transparent;
     border-radius: convert.to-rem(8px);
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 44px 60px -24px $ai-popover-shadow-outer-01,
       -56px 64px 64px -24px $ai-popover-shadow-outer-02;
     color: $text-primary;
@@ -1076,7 +1081,9 @@ $sizes: (
   .#{$prefix}--ai-label .#{$prefix}--ai-label-actions .#{$prefix}--btn:focus,
   .#{$prefix}--slug .#{$prefix}--slug-actions .#{$prefix}--btn:focus {
     border-color: $focus;
-    box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
+    box-shadow:
+      inset 0 0 0 1px $focus,
+      inset 0 0 0 2px $background;
   }
 
   .#{$prefix}--ai-label .#{$prefix}--ai-label-actions .#{$prefix}--btn--primary,
diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
index bff584bca30f..dbe962d3b801 100644
--- a/packages/styles/scss/components/tabs/_tabs.scss
+++ b/packages/styles/scss/components/tabs/_tabs.scss
@@ -353,7 +353,8 @@
     }
 
     .#{$prefix}--tabs__nav-item .#{$prefix}--tabs__nav-link {
-      transition: color $duration-fast-01 motion(standard, productive),
+      transition:
+        color $duration-fast-01 motion(standard, productive),
         border-bottom-color $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
     }
@@ -484,7 +485,8 @@
       text-align: start;
       text-decoration: none;
       text-overflow: ellipsis;
-      transition: border $duration-fast-01 motion(standard, productive),
+      transition:
+        border $duration-fast-01 motion(standard, productive),
         outline $duration-fast-01 motion(standard, productive);
       white-space: nowrap;
 
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
index f4dd987d250a..dac9ec57930c 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -311,7 +311,8 @@
     color: currentColor;
     cursor: pointer;
     inline-size: layout.size('height');
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       box-shadow $duration-fast-01 motion(standard, productive);
 
     svg {
diff --git a/packages/styles/scss/components/text-area/_text-area.scss b/packages/styles/scss/components/text-area/_text-area.scss
index e2758e39a09b..3728a3a94c12 100644
--- a/packages/styles/scss/components/text-area/_text-area.scss
+++ b/packages/styles/scss/components/text-area/_text-area.scss
@@ -40,7 +40,8 @@
 
     min-inline-size: 10rem;
     resize: vertical;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/packages/styles/scss/components/text-input/_text-input.scss
index 89f3e5830a00..a83c39d65f07 100644
--- a/packages/styles/scss/components/text-input/_text-input.scss
+++ b/packages/styles/scss/components/text-input/_text-input.scss
@@ -46,7 +46,8 @@
     font-family: inherit;
 
     inline-size: 100%;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 
     &:focus,
@@ -286,7 +287,8 @@
   .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper {
     position: relative;
     background: $field;
-    transition: background-color $duration-fast-01 motion(standard, productive),
+    transition:
+      background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
 
diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss
index dbe8eb53bade..2d6a43c7f58e 100644
--- a/packages/styles/scss/components/tile/_tile.scss
+++ b/packages/styles/scss/components/tile/_tile.scss
@@ -297,7 +297,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile-content__below-the-fold {
     display: block;
     opacity: 0;
-    transition: opacity $duration-fast-02 motion(standard, productive),
+    transition:
+      opacity $duration-fast-02 motion(standard, productive),
       visibility $duration-fast-02 motion(standard, productive);
     visibility: hidden;
   }
@@ -312,7 +313,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
     .#{$prefix}--tile-content__below-the-fold {
       opacity: 1;
-      transition: opacity $duration-fast-02 motion(standard, productive),
+      transition:
+        opacity $duration-fast-02 motion(standard, productive),
         visibility $duration-fast-02 motion(standard, productive);
       visibility: inherit;
 
@@ -432,7 +434,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 
@@ -458,7 +461,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
     @include ai-popover-gradient('hover', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
   }
 
@@ -476,7 +480,8 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
     @include ai-popover-gradient('selected', 0, 'layer');
 
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 8px 0 $ai-drop-shadow;
   }
 
diff --git a/packages/styles/scss/components/time-picker/_time-picker.scss b/packages/styles/scss/components/time-picker/_time-picker.scss
index cc751ff07b44..9f774983c8df 100644
--- a/packages/styles/scss/components/time-picker/_time-picker.scss
+++ b/packages/styles/scss/components/time-picker/_time-picker.scss
@@ -67,7 +67,8 @@
     align-items: center;
     block-size: convert.to-rem(40px);
     inline-size: 4.875rem;
-    transition: outline $duration-fast-01 motion(standard, productive),
+    transition:
+      outline $duration-fast-01 motion(standard, productive),
       background-color $duration-fast-01 motion(standard, productive);
 
     &::placeholder {
diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss
index 717c20bbe789..876dd96f1fb2 100644
--- a/packages/styles/scss/components/ui-shell/header/_header.scss
+++ b/packages/styles/scss/components/ui-shell/header/_header.scss
@@ -45,7 +45,8 @@
     border: convert.to-rem(1px) solid transparent;
     block-size: mini-units(6);
     inline-size: mini-units(6);
-    transition: background-color $duration-fast-02,
+    transition:
+      background-color $duration-fast-02,
       border-color $duration-fast-02;
     @include breakpoint-down('md') {
       min-inline-size: $spacing-09;
@@ -232,8 +233,10 @@
     line-height: 1.125rem;
     // Reset link styles and make sure the text isn't selectable
     text-decoration: none;
-    transition: background-color $duration-fast-02,
-      border-color $duration-fast-02, color $duration-fast-02;
+    transition:
+      background-color $duration-fast-02,
+      border-color $duration-fast-02,
+      color $duration-fast-02;
     user-select: none;
   }
 
@@ -387,7 +390,9 @@
   .#{$prefix}--header__menu-arrow {
     fill: $icon-secondary;
     margin-inline-start: mini-units(1);
-    transition: transform $duration-fast-02, fill $duration-fast-02;
+    transition:
+      transform $duration-fast-02,
+      fill $duration-fast-02;
   }
 
   //--------------------------------------------------------------------------
diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
index cc294db2ddc6..7cc97848936c 100644
--- a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
+++ b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss
@@ -40,7 +40,8 @@
     inset-inline-start: 0;
     max-inline-size: mini-units(32);
     // TODO: sync with motion work
-    transition: inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
+    transition:
+      inline-size 0.11s cubic-bezier(0.2, 0, 1, 0.9),
       transform 0.11s cubic-bezier(0.2, 0, 1, 0.9);
     will-change: inline-size;
   }
@@ -82,7 +83,8 @@
     inset-block-start: convert.to-rem(48px);
     inset-inline-start: 0;
     opacity: 0;
-    transition: opacity $transition-expansion $standard-easing,
+    transition:
+      opacity $transition-expansion $standard-easing,
       background-color $transition-expansion $standard-easing;
   }
 
@@ -93,7 +95,8 @@
       block-size: 100vh;
       inline-size: 100vw;
       opacity: 1;
-      transition: opacity $transition-expansion $standard-easing,
+      transition:
+        opacity $transition-expansion $standard-easing,
         background-color $transition-expansion $standard-easing;
     }
   }
@@ -211,7 +214,9 @@
     padding: 0 mini-units(2);
     block-size: mini-units(4);
     color: $text-secondary;
-    transition: color $duration-fast-02, background-color $duration-fast-02,
+    transition:
+      color $duration-fast-02,
+      background-color $duration-fast-02,
       outline $duration-fast-02;
     user-select: none;
   }
@@ -337,7 +342,9 @@
     padding: 0 mini-units(2);
     min-block-size: mini-units(4);
     text-decoration: none;
-    transition: color $duration-fast-02, background-color $duration-fast-02,
+    transition:
+      color $duration-fast-02,
+      background-color $duration-fast-02,
       outline $duration-fast-02;
   }
 
diff --git a/packages/styles/scss/utilities/_ai-gradient.scss b/packages/styles/scss/utilities/_ai-gradient.scss
index 6199d03df344..91197d242b3b 100644
--- a/packages/styles/scss/utilities/_ai-gradient.scss
+++ b/packages/styles/scss/utilities/_ai-gradient.scss
@@ -89,7 +89,8 @@
   );
 
   @if $type == 'hover' {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           theme.$ai-aura-hover-start $start,
           15%,
@@ -112,7 +113,8 @@
         )
         border-box;
   } @else if $type == 'selected' {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           theme.$ai-aura-start $start,
           15%,
@@ -126,7 +128,8 @@
       linear-gradient(to top, theme.$layer, theme.$layer)
         border-box;
   } @else {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           to top,
           $background $start,
           theme.$ai-aura-start $start,
diff --git a/packages/type/README.md b/packages/type/README.md
index da398caf375f..d6bc9d0f8e77 100644
--- a/packages/type/README.md
+++ b/packages/type/README.md
@@ -24,14 +24,14 @@ yarn add @carbon/type
 Design Language. You can use all of these features either in JavaScript or Sass.
 These features include:
 
-| Feature                       | Description                                                                                                  |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| Feature                       | Description                                                                                                   |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------- |
 | [Font face](#font-face)       | Include IBM Plex™ font faces in your application. Uses Akamai CDN                                            |
-| [Type classes](#type-classes) | Helpers to use type styles directly. Not included by default                                                 |
+| [Type classes](#type-classes) | Helpers to use type styles directly. Not included by default                                                  |
 | [Font family](#font-family)   | Defines the font stack for IBM Plex™ in your application, provides helpers for working with font definitions |
-| [Reset](#reset)               | Provides a high-level CSS Reset to use in your project                                                       |
-| [Scale](#type-scale)          | Provides the type scale. Can access the size at any given step (step 1, 2, 3, etc)                           |
-| [Styles](#type-styles)        | Provides type styles for your application (heading-01, body-long-01, etc)                                    |
+| [Reset](#reset)               | Provides a high-level CSS Reset to use in your project                                                        |
+| [Scale](#type-scale)          | Provides the type scale. Can access the size at any given step (step 1, 2, 3, etc)                            |
+| [Styles](#type-styles)        | Provides type styles for your application (heading-01, body-long-01, etc)                                     |
 
 The `@carbon/type` package enables you to use typography from the IBM Design
 Language, including the type scale and fonts, along with typography design
diff --git a/packages/utilities/src/dateTimeFormat/absolute.ts b/packages/utilities/src/dateTimeFormat/absolute.ts
index 1e14cce8d421..545647d6be9e 100644
--- a/packages/utilities/src/dateTimeFormat/absolute.ts
+++ b/packages/utilities/src/dateTimeFormat/absolute.ts
@@ -73,12 +73,12 @@ export function formatRange(
   const timeStyle =
     options?.timeStyle === null
       ? undefined
-      : options?.timeStyle ?? options?.style ?? 'short';
+      : (options?.timeStyle ?? options?.style ?? 'short');
 
   const dateStyle =
     options?.dateStyle === null
       ? undefined
-      : options?.dateStyle ?? options?.style ?? 'medium';
+      : (options?.dateStyle ?? options?.style ?? 'medium');
 
   const dtf = new Intl.DateTimeFormat(options?.locale, {
     timeStyle,
diff --git a/packages/web-components/README.md b/packages/web-components/README.md
index 8d02dc0ec02e..71e41d9ade66 100644
--- a/packages/web-components/README.md
+++ b/packages/web-components/README.md
@@ -55,7 +55,7 @@ The CDN artifacts define the custom elements for the browser, so they can be
 directly used once the script tag has been added to the page. For example:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <script
diff --git a/packages/web-components/src/components/ai-label/ai-label.scss b/packages/web-components/src/components/ai-label/ai-label.scss
index 35f5a320ca32..a00453f9e52f 100644
--- a/packages/web-components/src/components/ai-label/ai-label.scss
+++ b/packages/web-components/src/components/ai-label/ai-label.scss
@@ -49,7 +49,8 @@ $colorMap: (
     border: 1px solid transparent;
     border-radius: $spacing-03;
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 44px 60px -24px $ai-popover-shadow-outer-01,
       -56px 64px 64px -24px $ai-popover-shadow-outer-02;
     color: $text-primary;
diff --git a/packages/web-components/src/components/combo-box/combo-box.ts b/packages/web-components/src/components/combo-box/combo-box.ts
index 1a8dadd40730..5573bda37cf0 100644
--- a/packages/web-components/src/components/combo-box/combo-box.ts
+++ b/packages/web-components/src/components/combo-box/combo-box.ts
@@ -251,7 +251,7 @@ class CDSComboBox extends CDSDropdown {
         aria-autocomplete="list"
         aria-expanded="${String(open)}"
         aria-activedescendant="${ifDefined(
-          open ? activeDescendant ?? activeDescendantFallback : ''
+          open ? (activeDescendant ?? activeDescendantFallback) : ''
         )}"
         ?readonly=${readOnly}
         @input=${handleInput} />
diff --git a/packages/web-components/src/components/data-table/_table-action.scss b/packages/web-components/src/components/data-table/_table-action.scss
index 44ae90bcd6c9..b493f7a4b633 100644
--- a/packages/web-components/src/components/data-table/_table-action.scss
+++ b/packages/web-components/src/components/data-table/_table-action.scss
@@ -41,7 +41,8 @@
 :host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
   clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   transform: translate3d(0, $spacing-09, 0);
-  transition: transform $duration-fast-02 motion(standard, productive),
+  transition:
+    transform $duration-fast-02 motion(standard, productive),
     clip-path $duration-fast-02 motion(standard, productive);
 }
 
diff --git a/packages/web-components/src/components/data-table/table-toolbar-content.ts b/packages/web-components/src/components/data-table/table-toolbar-content.ts
index d9db5f1b18b8..72f9bfd83cde 100644
--- a/packages/web-components/src/components/data-table/table-toolbar-content.ts
+++ b/packages/web-components/src/components/data-table/table-toolbar-content.ts
@@ -43,8 +43,8 @@ class CDSTableToolbarContent extends LitElement {
           this.size === 'xs'
             ? 'sm'
             : this.size === 'md' || this.size === 'xl'
-            ? 'lg'
-            : this.size;
+              ? 'lg'
+              : this.size;
         e.setAttribute('size', size);
       });
     }
diff --git a/packages/web-components/src/components/dropdown/dropdown.ts b/packages/web-components/src/components/dropdown/dropdown.ts
index bfcd726a877d..54d2726782fa 100644
--- a/packages/web-components/src/components/dropdown/dropdown.ts
+++ b/packages/web-components/src/components/dropdown/dropdown.ts
@@ -803,8 +803,8 @@ class CDSDropdown extends ValidityMixin(
             !shouldTriggerBeFocusable
               ? undefined
               : open
-              ? activeDescendant ?? activeDescendantFallback
-              : ''
+                ? (activeDescendant ?? activeDescendantFallback)
+                : ''
           )}">
           ${this._renderPrecedingLabel()}${this._renderLabel()}${validityIcon}${warningIcon}${this._renderFollowingLabel()}
           <div id="trigger-caret" class="${iconContainerClasses}">
diff --git a/packages/web-components/src/components/file-uploader/demo-file-uploader.ts b/packages/web-components/src/components/file-uploader/demo-file-uploader.ts
index 399a333a6ece..b3686f173604 100644
--- a/packages/web-components/src/components/file-uploader/demo-file-uploader.ts
+++ b/packages/web-components/src/components/file-uploader/demo-file-uploader.ts
@@ -45,7 +45,7 @@ export default class CDSCEDemoFileUploader extends LitElement {
           id: Math.random().toString(36).slice(2),
           file: item,
           state: FILE_UPLOADER_ITEM_STATE.UPLOADING,
-        } as FileData)
+        }) as FileData
     );
     const { multiple, _files: files, _simulateUpload: simulateUpload } = this;
     if (multiple) {
diff --git a/packages/web-components/src/components/file-uploader/file-uploader-button.ts b/packages/web-components/src/components/file-uploader/file-uploader-button.ts
index 0c2c52abc653..107c9316b764 100644
--- a/packages/web-components/src/components/file-uploader/file-uploader-button.ts
+++ b/packages/web-components/src/components/file-uploader/file-uploader-button.ts
@@ -94,7 +94,7 @@ class CDSFileUploaderButton extends HostListenerMixin(LitElement) {
         const hasFileExtension = fileExtensionRegExp.test(name);
         const [fileExtension] = !hasFileExtension
           ? [undefined]
-          : fileExtensionRegExp.exec(name) ?? [];
+          : (fileExtensionRegExp.exec(name) ?? []);
 
         return (
           acceptedTypes.has(mimeType) ||
diff --git a/packages/web-components/src/components/file-uploader/file-uploader-drop-container.ts b/packages/web-components/src/components/file-uploader/file-uploader-drop-container.ts
index 40a8a1910470..fdca18b8594b 100644
--- a/packages/web-components/src/components/file-uploader/file-uploader-drop-container.ts
+++ b/packages/web-components/src/components/file-uploader/file-uploader-drop-container.ts
@@ -113,7 +113,7 @@ class CDSFileUploaderDropContainer extends HostListenerMixin(LitElement) {
         const hasFileExtension = fileExtensionRegExp.test(name);
         const [fileExtension] = !hasFileExtension
           ? [undefined]
-          : fileExtensionRegExp.exec(name) ?? [];
+          : (fileExtensionRegExp.exec(name) ?? []);
 
         return (
           acceptedTypes.has(mimeType) ||
diff --git a/packages/web-components/src/components/layer/layer.stories.ts b/packages/web-components/src/components/layer/layer.stories.ts
index c3cefb394567..d218412e9999 100644
--- a/packages/web-components/src/components/layer/layer.stories.ts
+++ b/packages/web-components/src/components/layer/layer.stories.ts
@@ -64,9 +64,8 @@ export const UseLayer = {
   render: () => {
     document.addEventListener(`${prefix}-use-layer`, (e) => {
       const { layer, level } = (e as any).detail;
-      layer.querySelector(
-        '.example-layer-test-component.use-layer'
-      ).innerText = `The current layer level is: ${level + 1}`;
+      layer.querySelector('.example-layer-test-component.use-layer').innerText =
+        `The current layer level is: ${level + 1}`;
     });
 
     return html`
diff --git a/packages/web-components/src/components/modal/modal.scss b/packages/web-components/src/components/modal/modal.scss
index e47e91464924..d9e7a354e2df 100644
--- a/packages/web-components/src/components/modal/modal.scss
+++ b/packages/web-components/src/components/modal/modal.scss
@@ -21,7 +21,8 @@
   @extend .#{$prefix}--modal;
 
   opacity: 1;
-  transition: opacity $duration-moderate-02 motion(entrance, expressive),
+  transition:
+    opacity $duration-moderate-02 motion(entrance, expressive),
     visibility 0ms linear;
   visibility: inherit;
 
@@ -128,7 +129,8 @@
     padding-block: $spacing-05 $spacing-07;
 
     &:focus {
-      box-shadow: inset 0 0 0 $button-outline-width $focus,
+      box-shadow:
+        inset 0 0 0 $button-outline-width $focus,
         inset 0 0 0 $button-border-width $background;
     }
   }
@@ -154,14 +156,16 @@
 
   border: 1px solid transparent;
   background-color: $layer;
-  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+  box-shadow:
+    inset 0 -80px 70px -65px $ai-inner-shadow,
     0 24px 40px -24px $ai-drop-shadow;
 }
 
 :host(#{$prefix}-modal[ai-label][has-footer]) .#{$prefix}--modal-container {
   @include ai-popover-gradient('default', 64px, 'layer');
 
-  box-shadow: inset 0 -80px 0 -16px $layer,
+  box-shadow:
+    inset 0 -80px 0 -16px $layer,
     inset 0 -160px 70px -65px $ai-inner-shadow,
     0 24px 40px -24px $ai-drop-shadow;
 }
diff --git a/packages/web-components/src/components/notification/actionable-notification.scss b/packages/web-components/src/components/notification/actionable-notification.scss
index bddb75907e94..ffdf1744e0ef 100644
--- a/packages/web-components/src/components/notification/actionable-notification.scss
+++ b/packages/web-components/src/components/notification/actionable-notification.scss
@@ -46,7 +46,8 @@ $css--plex: true !default;
   &:focus {
     border-color: $focus-inverse;
     background-color: $notification-action-tertiary-inverse;
-    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+    box-shadow:
+      inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
       inset 0 0 0 button-vars.$button-border-width $background-inverse;
     color: $notification-action-tertiary-inverse-text;
   }
diff --git a/packages/web-components/src/components/slug/slug.scss b/packages/web-components/src/components/slug/slug.scss
index 1b55e0a1aabc..8a1baf80e6c1 100644
--- a/packages/web-components/src/components/slug/slug.scss
+++ b/packages/web-components/src/components/slug/slug.scss
@@ -49,7 +49,8 @@ $colorMap: (
     border: 1px solid transparent;
     border-radius: $spacing-03;
     // Need to make tokens
-    box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+    box-shadow:
+      inset 0 -80px 70px -65px $ai-inner-shadow,
       -40px 44px 60px -24px $ai-popover-shadow-outer-01,
       -56px 64px 64px -24px $ai-popover-shadow-outer-02;
     color: $text-primary;
diff --git a/packages/web-components/src/components/tabs/tabs.scss b/packages/web-components/src/components/tabs/tabs.scss
index 2515fbcd830e..d51bdeceff3b 100644
--- a/packages/web-components/src/components/tabs/tabs.scss
+++ b/packages/web-components/src/components/tabs/tabs.scss
@@ -89,7 +89,8 @@ $inset-transition: inset 110ms motion(standard, productive);
     text-align: start;
     text-decoration: none;
     text-overflow: ellipsis;
-    transition: border $duration-fast-01 motion(standard, productive),
+    transition:
+      border $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
     white-space: nowrap;
 
diff --git a/packages/web-components/src/components/tile/tile.scss b/packages/web-components/src/components/tile/tile.scss
index ac8e8f028ba4..886ed1e1c058 100644
--- a/packages/web-components/src/components/tile/tile.scss
+++ b/packages/web-components/src/components/tile/tile.scss
@@ -174,7 +174,8 @@ $css--plex: true !default;
   @include ai-popover-gradient('default', 0, 'layer');
 
   border: 1px solid transparent;
-  box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
+  box-shadow:
+    inset 0 -80px 70px -65px $ai-inner-shadow,
     0 24px 40px -24px $ai-drop-shadow;
 }
 
diff --git a/packages/web-components/src/globals/directives/if-non-empty.ts b/packages/web-components/src/globals/directives/if-non-empty.ts
index 022de7f3626e..571670cd4ee1 100644
--- a/packages/web-components/src/globals/directives/if-non-empty.ts
+++ b/packages/web-components/src/globals/directives/if-non-empty.ts
@@ -15,4 +15,4 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @param value The value.
  */
 export default (value) =>
-  ifDefined(value === '' ? undefined : value ?? undefined);
+  ifDefined(value === '' ? undefined : (value ?? undefined));
diff --git a/tasks/sync.js b/tasks/sync.js
index 41f690f4bca9..d1da596a4d18 100644
--- a/tasks/sync.js
+++ b/tasks/sync.js
@@ -82,9 +82,7 @@ function sortFields(a, b) {
 
 async function sync() {
   const packagePaths = await Promise.all(
-    (
-      await fs.readdir(PACKAGES_DIR)
-    ).map(async (pkg) => {
+    (await fs.readdir(PACKAGES_DIR)).map(async (pkg) => {
       const packageJsonPath = path.join(PACKAGES_DIR, pkg, 'package.json');
       return {
         basename: pkg,

From cdaada9f36dd010dffc2ef46889ced82f0d9c358 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Tue, 19 Nov 2024 15:02:21 -0600
Subject: [PATCH 3/5] fix(popover): improve autoAlignBoundary proptype

---
 packages/react/src/components/Popover/index.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index c4a8abd90c2e..ddbc45b4a18a 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -559,15 +559,15 @@ Popover.propTypes = {
    */
   autoAlignBoundary: PropTypes.oneOfType([
     PropTypes.oneOf(['clippingAncestors']),
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.instanceOf(Element), // For DOM elements
+    PropTypes.arrayOf(PropTypes.instanceOf(Element)), // Array of DOM elements
     PropTypes.exact({
-      x: PropTypes.number,
-      y: PropTypes.number,
-      width: PropTypes.number,
-      height: PropTypes.number,
+      x: PropTypes.number.isRequired,
+      y: PropTypes.number.isRequired,
+      width: PropTypes.number.isRequired,
+      height: PropTypes.number.isRequired,
     }),
-  ]),
+  ]) as PropTypes.Validator<Boundary | null | undefined>,
 
   /**
    * Specify whether a caret should be rendered

From 993c8e7a3c21b76b1881f018f0b4a36b8e99ae03 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Thu, 21 Nov 2024 12:38:44 -0600
Subject: [PATCH 4/5] fix(popover): ensure popover conforms to popovercomponent

---
 packages/react/src/components/Popover/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index ddbc45b4a18a..6eaeb1eb4bf3 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -484,7 +484,7 @@ export const Popover: PopoverComponent = React.forwardRef(
       </PopoverContext.Provider>
     );
   }
-);
+) as PopoverComponent;
 
 // Note: this displayName is temporarily set so that Storybook ArgTable
 // correctly displays the name of this component

From 219b054cead2ff8f229eac0b49f7449801f543e1 Mon Sep 17 00:00:00 2001
From: Taylor Jones <taylor.jones826@gmail.com>
Date: Thu, 21 Nov 2024 12:44:33 -0600
Subject: [PATCH 5/5] chore: update snaps

---
 .../__snapshots__/PublicAPI-test.js.snap      | 49 +++++++++++++++++++
 .../react/src/components/Popover/index.tsx    |  4 +-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 4ad728b59e2b..6ce59ab366c0 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6251,6 +6251,55 @@ Map {
       "autoAlign": Object {
         "type": "bool",
       },
+      "autoAlignBoundary": Object {
+        "args": Array [
+          Array [
+            Object {
+              "args": Array [
+                Array [
+                  "clippingAncestors",
+                ],
+              ],
+              "type": "oneOf",
+            },
+            Object {
+              "type": "elementType",
+            },
+            Object {
+              "args": Array [
+                Object {
+                  "type": "elementType",
+                },
+              ],
+              "type": "arrayOf",
+            },
+            Object {
+              "args": Array [
+                Object {
+                  "height": Object {
+                    "isRequired": true,
+                    "type": "number",
+                  },
+                  "width": Object {
+                    "isRequired": true,
+                    "type": "number",
+                  },
+                  "x": Object {
+                    "isRequired": true,
+                    "type": "number",
+                  },
+                  "y": Object {
+                    "isRequired": true,
+                    "type": "number",
+                  },
+                },
+              ],
+              "type": "exact",
+            },
+          ],
+        ],
+        "type": "oneOfType",
+      },
       "caret": Object {
         "type": "bool",
       },
diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx
index 6eaeb1eb4bf3..36e59ea3c1a3 100644
--- a/packages/react/src/components/Popover/index.tsx
+++ b/packages/react/src/components/Popover/index.tsx
@@ -559,8 +559,8 @@ Popover.propTypes = {
    */
   autoAlignBoundary: PropTypes.oneOfType([
     PropTypes.oneOf(['clippingAncestors']),
-    PropTypes.instanceOf(Element), // For DOM elements
-    PropTypes.arrayOf(PropTypes.instanceOf(Element)), // Array of DOM elements
+    PropTypes.elementType,
+    PropTypes.arrayOf(PropTypes.elementType),
     PropTypes.exact({
       x: PropTypes.number.isRequired,
       y: PropTypes.number.isRequired,