diff --git a/.yarn/cache/stylelint-prettier-npm-5.0.2-e336d0fee2-bee52ac6bf.zip b/.yarn/cache/stylelint-prettier-npm-5.0.2-e336d0fee2-bee52ac6bf.zip
new file mode 100644
index 000000000000..42815c3c3161
Binary files /dev/null and b/.yarn/cache/stylelint-prettier-npm-5.0.2-e336d0fee2-bee52ac6bf.zip differ
diff --git a/config/eslint-config-carbon/package.json b/config/eslint-config-carbon/package.json
index d25c8060d254..5c2fd089baf2 100644
--- a/config/eslint-config-carbon/package.json
+++ b/config/eslint-config-carbon/package.json
@@ -54,6 +54,6 @@
   },
   "devDependencies": {
     "babel-preset-carbon": "workspace:^",
-    "prettier": "^2.8.8"
+    "prettier": "^3.3.3"
   }
 }
diff --git a/config/stylelint-config-carbon/package.json b/config/stylelint-config-carbon/package.json
index 0c12ab3bed7d..a4b1beada911 100644
--- a/config/stylelint-config-carbon/package.json
+++ b/config/stylelint-config-carbon/package.json
@@ -35,11 +35,12 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.0",
+    "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.2.1",
     "stylelint-use-logical": "^2.1.0"
   },
   "devDependencies": {
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "stylelint": "^16.0.0"
   }
 }
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/package.json b/package.json
index 14b0dd0de5a0..e5fd6cf90f07 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "jest-junit": "^16.0.0",
     "lerna": "^8.0.0",
     "lint-staged": "^15.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 075ba217b158..d772a51cb283 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -47,7 +47,7 @@
     "klaw-sync": "^6.0.0",
     "lodash.template": "^4.5.0",
     "markdown-toc": "^1.2.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "prettier-config-carbon": "^0.11.0",
     "progress-estimator": "^0.3.0",
     "remark": "^10.0.1",
diff --git a/packages/cli/src/commands/sassdoc/tools.js b/packages/cli/src/commands/sassdoc/tools.js
index 9add057909fc..b7bdf5915d79 100644
--- a/packages/cli/src/commands/sassdoc/tools.js
+++ b/packages/cli/src/commands/sassdoc/tools.js
@@ -7,7 +7,7 @@
 
 'use strict';
 
-const prettier = require('prettier');
+const prettier = require('prettier2');
 const sassdoc = require('sassdoc');
 const toc = require('markdown-toc');
 
diff --git a/packages/cli/src/commands/sync/readme.js b/packages/cli/src/commands/sync/readme.js
index 444de608ef3e..50dc11ec5cf3 100644
--- a/packages/cli/src/commands/sync/readme.js
+++ b/packages/cli/src/commands/sync/readme.js
@@ -9,7 +9,7 @@
 
 const fs = require('fs-extra');
 const path = require('path');
-const prettier = require('prettier');
+const prettier = require('prettier2');
 const prettierConfig = require('prettier-config-carbon');
 const createRemark = require('remark');
 const monorepo = require('./remark/remark-monorepo');
diff --git a/packages/colors/tasks/build.js b/packages/colors/tasks/build.js
index 0c34175475f7..c9b342d00f1c 100644
--- a/packages/colors/tasks/build.js
+++ b/packages/colors/tasks/build.js
@@ -136,7 +136,7 @@ async function build() {
   const MODULES_ENTRYPOINT = path.resolve(__dirname, '..', 'index.scss');
 
   await Promise.all([
-    fs.writeFile(MODULES_ENTRYPOINT, generate(sassModule).code),
+    fs.writeFile(MODULES_ENTRYPOINT, await generate(sassModule).code),
   ]);
 }
 
diff --git a/packages/feature-flags/tasks/build.js b/packages/feature-flags/tasks/build.js
index fbeda52ae491..66d91bc456d2 100644
--- a/packages/feature-flags/tasks/build.js
+++ b/packages/feature-flags/tasks/build.js
@@ -37,7 +37,10 @@ async function main() {
     '../scss/generated/feature-flags.scss'
   );
   await fs.ensureFile(generatedSassFilepath);
