diff --git a/.yarn/cache/sass-npm-1.62.1-c16d65fd28-4e9f3db604.zip b/.yarn/cache/sass-npm-1.62.1-c16d65fd28-4e9f3db604.zip
deleted file mode 100644
index 48dc3cdc903f..000000000000
Binary files a/.yarn/cache/sass-npm-1.62.1-c16d65fd28-4e9f3db604.zip and /dev/null differ
diff --git a/.yarn/cache/sass-npm-1.77.8-d0ad322666-4bf6e3007f.zip b/.yarn/cache/sass-npm-1.77.8-d0ad322666-4bf6e3007f.zip
new file mode 100644
index 000000000000..d1c76375c2e7
Binary files /dev/null and b/.yarn/cache/sass-npm-1.77.8-d0ad322666-4bf6e3007f.zip differ
diff --git a/config/jest-config-carbon/package.json b/config/jest-config-carbon/package.json
index 99f3611d19e0..7531de0c7394 100644
--- a/config/jest-config-carbon/package.json
+++ b/config/jest-config-carbon/package.json
@@ -34,7 +34,7 @@
     "jest-circus": "^28.1.0",
     "jest-environment-jsdom": "^28.1.0",
     "jest-watch-typeahead": "^2.0.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   },
   "devDependencies": {
     "react": "^18.2.0",
diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json
index ac3fac9b8d57..c2d0914086b7 100644
--- a/examples/class-prefix/package.json
+++ b/examples/class-prefix/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "vite": "^4.3.8"
   }
 }
diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json
index 2a0f45ab75fd..0841d4645102 100644
--- a/examples/codesandbox-styles/package.json
+++ b/examples/codesandbox-styles/package.json
@@ -7,7 +7,7 @@
     "dev": "vite"
   },
   "devDependencies": {
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "vite": "^4.3.8"
   },
   "dependencies": {
diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json
index 6c84d10b505c..47bdb85b8ce4 100644
--- a/examples/custom-theme/package.json
+++ b/examples/custom-theme/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "vite": "^4.3.8"
   }
 }
diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json
index ddffcec596a4..66beb8ae9619 100644
--- a/examples/id-prefix/package.json
+++ b/examples/id-prefix/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "vite": "^4.3.8"
   }
 }
diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json
index 45a494e98f02..a15dc992d205 100644
--- a/examples/light-dark-mode/package.json
+++ b/examples/light-dark-mode/package.json
@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "eslint": "8.40.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   }
 }
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index d4a54dcae058..2d5528df072c 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -17,6 +17,6 @@
   "devDependencies": {
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.7",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   }
 }
diff --git a/examples/v10-token-compat-in-v11/package.json b/examples/v10-token-compat-in-v11/package.json
index 226fd0091e2c..28b6bd2f888e 100644
--- a/examples/v10-token-compat-in-v11/package.json
+++ b/examples/v10-token-compat-in-v11/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "vite": "^4.3.8"
   }
 }
diff --git a/examples/vite/package.json b/examples/vite/package.json
index 7588b1c46265..e3c07875354e 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "4.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "vite": "^4.3.8"
   }
 }
diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json
index 47a85c979e2c..5046ba55e6d1 100644
--- a/packages/carbon-components/package.json
+++ b/packages/carbon-components/package.json
@@ -51,7 +51,7 @@
     "@carbon/test-utils": "^10.30.0",
     "fs-extra": "^11.0.0",
     "rimraf": "^5.0.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   },
   "sideEffects": [
     "index.scss",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 07e6064b902a..3b46f8a446e8 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -53,7 +53,7 @@
     "remark": "^10.0.1",
     "replace-in-file": "^7.0.0",
     "rollup": "^2.79.1",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "sassdoc": "^2.7.3",
     "typescript-config-carbon": "^0.2.0",
     "yargs": "^17.0.1"
diff --git a/packages/react/package.json b/packages/react/package.json
index 5b20b4c96609..c735844c5c4b 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -120,7 +120,7 @@
     "rimraf": "^5.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.51.0",
+    "sass": "^1.77.7",
     "sass-loader": "^14.0.0",
     "storybook": "^7.1.0",
     "storybook-addon-accessibility-checker": "^3.1.61-rc.3",
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 5fed1cea6332..bb4a5824818c 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -66,7 +66,7 @@
     "postcss": "^8.4.14",
     "postcss-flexbugs-fixes": "^5.0.2",
     "rimraf": "^5.0.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   },
   "sideEffects": [
     "index.scss",
diff --git a/packages/styles/scss/components/accordion/_accordion.scss b/packages/styles/scss/components/accordion/_accordion.scss
index 5ea63ae6d2ad..cbae066eec6c 100644
--- a/packages/styles/scss/components/accordion/_accordion.scss
+++ b/packages/styles/scss/components/accordion/_accordion.scss
@@ -51,8 +51,10 @@ $content-padding: 0 0 0 $spacing-05 !default;
 
     @include component-reset.reset;
 
-    inline-size: 100%;
-    list-style: none;
+    & {
+      inline-size: 100%;
+      list-style: none;
+    }
   }
 
   .#{$prefix}--accordion__item {
@@ -81,8 +83,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__heading {
-    @include button-reset.reset;
-
     position: relative;
     display: flex;
     flex-direction: $flex-direction;
@@ -111,6 +111,8 @@ $content-padding: 0 0 0 $spacing-05 !default;
         /* Border left */ inset -2px 0 0 0 $focus;
       outline: none;
     }
+
+    @include button-reset.reset;
   }
 
   // Disabled styles
@@ -141,8 +143,6 @@ $content-padding: 0 0 0 $spacing-05 !default;
   }
 
   .#{$prefix}--accordion__arrow {