-  await fs.writeFile(generatedSassFilepath, buildSassModule(featureFlags));
+  await fs.writeFile(
+    generatedSassFilepath,
+    await buildSassModule(featureFlags)
+  );
 }
 
 const sassBanner = ` Code generated by @carbon/feature-flags. DO NOT EDIT.
diff --git a/packages/grid/scss/_css-grid.scss b/packages/grid/scss/_css-grid.scss
index a75ccad9ac06..b2c266372629 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
+      )};
   }
 
   // -----------------------------------------------------------------------------
@@ -179,8 +181,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/package.json b/packages/icon-build-helpers/package.json
index 715da55cdf1f..71f14ed0efc6 100644
--- a/packages/icon-build-helpers/package.json
+++ b/packages/icon-build-helpers/package.json
@@ -41,7 +41,7 @@
     "js-yaml": "^3.12.1",
     "klaw-sync": "^6.0.0",
     "memfs": "^4.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "prop-types": "^15.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
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/icons-vue/package.json b/packages/icons-vue/package.json
index 2f10b03e4fec..de383cf1e7d4 100644
--- a/packages/icons-vue/package.json
+++ b/packages/icons-vue/package.json
@@ -37,7 +37,7 @@
     "@carbon/cli-reporter": "^10.7.0",
     "@carbon/icons": "^11.52.0",
     "fs-extra": "^11.0.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "rimraf": "^6.0.0",
     "rollup": "^2.79.1",
     "vue": "^2.6.8"
diff --git a/packages/layout/tasks/build.js b/packages/layout/tasks/build.js
index 73f44725d91c..98901187069c 100644
--- a/packages/layout/tasks/build.js
+++ b/packages/layout/tasks/build.js
@@ -101,7 +101,7 @@ async function build() {
   await fs.ensureDir(SCSS_DIR);
   for (const { filepath, builder } of files) {
     const { code } = generate(builder());
-    await fs.writeFile(filepath, code);
+    await fs.writeFile(filepath, await code);
   }
 
   reporter.success('Done! 🎉');
diff --git a/packages/react/package.json b/packages/react/package.json
index 4df534095802..0c9be7cccd96 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -114,6 +114,7 @@
     "mini-css-extract-plugin": "^2.4.5",
     "postcss": "^8.4.5",
     "postcss-loader": "^8.0.0",
+    "prettier2": "npm:prettier@2",
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
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 afac03b9a278..d56c4b7b0c04 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -527,12 +527,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/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/InlineCheckbox/InlineCheckbox.js b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
index 3d02d247b959..ae1b45d26325 100644
--- a/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
+++ b/packages/react/src/components/InlineCheckbox/InlineCheckbox.js
@@ -12,79 +12,78 @@ import { usePrefix } from '../../internal/usePrefix';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 
 /** @type any */
-const InlineCheckbox = React.forwardRef(function InlineCheckbox(
-  props,
-  forwardRef
-) {
-  const {
-    ['aria-label']: ariaLabel,
-    ariaLabel: deprecatedAriaLabel,
-    checked = false,
-    disabled,
-    id,
-    indeterminate,
-    name,
-    onChange = () => {},
-    onClick,
-    onKeyDown,
-    title,
-  } = props;
-  const prefix = usePrefix();
-  const inputRef = useRef(null);
-  const ref = useMergedRefs([inputRef, forwardRef]);
-  const inputProps = {
-    checked,
-    className: `${prefix}--checkbox`,
-    disabled,
-    id,
-    name,
-    onClick: onClick ? onClickCheckBoxInput : onClick,
-    onChange: (evt) => {
-      onChange(evt.target.checked, id, evt);
-    },
-    onKeyDown,
-    ref,
-    type: 'checkbox',
-  };
-
-  if (indeterminate) {
-    inputProps.checked = false;
-  }
-
-  useEffect(() => {
-    if (inputRef?.current) {
-      inputRef.current.indeterminate = indeterminate;
-    }
-  }, [indeterminate]);
+const InlineCheckbox = React.forwardRef(
+  function InlineCheckbox(props, forwardRef) {
+    const {
+      ['aria-label']: ariaLabel,
+      ariaLabel: deprecatedAriaLabel,
+      checked = false,
+      disabled,
+      id,
+      indeterminate,
+      name,
+      onChange = () => {},
+      onClick,
+      onKeyDown,
+      title,
+    } = props;
+    const prefix = usePrefix();
+    const inputRef = useRef(null);
+    const ref = useMergedRefs([inputRef, forwardRef]);
+    const inputProps = {
+      checked,
+      className: `${prefix}--checkbox`,
+      disabled,
+      id,
+      name,
+      onClick: onClick ? onClickCheckBoxInput : onClick,
+      onChange: (evt) => {
+        onChange(evt.target.checked, id, evt);
+      },
+      onKeyDown,
+      ref,
+      type: 'checkbox',
+    };
 
-  function onClickCheckBoxInput(evt) {
-    // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
     if (indeterminate) {
-      evt.target.checked = false;
+      inputProps.checked = false;
     }
-    onClick(evt);
-  }
 
-  return (
-    <div className={`${prefix}--checkbox--inline`}>
-      <input {...inputProps} />
-      {
-        /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
-        <label
-          htmlFor={id}
-          className={`${prefix}--checkbox-label`}
-          title={title}
-          onClick={(evt) => {
-            evt.stopPropagation();
-          }}>
-          <span className={`${prefix}--visually-hidden`}>
-            {deprecatedAriaLabel || ariaLabel}
-          </span>
-        </label>
+    useEffect(() => {
+      if (inputRef?.current) {
+        inputRef.current.indeterminate = indeterminate;
       }
-    </div>
-  );
-});
+    }, [indeterminate]);
+
+    function onClickCheckBoxInput(evt) {
+      // If the previous "indeterminate" is true, change "checked" to false. If it is not undefined, we're working on `TableSelectAll`
+      if (indeterminate) {
+        evt.target.checked = false;
+      }
+      onClick(evt);
+    }
+
+    return (
+      <div className={`${prefix}--checkbox--inline`}>
+        <input {...inputProps} />
+        {
+          /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control,jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions */
+          <label
+            htmlFor={id}
+            className={`${prefix}--checkbox-label`}
+            title={title}
+            onClick={(evt) => {
+              evt.stopPropagation();
+            }}>
+            <span className={`${prefix}--visually-hidden`}>
+              {deprecatedAriaLabel || ariaLabel}
+            </span>
+          </label>
+        }
+      </div>
+    );
+  }
+);
 
 InlineCheckbox.propTypes = {
   /**
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 c7df0543ab0d..06bfd5946b8b 100644
--- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
+++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -312,7 +312,7 @@ export interface FilterableMultiSelectProps<ItemType>
 }
 
 const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
-  ItemType
+  ItemType,
 >(
   {
     autoAlign = false,
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/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/react/tasks/build-test-rtl.js b/packages/react/tasks/build-test-rtl.js
index 11d19593671c..1b6e3efc4a41 100644
--- a/packages/react/tasks/build-test-rtl.js
+++ b/packages/react/tasks/build-test-rtl.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const clipboard = require('clipboardy');
-const prettier = require('prettier');
+const prettier = require('prettier2');
 const CarbonComponents = require('@carbon/react');
 const enquirer = require('enquirer');
 const fs = require('fs-extra');
diff --git a/packages/scss-generator/__tests__/scss-test.js b/packages/scss-generator/__tests__/scss-test.js
index 17c3ff3ccaf1..376292712834 100644
--- a/packages/scss-generator/__tests__/scss-test.js
+++ b/packages/scss-generator/__tests__/scss-test.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-const prettier = require('prettier');
+const prettier = require('prettier2');
 const { generate, types: t } = require('../src');
 
 const prettierOptions = {
diff --git a/packages/scss-generator/package.json b/packages/scss-generator/package.json
index c27424a7b491..5d822fca1072 100644
--- a/packages/scss-generator/package.json
+++ b/packages/scss-generator/package.json
@@ -24,6 +24,6 @@
     "provenance": true
   },
   "dependencies": {
-    "prettier": "^2.8.8"
+    "prettier": "^3.3.3"
   }
 }
diff --git a/packages/scss-generator/src/generate/printer.js b/packages/scss-generator/src/generate/printer.js
index 0e6d95de761b..b6b456689a24 100644
--- a/packages/scss-generator/src/generate/printer.js
+++ b/packages/scss-generator/src/generate/printer.js
@@ -7,7 +7,7 @@
 
 'use strict';
 
-const prettier = require('prettier');
+const prettier = require('prettier2');
 
 const prettierOptions = {
   parser: 'scss',
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 84647635604e..6a30508c0cce 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);
   }
 
@@ -79,7 +80,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 {
@@ -381,7 +383,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);
   }
 
@@ -400,7 +403,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 2c1a4ee1fb26..4078c571e16d 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 3c59520ce420..23ee1abea2ec 100644
--- a/packages/styles/scss/components/dropdown/_dropdown.scss
+++ b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -215,7 +215,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 e04c18026627..0490dcd75aa6 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 aa67a0be4168..e83d1bdac2b1 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 2fdb74b552ca..dd512d068624 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 4955ef43d396..12b83a647de9 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 f1c28dc02ed5..af4b857afc54 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 1af73b665bd0..3ff3d1f0ec4a 100644
--- a/packages/styles/scss/components/list-box/_list-box.scss
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -669,7 +669,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 c413d5b35f64..8197f3c425cd 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;
 
@@ -370,7 +372,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;
   }
 
@@ -378,7 +381,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 32edae4c5fa8..5641619c7a15 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 2db1dacc1f61..cdaff30bc99a 100644
--- a/packages/styles/scss/components/slug/_slug.scss
+++ b/packages/styles/scss/components/slug/_slug.scss
@@ -76,7 +76,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);
@@ -114,7 +115,9 @@ $sizes: (
 
   .#{$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;
   }
 
@@ -192,7 +195,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);
   }
 
@@ -254,7 +258,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;
@@ -707,7 +712,9 @@ $sizes: (
 
   .#{$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}--slug .#{$prefix}--slug-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 bf78f399565f..e9cd524b492c 100644
--- a/packages/styles/scss/components/tag/_tag.scss
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -303,7 +303,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 a248b1952ca3..790f559282d2 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 9d8b8f773e50..d3e56f7c0cdd 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 9125bc2e9bd9..a53098559100 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;
 
@@ -424,7 +426,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;
   }
 
@@ -450,7 +453,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;
   }
 
@@ -468,7 +472,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/toggle/_toggle.scss b/packages/styles/scss/components/toggle/_toggle.scss
index 62a890a114da..70438c4ed416 100644
--- a/packages/styles/scss/components/toggle/_toggle.scss
+++ b/packages/styles/scss/components/toggle/_toggle.scss
@@ -79,7 +79,9 @@
     .#{$prefix}--toggle__switch,
   .#{$prefix}--toggle:not(.#{$prefix}--toggle--disabled):active
     .#{$prefix}--toggle__switch {
-    box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
+    box-shadow:
+      0 0 0 1px $focus-inset,
+      0 0 0 3px $focus;
   }
 
   .#{$prefix}--toggle__switch--checked {
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/test-utils/dom.js b/packages/test-utils/dom.js
index 044fc48cc8f3..6bf5efab6ec7 100644
--- a/packages/test-utils/dom.js
+++ b/packages/test-utils/dom.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import prettier from 'prettier';
+import prettier from 'prettier2';
 
 /**
  * Find the HTMLElement that includes the given `text`
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index ff1dbcd2b9e4..e35d0720fa11 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -26,7 +26,7 @@
     "react-dom": "^18.0.0"
   },
   "dependencies": {
-    "prettier": "^2.8.8",
+    "prettier": "^3.3.3",
     "react": "^18.2.0",
     "resolve": "^1.12.0",
     "sass": "^1.77.7"
diff --git a/packages/themes/tasks/build.js b/packages/themes/tasks/build.js
index 41c1642ecfce..9a1e2013b3ba 100644
--- a/packages/themes/tasks/build.js
+++ b/packages/themes/tasks/build.js
@@ -75,7 +75,7 @@ async function build() {
     await fs.ensureFile(filepath);
 
     const { code } = generate(builder());
-    await fs.writeFile(filepath, code);
+    await fs.writeFile(filepath, await code);
   }
 
   reporter.success('Done! 🎉');
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 401855d19437..c56981c50ecd 100644
--- a/packages/web-components/README.md
+++ b/packages/web-components/README.md
@@ -131,7 +131,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/accordion/accordion-skeleton.ts b/packages/web-components/src/components/accordion/accordion-skeleton.ts
index e982d5acdf50..7f0e6494c07d 100644
--- a/packages/web-components/src/components/accordion/accordion-skeleton.ts
+++ b/packages/web-components/src/components/accordion/accordion-skeleton.ts
@@ -111,11 +111,10 @@ class CDSAccordionSkeleton extends LitElement {
           `
         : ``}
       ${Array.from(new Array(numSkeletonItems)).map(
-        (_, index) =>
-          html`
-            <cds-accordion-item-skeleton
-              key=${index}></cds-accordion-item-skeleton>
-          `
+        (_, index) => html`
+          <cds-accordion-item-skeleton
+            key=${index}></cds-accordion-item-skeleton>
+        `
       )}
     `;
   }
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/checkbox/checkbox.stories.ts b/packages/web-components/src/components/checkbox/checkbox.stories.ts
index 013d7292a176..fc75f0976d8c 100644
--- a/packages/web-components/src/components/checkbox/checkbox.stories.ts
+++ b/packages/web-components/src/components/checkbox/checkbox.stories.ts
@@ -192,28 +192,27 @@ export const Playground = {
     legendText,
     warn,
     warnText,
-  }) =>
-    html`
-      <cds-checkbox-group
-        helper-text="${helperText}"
-        ?disabled="${disabled}"
-        ?invalid="${invalid}"
-        invalid-text="${invalidText}"
-        legend-text="${legendText}"
-        ?readonly="${readonly}"
-        ?warn="${warn}"
-        warn-text="${warnText}">
-        <cds-checkbox checked @cds-checkbox-changed="${onChange}"
-          >Checkbox label</cds-checkbox
-        >
-        <cds-checkbox @cds-checkbox-changed="${onChange}"
-          >Checkbox label</cds-checkbox
-        >
-        <cds-checkbox disabled @cds-checkbox-changed="${onChange}"
-          >Checkbox label</cds-checkbox
-        >
-      </cds-checkbox-group>
-    `,
+  }) => html`
+    <cds-checkbox-group
+      helper-text="${helperText}"
+      ?disabled="${disabled}"
+      ?invalid="${invalid}"
+      invalid-text="${invalidText}"
+      legend-text="${legendText}"
+      ?readonly="${readonly}"
+      ?warn="${warn}"
+      warn-text="${warnText}">
+      <cds-checkbox checked @cds-checkbox-changed="${onChange}"
+        >Checkbox label</cds-checkbox
+      >
+      <cds-checkbox @cds-checkbox-changed="${onChange}"
+        >Checkbox label</cds-checkbox
+      >
+      <cds-checkbox disabled @cds-checkbox-changed="${onChange}"
+        >Checkbox label</cds-checkbox
+      >
+    </cds-checkbox-group>
+  `,
 };
 
 const meta = {
diff --git a/packages/web-components/src/components/code-snippet/code-snippet.stories.ts b/packages/web-components/src/components/code-snippet/code-snippet.stories.ts
index a80c69cb04e7..9af57cc3ea5a 100644
--- a/packages/web-components/src/components/code-snippet/code-snippet.stories.ts
+++ b/packages/web-components/src/components/code-snippet/code-snippet.stories.ts
@@ -228,13 +228,12 @@ export const Skeleton = {
       skip: true,
     },
   },
-  render: () =>
-    html`
-      <cds-code-snippet-skeleton
-        type="single"
-        style="margin-bottom: 8px"></cds-code-snippet-skeleton>
-      <cds-code-snippet-skeleton type="multi"></cds-code-snippet-skeleton>
-    `,
+  render: () => html`
+    <cds-code-snippet-skeleton
+      type="single"
+      style="margin-bottom: 8px"></cds-code-snippet-skeleton>
+    <cds-code-snippet-skeleton type="multi"></cds-code-snippet-skeleton>
+  `,
 };
 
 export const Playground = {
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-skeleton.ts b/packages/web-components/src/components/data-table/table-skeleton.ts
index f303733eda71..8d144450225c 100644
--- a/packages/web-components/src/components/data-table/table-skeleton.ts
+++ b/packages/web-components/src/components/data-table/table-skeleton.ts
@@ -127,32 +127,29 @@ class CDSTableSkeleton extends LitElement {
         <thead>
           <tr>
             ${Array.from(new Array(columnCount)).map(
-              (_, index) =>
-                html`
-                  <th>
-                    <div class="${prefix}--table-header-label">
-                      ${headers[index]}
-                    </div>
-                  </th>
-                `
+              (_, index) => html`
+                <th>
+                  <div class="${prefix}--table-header-label">
+                    ${headers[index]}
+                  </div>
+                </th>
+              `
             )}
           </tr>
         </thead>
         <tbody>
           ${Array.from(new Array(rowCount)).map(
-            () =>
-              html`
-                <tr>
-                  ${Array.from(new Array(columnCount)).map(
-                    () =>
-                      html`
-                        <td>
-                          <span></span>
-                        </td>
-                      `
-                  )}
-                </tr>
-              `
+            () => html`
+              <tr>
+                ${Array.from(new Array(columnCount)).map(
+                  () => html`
+                    <td>
+                      <span></span>
+                    </td>
+                  `
+                )}
+              </tr>
+            `
           )}
         </tbody>
       </table>
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/date-picker/date-picker.stories.ts b/packages/web-components/src/components/date-picker/date-picker.stories.ts
index 0d0a05a219a6..026f15df2e20 100644
--- a/packages/web-components/src/components/date-picker/date-picker.stories.ts
+++ b/packages/web-components/src/components/date-picker/date-picker.stories.ts
@@ -247,13 +247,11 @@ export const RangeWithCalendarWithLayer = {
 };
 
 export const Skeleton = {
-  render: () =>
-    html`
-      <cds-date-picker-input-skeleton
-        kind="from"></cds-date-picker-input-skeleton>
-      <cds-date-picker-input-skeleton
-        kind="to"></cds-date-picker-input-skeleton>
-    `,
+  render: () => html`
+    <cds-date-picker-input-skeleton
+      kind="from"></cds-date-picker-input-skeleton>
+    <cds-date-picker-input-skeleton kind="to"></cds-date-picker-input-skeleton>
+  `,
   decorators: [(story) => html` <div>${story()}</div> `],
   parameters: {
     percy: {
diff --git a/packages/web-components/src/components/dropdown/dropdown.stories.ts b/packages/web-components/src/components/dropdown/dropdown.stories.ts
index 62f8b2f74f87..5c029f0d71d8 100644
--- a/packages/web-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/web-components/src/components/dropdown/dropdown.stories.ts
@@ -307,34 +307,33 @@ export const Playground = {
     label,
     warn,
     warnText,
-  }) =>
-    html`
-      <cds-dropdown
-        aria-label=${ifDefined(ariaLabel)}
-        ?open=${open}
-        ?disabled="${disabled}"
-        ?hide-label=${hideLabel}
-        helper-text=${ifDefined(helperText)}
-        ?invalid=${invalid}
-        ?read-only=${readOnly}
-        invalid-text=${invalidText}
-        direction="${direction}"
-        title-text=${ifDefined(titleText)}
-        size="${ifDefined(size)}"
-        type="${ifDefined(type)}"
-        value=${ifDefined(value)}
-        label=${ifDefined(label)}
-        ?warn=${warn}
-        warn-text=${warnText}>
-        ${items.map(
-          (elem) => html`
-            <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
-              >${elem.text}</cds-dropdown-item
-            >
-          `
-        )}
-      </cds-dropdown>
-    `,
+  }) => html`
+    <cds-dropdown
+      aria-label=${ifDefined(ariaLabel)}
+      ?open=${open}
+      ?disabled="${disabled}"
+      ?hide-label=${hideLabel}
+      helper-text=${ifDefined(helperText)}
+      ?invalid=${invalid}
+      ?read-only=${readOnly}
+      invalid-text=${invalidText}
+      direction="${direction}"
+      title-text=${ifDefined(titleText)}
+      size="${ifDefined(size)}"
+      type="${ifDefined(type)}"
+      value=${ifDefined(value)}
+      label=${ifDefined(label)}
+      ?warn=${warn}
+      warn-text=${warnText}>
+      ${items.map(
+        (elem) => html`
+          <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
+            >${elem.text}</cds-dropdown-item
+          >
+        `
+      )}
+    </cds-dropdown>
+  `,
 };
 
 const meta = {
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/inline-loading/inline-loading.stories.ts b/packages/web-components/src/components/inline-loading/inline-loading.stories.ts
index 46c8f741f75d..6f266f8ab299 100644
--- a/packages/web-components/src/components/inline-loading/inline-loading.stories.ts
+++ b/packages/web-components/src/components/inline-loading/inline-loading.stories.ts
@@ -52,12 +52,11 @@ export const Playground = {
   parameters: {
     percy: { skip: true },
   },
-  render: ({ assistiveText, description, status }) =>
-    html`
-      <cds-inline-loading status="${status}" assistive-text=${assistiveText}>
-        ${description}
-      </cds-inline-loading>
-    `,
+  render: ({ assistiveText, description, status }) => html`
+    <cds-inline-loading status="${status}" assistive-text=${assistiveText}>
+      ${description}
+    </cds-inline-loading>
+  `,
 };
 
 const meta = {
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/list/ordered-list.stories.ts b/packages/web-components/src/components/list/ordered-list.stories.ts
index 6771ae556a4e..147e40de13c6 100644
--- a/packages/web-components/src/components/list/ordered-list.stories.ts
+++ b/packages/web-components/src/components/list/ordered-list.stories.ts
@@ -29,66 +29,69 @@ const controls = {
 };
 
 export const Default = {
-  render: () => html`<cds-ordered-list native>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-  </cds-ordered-list>`,
+  render: () =>
+    html`<cds-ordered-list native>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+    </cds-ordered-list>`,
 };
 
 export const NativeListStyles = {
-  render: () => html`<cds-ordered-list native>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>
-      Ordered List level 1
-      <cds-ordered-list native>
-        <cds-list-item>Ordered List level 2</cds-list-item>
-        <cds-list-item>Ordered List level 2</cds-list-item>
-        <cds-list-item>Ordered List level 2</cds-list-item>
-        <cds-list-item>Ordered List level 2</cds-list-item>
-      </cds-ordered-list>
-    </cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-  </cds-ordered-list>`,
+  render: () =>
+    html`<cds-ordered-list native>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>
+        Ordered List level 1
+        <cds-ordered-list native>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+        </cds-ordered-list>
+      </cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+    </cds-ordered-list>`,
 };
 
 export const Nested = {
-  render: () => html`<cds-ordered-list>
-    <cds-list-item>
-      Ordered List level 1
-      <cds-ordered-list native>
-        <cds-list-item>Ordered List level 2</cds-list-item>
-        <cds-list-item>
-          Ordered List level 2
-          <cds-ordered-list native>
-            <cds-list-item>Ordered List level 3</cds-list-item>
-            <cds-list-item>Ordered List level 3</cds-list-item>
-          </cds-ordered-list>
-        </cds-list-item>
-      </cds-ordered-list>
-    </cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-    <cds-list-item>Ordered List level 1</cds-list-item>
-  </cds-ordered-list>`,
+  render: () =>
+    html`<cds-ordered-list>
+      <cds-list-item>
+        Ordered List level 1
+        <cds-ordered-list native>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>
+            Ordered List level 2
+            <cds-ordered-list native>
+              <cds-list-item>Ordered List level 3</cds-list-item>
+              <cds-list-item>Ordered List level 3</cds-list-item>
+            </cds-ordered-list>
+          </cds-list-item>
+        </cds-ordered-list>
+      </cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+    </cds-ordered-list>`,
 };
 
 export const Playground = {
diff --git a/packages/web-components/src/components/list/unordered-list.stories.ts b/packages/web-components/src/components/list/unordered-list.stories.ts
index 21d42b8ea365..a597b3b56cc2 100644
--- a/packages/web-components/src/components/list/unordered-list.stories.ts
+++ b/packages/web-components/src/components/list/unordered-list.stories.ts
@@ -23,31 +23,33 @@ const controls = {
 };
 
 export const Default = {
-  render: () => html`<cds-unordered-list>
-    <cds-list-item>Unordered List level 1</cds-list-item>
-    <cds-list-item>Unordered List level 1</cds-list-item>
-    <cds-list-item>Unordered List level 1</cds-list-item>
-  </cds-unordered-list>`,
+  render: () =>
+    html`<cds-unordered-list>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+    </cds-unordered-list>`,
 };
 
 export const Nested = {
-  render: () => html`<cds-unordered-list>
-    <cds-list-item>
-      Unordered List level 1
-      <cds-unordered-list>
-        <cds-list-item>Unordered List level 2</cds-list-item>
-        <cds-list-item>
-          Unordered List level 2
-          <cds-unordered-list>
-            <cds-list-item>Unordered List level 3</cds-list-item>
-            <cds-list-item>Unordered List level 3</cds-list-item>
-          </cds-unordered-list>
-        </cds-list-item>
-      </cds-unordered-list>
-    </cds-list-item>
-    <cds-list-item>Unordered List level 1</cds-list-item>
-    <cds-list-item>Unordered List level 1</cds-list-item>
-  </cds-unordered-list>`,
+  render: () =>
+    html`<cds-unordered-list>
+      <cds-list-item>
+        Unordered List level 1
+        <cds-unordered-list>
+          <cds-list-item>Unordered List level 2</cds-list-item>
+          <cds-list-item>
+            Unordered List level 2
+            <cds-unordered-list>
+              <cds-list-item>Unordered List level 3</cds-list-item>
+              <cds-list-item>Unordered List level 3</cds-list-item>
+            </cds-unordered-list>
+          </cds-list-item>
+        </cds-unordered-list>
+      </cds-list-item>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+    </cds-unordered-list>`,
 };
 
 export const Playground = {
diff --git a/packages/web-components/src/components/loading/loading.stories.ts b/packages/web-components/src/components/loading/loading.stories.ts
index 25e63b2c5865..1124086457b6 100644
--- a/packages/web-components/src/components/loading/loading.stories.ts
+++ b/packages/web-components/src/components/loading/loading.stories.ts
@@ -50,14 +50,13 @@ export const Default = {
 export const Playground = {
   args: defaultArgs,
   argTypes: controls,
-  render: ({ inactive, assistiveText, type, withOverlay }) =>
-    html`
-      <cds-loading
-        ?inactive=${inactive}
-        assistive-text=${assistiveText}
-        type=${ifDefined(type)}
-        ?overlay=${withOverlay}></cds-loading>
-    `,
+  render: ({ inactive, assistiveText, type, withOverlay }) => html`
+    <cds-loading
+      ?inactive=${inactive}
+      assistive-text=${assistiveText}
+      type=${ifDefined(type)}
+      ?overlay=${withOverlay}></cds-loading>
+  `,
 };
 
 const meta = {
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/modal/modal.stories.ts b/packages/web-components/src/components/modal/modal.stories.ts
index 821b7f418f4a..2b6359764816 100644
--- a/packages/web-components/src/components/modal/modal.stories.ts
+++ b/packages/web-components/src/components/modal/modal.stories.ts
@@ -410,123 +410,122 @@ export const Playground = {
     preventCloseOnClickOutside,
     primaryButtonDisabled,
     size,
-  }) =>
-    html`
-      <cds-modal
-        aria-label=${ariaLabel}
-        ?prevent-close-on-click-outside=${preventCloseOnClickOutside}
-        ?alert=${alert}
-        size="${size}"
-        ?open=${open}
-        ?full-width=${fullWidth}
-        prevent-close
-        ?has-scrolling-content="${hasScrollingContent}">
-        <cds-modal-header>
-          <cds-modal-close-button
-            close-button-label=${closeButtonLabel}></cds-modal-close-button>
-          <cds-modal-label>${modalLabel}</cds-modal-label>
-          <cds-modal-heading>${modalHeading}</cds-modal-heading>
-        </cds-modal-header>
-        <cds-modal-body>
-          <cds-modal-body-content description>
-            Custom domains direct requests for your apps in this Cloud Foundry
-            organization to a URL that you own. A custom domain can be a shared
-            domain, a shared subdomain, or a shared domain and host.
-          </cds-modal-body-content>
-          <cds-form-item>
-            <cds-text-input placeholder="e.g. github.com" label="Domain name">
-            </cds-text-input>
-          </cds-form-item>
-          <cds-select label-text="Region" placeholder="US South">
-            <cds-select-item value="us-south">Option 1</cds-select-item>
-            <cds-select-item value="us-east">Option 2</cds-select-item>
-          </cds-select>
+  }) => html`
+    <cds-modal
+      aria-label=${ariaLabel}
+      ?prevent-close-on-click-outside=${preventCloseOnClickOutside}
+      ?alert=${alert}
+      size="${size}"
+      ?open=${open}
+      ?full-width=${fullWidth}
+      prevent-close
+      ?has-scrolling-content="${hasScrollingContent}">
+      <cds-modal-header>
+        <cds-modal-close-button
+          close-button-label=${closeButtonLabel}></cds-modal-close-button>
+        <cds-modal-label>${modalLabel}</cds-modal-label>
+        <cds-modal-heading>${modalHeading}</cds-modal-heading>
+      </cds-modal-header>
+      <cds-modal-body>
+        <cds-modal-body-content description>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </cds-modal-body-content>
+        <cds-form-item>
+          <cds-text-input placeholder="e.g. github.com" label="Domain name">
+          </cds-text-input>
+        </cds-form-item>
+        <cds-select label-text="Region" placeholder="US South">
+          <cds-select-item value="us-south">Option 1</cds-select-item>
+          <cds-select-item value="us-east">Option 2</cds-select-item>
+        </cds-select>
 
-          ${hasScrollingContent
-            ? html` <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>
-                <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>
-                <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>
-                <h3>Lorem ipsum</h3>
-                <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>
-                <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>
-                <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>
-                <cds-modal-body-content>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                  Aenean id accumsan augue. Phasellus consequat augue vitae
-                  tellus tincidunt posuere. Curabitur justo urna, consectetur
-                  vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
-                  Etiam venenatis molestie tellus. Quisque consectetur non risus
-                  eu rutrum.
-                </cds-modal-body-content>`
-            : ``}
-        </cds-modal-body>
+        ${hasScrollingContent
+          ? html` <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <h3>Lorem ipsum</h3>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>`
+          : ``}
+      </cds-modal-body>
 
-        ${passiveModal
-          ? ``
-          : html` <cds-modal-footer>
-              ${numberOfButtons > 2
-                ? html` <cds-modal-footer-button kind="secondary"
-                    >Keep both</cds-modal-footer-button
-                  >`
-                : ``}
-              ${numberOfButtons >= 2
-                ? html` <cds-modal-footer-button kind="secondary"
-                    >${numberOfButtons === 2
-                      ? html`Cancel`
-                      : 'Rename'}</cds-modal-footer-button
-                  >`
-                : ``}
+      ${passiveModal
+        ? ``
+        : html` <cds-modal-footer>
+            ${numberOfButtons > 2
+              ? html` <cds-modal-footer-button kind="secondary"
+                  >Keep both</cds-modal-footer-button
+                >`
+              : ``}
+            ${numberOfButtons >= 2
+              ? html` <cds-modal-footer-button kind="secondary"
+                  >${numberOfButtons === 2
+                    ? html`Cancel`
+                    : 'Rename'}</cds-modal-footer-button
+                >`
+              : ``}
 
-              <cds-modal-footer-button
-                ?disabled=${primaryButtonDisabled}
-                kind="${danger ? 'danger' : 'primary'}"
-                >Add</cds-modal-footer-button
-              >
-            </cds-modal-footer>`}
-      </cds-modal>
-    `,
+            <cds-modal-footer-button
+              ?disabled=${primaryButtonDisabled}
+              kind="${danger ? 'danger' : 'primary'}"
+              >Add</cds-modal-footer-button
+            >
+          </cds-modal-footer>`}
+    </cds-modal>
+  `,
 };
 
 const meta = {
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/pagination/pagination.ts b/packages/web-components/src/components/pagination/pagination.ts
index 6902bd806f31..90e04e6b5b2b 100644
--- a/packages/web-components/src/components/pagination/pagination.ts
+++ b/packages/web-components/src/components/pagination/pagination.ts
@@ -383,12 +383,11 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
                 inline
                 value="${page}">
                 ${Array.from(new Array(totalPages)).map(
-                  (_item, index) =>
-                    html`
-                      <cds-select-item value="${index + 1}">
-                        ${index + 1}
-                      </cds-select-item>
-                    `
+                  (_item, index) => html`
+                    <cds-select-item value="${index + 1}">
+                      ${index + 1}
+                    </cds-select-item>
+                  `
                 )}
               </cds-select>
             `