-    @include focus-outline('reset');
-
     flex: 0 0 1rem;
     block-size: 1rem;
     fill: $icon-primary;
@@ -151,15 +151,17 @@ $content-padding: 0 0 0 $spacing-05 !default;
     // <16px and cause the icon to render in the incorrect artboard size
     transform: rotate(-270deg) #{'/*rtl:ignore*/'};
     transition: all $duration-fast-02 motion(standard, productive);
+
+    @include focus-outline('reset');
   }
 
   .#{$prefix}--accordion__title {
-    @include type-style('body-01');
-
     z-index: 1;
     inline-size: 100%;
     padding-inline-start: $spacing-05;
     text-align: start;
+
+    @include type-style('body-01');
   }
 
   .#{$prefix}--accordion__wrapper {
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index a6978afed9d6..3855ec14f76d 100644
--- a/packages/test-utils/package.json
+++ b/packages/test-utils/package.json
@@ -29,7 +29,7 @@
     "prettier": "^2.8.8",
     "react": "^18.2.0",
     "resolve": "^1.12.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   },
   "devDependencies": {
     "react-dom": "^18.2.0"
diff --git a/www/package.json b/www/package.json
index 7db9117609a3..36575f1149fd 100644
--- a/www/package.json
+++ b/www/package.json
@@ -34,7 +34,7 @@
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.51.0"
+    "sass": "^1.77.7"
   },
   "devDependencies": {
     "fast-glob": "^3.2.7",
diff --git a/yarn.lock b/yarn.lock
index 31749b0863a7..2450f42e6ca8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1799,7 +1799,7 @@ __metadata:
     remark: "npm:^10.0.1"
     replace-in-file: "npm:^7.0.0"
     rollup: "npm:^2.79.1"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     sassdoc: "npm:^2.7.3"
     typescript-config-carbon: "npm:^0.2.0"
     yargs: "npm:^17.0.1"
@@ -2085,7 +2085,7 @@ __metadata:
     rimraf: "npm:^5.0.0"
     rollup: "npm:^2.79.1"
     rollup-plugin-strip-banner: "npm:^3.0.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     sass-loader: "npm:^14.0.0"
     storybook: "npm:^7.1.0"
     storybook-addon-accessibility-checker: "npm:^3.1.61-rc.3"
@@ -2140,7 +2140,7 @@ __metadata:
     postcss: "npm:^8.4.14"
     postcss-flexbugs-fixes: "npm:^5.0.2"
     rimraf: "npm:^5.0.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
   peerDependencies:
     sass: ^1.33.0
   peerDependenciesMeta:
@@ -2157,7 +2157,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     resolve: "npm:^1.12.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
   peerDependencies:
     react-dom: ^16.9.0 || ^17.0.1
   languageName: unknown
@@ -9958,7 +9958,7 @@ __metadata:
     chalk: "npm:1.1.3"
     fs-extra: "npm:^11.0.0"
     rimraf: "npm:^5.0.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
   peerDependencies:
     sass: ^1.33.0
   languageName: unknown
@@ -10300,7 +10300,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     vite: "npm:^4.3.8"
   languageName: unknown
   linkType: soft
@@ -10601,7 +10601,7 @@ __metadata:
   resolution: "codesandbox-styles@workspace:examples/codesandbox-styles"
   dependencies:
     "@carbon/styles": "npm:^1.62.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     vite: "npm:^4.3.8"
   languageName: unknown
   linkType: soft
@@ -11666,7 +11666,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     vite: "npm:^4.3.8"
   languageName: unknown
   linkType: soft
@@ -13841,7 +13841,7 @@ __metadata:
     next: "npm:14.1.1"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
   languageName: unknown
   linkType: soft
 
@@ -13855,7 +13855,7 @@ __metadata:
     next: "npm:14.1.1"
     react: "npm:18.2.0"
     react-dom: "npm:18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
   languageName: unknown
   linkType: soft
 
@@ -16040,7 +16040,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     vite: "npm:^4.3.8"
   languageName: unknown
   linkType: soft
@@ -17359,7 +17359,7 @@ __metadata:
     jest-watch-typeahead: "npm:^2.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
   languageName: unknown
   linkType: soft
 
@@ -24511,16 +24511,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.51.0":
-  version: 1.62.1
-  resolution: "sass@npm:1.62.1"
+"sass@npm:^1.77.7":
+  version: 1.77.8
+  resolution: "sass@npm:1.77.8"
   dependencies:
     chokidar: "npm:>=3.0.0 <4.0.0"
     immutable: "npm:^4.0.0"
     source-map-js: "npm:>=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: 10/4e9f3db604b4a9d50bc0986b1a748cff1986d8545d744c06cac2357057817c8951c605a06f6742df7cc47f98cdb9801cbfa819f3337e7c9a70be2ab1f7d5b343
+  checksum: 10/4bf6e3007fef62dd6dfc657c89c2890872a6b5dc43e2dc4d61bcf9ae1bdc2dd95b59454a3cbd3c8363c98b673b028e1578b26135190d0f2a8a184a38ab41e99b
   languageName: node
   linkType: hard
 
@@ -27766,7 +27766,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     vite: "npm:^4.3.8"
   languageName: unknown
   linkType: soft
@@ -28052,7 +28052,7 @@ __metadata:
     "@vitejs/plugin-react": "npm:4.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     vite: "npm:^4.3.8"
   languageName: unknown
   linkType: soft
@@ -28617,7 +28617,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     rimraf: "npm:^5.0.0"
-    sass: "npm:^1.51.0"
+    sass: "npm:^1.77.7"
     semver: "npm:^7.3.5"
   languageName: unknown
   linkType: soft