@@ -401,12 +400,11 @@ class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
                 inline
                 value="${page}">
                 ${Array.from(new Array(totalPages)).map(
-                  (_item, index) =>
-                    html`
-                      <cds-select-item value="${index + 1}">
-                        ${index + 1}
-                      </cds-select-item>
-                    `
+                  (_item, index) => html`
+                    <cds-select-item value="${index + 1}">
+                      ${index + 1}
+                    </cds-select-item>
+                  `
                 )}
               </cds-select>
               <span class="${prefix}--pagination__text"
diff --git a/packages/web-components/src/components/select/select.stories.ts b/packages/web-components/src/components/select/select.stories.ts
index 4ac88d55d7a3..802680b50285 100644
--- a/packages/web-components/src/components/select/select.stories.ts
+++ b/packages/web-components/src/components/select/select.stories.ts
@@ -197,22 +197,25 @@ export const Skeleton = {
 };
 
 export const WithAILabel = {
-  render: () => html` <div style="width: 400px">
-    <cds-select
-      helper-text="Optional helper text"
-      label-text="Select an option">
-      <cds-ai-label alignment="bottom-left"> ${content}${actions}</cds-ai-label>
-      <cds-select-item-group label="Category 1">
-        <cds-select-item value="all">Option 1</cds-select-item>
-        <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
-      </cds-select-item-group>
-      <cds-select-item-group label="Category 2">
-        <cds-select-item value="staging">Option 3</cds-select-item>
-        <cds-select-item value="dea">Option 4</cds-select-item>
-        <cds-select-item value="router">Option 5</cds-select-item>
-      </cds-select-item-group>
-    </cds-select>
-  </div>`,
+  render: () =>
+    html` <div style="width: 400px">
+      <cds-select
+        helper-text="Optional helper text"
+        label-text="Select an option">
+        <cds-ai-label alignment="bottom-left">
+          ${content}${actions}</cds-ai-label
+        >
+        <cds-select-item-group label="Category 1">
+          <cds-select-item value="all">Option 1</cds-select-item>
+          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+        </cds-select-item-group>
+        <cds-select-item-group label="Category 2">
+          <cds-select-item value="staging">Option 3</cds-select-item>
+          <cds-select-item value="dea">Option 4</cds-select-item>
+          <cds-select-item value="router">Option 5</cds-select-item>
+        </cds-select-item-group>
+      </cds-select>
+    </div>`,
 };
 
 export const WithLayer = {
diff --git a/packages/web-components/src/components/skeleton-icon/skeleton-icon.stories.ts b/packages/web-components/src/components/skeleton-icon/skeleton-icon.stories.ts
index 63f6c42ff2b2..b3f5b7cabb44 100644
--- a/packages/web-components/src/components/skeleton-icon/skeleton-icon.stories.ts
+++ b/packages/web-components/src/components/skeleton-icon/skeleton-icon.stories.ts
@@ -16,9 +16,10 @@ export const Default = {
       skip: true,
     },
   },
-  render: () => html`<cds-skeleton-icon style="margin: 50px"></cds-skeleton-icon
-    ><cds-skeleton-icon
-      style="margin: 50px; width: 24px; height: 24px;"></cds-skeleton-icon>`,
+  render: () =>
+    html`<cds-skeleton-icon style="margin: 50px"></cds-skeleton-icon
+      ><cds-skeleton-icon
+        style="margin: 50px; width: 24px; height: 24px;"></cds-skeleton-icon>`,
 };
 
 const meta = {
diff --git a/packages/web-components/src/components/slider/slider.stories.ts b/packages/web-components/src/components/slider/slider.stories.ts
index e03f538b2dee..fd8cc7c02411 100644
--- a/packages/web-components/src/components/slider/slider.stories.ts
+++ b/packages/web-components/src/components/slider/slider.stories.ts
@@ -233,10 +233,9 @@ export const Skeleton = {
       skip: true,
     },
   },
-  render: () =>
-    html`
-      <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>
-    `,
+  render: () => html`
+    <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>
+  `,
 };
 
 export const Playground = {
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/stack/stack.stories.ts b/packages/web-components/src/components/stack/stack.stories.ts
index a087ed0c5ded..efa75cef9c61 100644
--- a/packages/web-components/src/components/stack/stack.stories.ts
+++ b/packages/web-components/src/components/stack/stack.stories.ts
@@ -35,31 +35,32 @@ const controls = {
 };
 
 export const Default = {
-  render: () => html` <cds-stack gap="6">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-  </cds-stack>`,
+  render: () =>
+    html` <cds-stack gap="6">
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </cds-stack>`,
 };
 
 export const Horizontal = {
-  render: () => html` <cds-stack gap="6" orientation="horizontal">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-  </cds-stack>`,
+  render: () =>
+    html` <cds-stack gap="6" orientation="horizontal">
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </cds-stack>`,
 };
 
 export const Playground = {
   args: defaultArgs,
   argTypes: controls,
-  render: ({ gap, orientation }) => html` <cds-stack
-    gap="${gap}"
-    orientation="${orientation}">
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-  </cds-stack>`,
+  render: ({ gap, orientation }) =>
+    html` <cds-stack gap="${gap}" orientation="${orientation}">
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </cds-stack>`,
 };
 
 const meta = {
diff --git a/packages/web-components/src/components/structured-list/structured-list.stories.ts b/packages/web-components/src/components/structured-list/structured-list.stories.ts
index 20e6a4422a01..2723a7d22c51 100644
--- a/packages/web-components/src/components/structured-list/structured-list.stories.ts
+++ b/packages/web-components/src/components/structured-list/structured-list.stories.ts
@@ -127,18 +127,23 @@ export const Selection = {
         </cds-structured-list-head>
         <cds-structured-list-body>
           ${selectionValues.map(
-            (selectionValue, index) => html` <cds-structured-list-row
-              selection-value=${ifDefined(selectionValue)}>
-              <cds-structured-list-cell>Row ${index}</cds-structured-list-cell>
-              <cds-structured-list-cell>Row ${index}</cds-structured-list-cell>
-              <cds-structured-list-cell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
-                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
-                Pellentesque vulputate nisl a porttitor
-                interdum.</cds-structured-list-cell
-              >
-            </cds-structured-list-row>`
+            (selectionValue, index) =>
+              html` <cds-structured-list-row
+                selection-value=${ifDefined(selectionValue)}>
+                <cds-structured-list-cell
+                  >Row ${index}</cds-structured-list-cell
+                >
+                <cds-structured-list-cell
+                  >Row ${index}</cds-structured-list-cell
+                >
+                <cds-structured-list-cell>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                  dui magna, finibus id tortor sed, aliquet bibendum augue.
+                  Aenean posuere sem vel euismod dignissim. Nulla ut cursus
+                  dolor. Pellentesque vulputate nisl a porttitor
+                  interdum.</cds-structured-list-cell
+                >
+              </cds-structured-list-row>`
           )}
         </cds-structured-list-body>
       </cds-structured-list>
@@ -227,11 +232,12 @@ export const skeleton = {
             </cds-structured-list-head>
             <cds-structured-list-body>
               ${Array.apply(null, Array(5)).map(
-                () => html`<cds-structured-list-row>
-                  <cds-structured-list-cell></cds-structured-list-cell>
-                  <cds-structured-list-cell></cds-structured-list-cell>
-                  <cds-structured-list-cell></cds-structured-list-cell>
-                </cds-structured-list-row>`
+                () =>
+                  html`<cds-structured-list-row>
+                    <cds-structured-list-cell></cds-structured-list-cell>
+                    <cds-structured-list-cell></cds-structured-list-cell>
+                    <cds-structured-list-cell></cds-structured-list-cell>
+                  </cds-structured-list-row>`
               )}
             </cds-structured-list-body>
           </cds-structured-list>
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/tag/tag.stories.ts b/packages/web-components/src/components/tag/tag.stories.ts
index 9f383149044f..4e5bac9f9ee2 100644
--- a/packages/web-components/src/components/tag/tag.stories.ts
+++ b/packages/web-components/src/components/tag/tag.stories.ts
@@ -107,24 +107,33 @@ export const Default = {
 };
 
 export const WithAILabel = {
-  render: () => html`<cds-tag type="red"
-      >Tag
-      <cds-ai-label alignment="bottom-left"> ${content}${actions}</cds-ai-label>
-    </cds-tag>
+  render: () =>
+    html`<cds-tag type="red"
+        >Tag
+        <cds-ai-label alignment="bottom-left">
+          ${content}${actions}</cds-ai-label
+        >
+      </cds-tag>
 
-    <cds-tag filter type="purple">
-      Tag
-      <cds-ai-label alignment="bottom-left"> ${content}${actions}</cds-ai-label>
-    </cds-tag>
+      <cds-tag filter type="purple">
+        Tag
+        <cds-ai-label alignment="bottom-left">
+          ${content}${actions}</cds-ai-label
+        >
+      </cds-tag>
 
-    <cds-tag type="blue">
-      ${Asleep16({ slot: 'icon' })} Tag
-      <cds-ai-label alignment="bottom-left"> ${content}${actions}</cds-ai-label>
-    </cds-tag>
-    <cds-tag filter type="green">
-      ${Asleep16({ slot: 'icon' })} Tag
-      <cds-ai-label alignment="bottom-left"> ${content}${actions}</cds-ai-label>
-    </cds-tag>`,
+      <cds-tag type="blue">
+        ${Asleep16({ slot: 'icon' })} Tag
+        <cds-ai-label alignment="bottom-left">
+          ${content}${actions}</cds-ai-label
+        >
+      </cds-tag>
+      <cds-tag filter type="green">
+        ${Asleep16({ slot: 'icon' })} Tag
+        <cds-ai-label alignment="bottom-left">
+          ${content}${actions}</cds-ai-label
+        >
+      </cds-tag>`,
 };
 
 export const Playground = {
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/components/tile/tile.stories.ts b/packages/web-components/src/components/tile/tile.stories.ts
index 18e9e040abe0..d253b31c207c 100644
--- a/packages/web-components/src/components/tile/tile.stories.ts
+++ b/packages/web-components/src/components/tile/tile.stories.ts
@@ -391,8 +391,9 @@ export const RadioWithLayer = {
 };
 
 export const Selectable = {
-  render: () =>
-    html` <cds-selectable-tile> Default tile </cds-selectable-tile> `,
+  render: () => html`
+    <cds-selectable-tile> Default tile </cds-selectable-tile>
+  `,
 };
 
 export const WithAILabel = {
diff --git a/packages/web-components/src/components/tooltip/tooltip.stories.ts b/packages/web-components/src/components/tooltip/tooltip.stories.ts
index 4c42a31ea0a8..3659cb9ecc71 100644
--- a/packages/web-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/web-components/src/components/tooltip/tooltip.stories.ts
@@ -150,11 +150,12 @@ export const Playground = {
 const meta = {
   title: 'Components/Tooltip',
   decorators: [
-    (story) => html`<div class="sb-tooltip-story">
-      <style>
-        ${styles}</style
-      >${story()}
-    </div>`,
+    (story) =>
+      html`<div class="sb-tooltip-story">
+        <style>
+          ${styles}</style
+        >${story()}
+      </div>`,
   ],
 };
 
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 174b20f86a16..d1da596a4d18 100644
--- a/tasks/sync.js
+++ b/tasks/sync.js
@@ -9,7 +9,7 @@
 
 const fs = require('fs-extra');
 const path = require('path');
-const prettier = require('prettier'); //eslint-disable-line no-unused-vars
+const prettier = require('prettier2'); //eslint-disable-line no-unused-vars
 const lerna = require('../lerna.json'); //eslint-disable-line no-unused-vars
 const packageJson = require('../package.json');
 
@@ -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,
diff --git a/yarn.lock b/yarn.lock
index bcbd183d980a..75236e297b49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1744,7 +1744,7 @@ __metadata:
     klaw-sync: "npm:^6.0.0"
     lodash.template: "npm:^4.5.0"
     markdown-toc: "npm:^1.2.0"
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
     prettier-config-carbon: "npm:^0.11.0"
     progress-estimator: "npm:^0.3.0"
     remark: "npm:^10.0.1"
@@ -1877,7 +1877,7 @@ __metadata:
     js-yaml: "npm:^3.12.1"
     klaw-sync: "npm:^6.0.0"
     memfs: "npm:^4.0.0"
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
     prop-types: "npm:^15.6.2"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -1935,7 +1935,7 @@ __metadata:
     "@carbon/icons": "npm:^11.52.0"
     "@ibm/telemetry-js": "npm:^1.5.0"
     fs-extra: "npm:^11.0.0"
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
     rimraf: "npm:^6.0.0"
     rollup: "npm:^2.79.1"
     vue: "npm:^2.6.8"
@@ -2083,6 +2083,7 @@ __metadata:
     mini-css-extract-plugin: "npm:^2.4.5"
     postcss: "npm:^8.4.5"
     postcss-loader: "npm:^8.0.0"
+    prettier2: "npm:prettier@2"
     process: "npm:^0.11.10"
     prop-types: "npm:^15.7.2"
     react: "npm:^18.2.0"
@@ -2117,7 +2118,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@carbon/scss-generator@workspace:packages/scss-generator"
   dependencies:
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
   languageName: unknown
   linkType: soft
 
@@ -2177,7 +2178,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@carbon/test-utils@workspace:packages/test-utils"
   dependencies:
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     resolve: "npm:^1.12.0"
@@ -9665,7 +9666,7 @@ __metadata:
     jest-junit: "npm:^16.0.0"
     lerna: "npm:^8.0.0"
     lint-staged: "npm:^15.0.0"
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     rimraf: "npm:^5.0.0"
@@ -12948,7 +12949,7 @@ __metadata:
     eslint-plugin-storybook: "npm:^0.8.0"
     eslint-plugin-testing-library: "npm:^6.0.1"
     eslint-restricted-globals: "npm:^0.2.0"
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
   peerDependencies:
     eslint: ^9.0.0
   languageName: unknown
@@ -22534,7 +22535,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^2.8.8":
+"prettier2@npm:prettier@2, prettier@npm:^2.8.8":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:
@@ -22543,7 +22544,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.1.1":
+"prettier@npm:^3.1.1, prettier@npm:^3.3.3":
   version: 3.3.3
   resolution: "prettier@npm:3.3.3"
   bin:
@@ -25630,7 +25631,7 @@ __metadata:
   resolution: "stylelint-config-carbon@workspace:config/stylelint-config-carbon"
   dependencies:
     "@double-great/stylelint-a11y": "npm:^3.0.2"
-    prettier: "npm:^2.8.8"
+    prettier: "npm:^3.3.3"
     stylelint: "npm:^16.0.0"
     stylelint-config-idiomatic-order: "npm:^10.0.0"
     stylelint-config-prettier: "npm:^9.0.3"
@@ -25638,6 +25639,7 @@ __metadata:
     stylelint-config-standard-scss: "npm:^13.1.0"
     stylelint-no-unsupported-browser-features: "npm:^8.0.1"
     stylelint-order: "npm:^6.0.0"
+    stylelint-prettier: "npm:^5.0.0"
     stylelint-scss: "npm:^6.2.1"
     stylelint-use-logical: "npm:^2.1.0"
   peerDependencies:
@@ -25745,6 +25747,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stylelint-prettier@npm:^5.0.0":
+  version: 5.0.2
+  resolution: "stylelint-prettier@npm:5.0.2"
+  dependencies:
+    prettier-linter-helpers: "npm:^1.0.0"
+  peerDependencies:
+    prettier: ">=3.0.0"
+    stylelint: ">=16.0.0"
+  checksum: 10/bee52ac6bfd03bfec07a429556d05e1cc754be9f0cf6802e19f06410d7d4cf6b2a01ca987f5e6f7816d8c88a0e73d04aa5b04be43fd121a9f805a9ab079a3719
+  languageName: node
+  linkType: hard
+
 "stylelint-scss@npm:^6.2.1, stylelint-scss@npm:^6.4.0":
   version: 6.8.0
   resolution: "stylelint-scss@npm:6.8.0"