diff --git a/packages/components-react/projects/react-ssr-wrapper/tests/unit/specs/__snapshots__/react-ssr-wrapper.spec.tsx.snap b/packages/components-react/projects/react-ssr-wrapper/tests/unit/specs/__snapshots__/react-ssr-wrapper.spec.tsx.snap
index 8aba58f6714..caf378b3ea5 100644
--- a/packages/components-react/projects/react-ssr-wrapper/tests/unit/specs/__snapshots__/react-ssr-wrapper.spec.tsx.snap
+++ b/packages/components-react/projects/react-ssr-wrapper/tests/unit/specs/__snapshots__/react-ssr-wrapper.spec.tsx.snap
@@ -33,7 +33,7 @@ exports[`manual test cases should pass internal props correctly to p-checkbox-wr
             shadowrootmode="open"
           >
             <style>
-              :host{display:inline-flex !important;vertical-align:top !important;color-scheme:light dark !important}:host([hidden]){display:none !important}svg{display:block;fill:none;animation:rotate var(--p-animation-duration, 1.2s) steps(50) infinite}circle:first-child{stroke:#6B6D70}circle:last-child{animation:dash var(--p-animation-duration, 1.2s) steps(50) infinite;stroke:#010205;stroke-dasharray:var(--p-temporary-spinner-stroke-dasharray, 57);stroke-linecap:round}@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}@keyframes dash{0%{stroke-dashoffset:57;transform:rotateZ(0)}50%, 75%{stroke-dashoffset:20;transform:rotateZ(80deg)}100%{stroke-dashoffset:57;transform:rotateZ(360deg)}}.root{display:block;height:inherit;width:inherit;stroke-width:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
+              :host{display:inline-flex;vertical-align:top !important;color-scheme:light dark !important}:host([hidden]){display:none !important}svg{display:block;fill:none;animation:rotate var(--p-animation-duration, 1.2s) steps(50) infinite}circle:first-child{stroke:#6B6D70}circle:last-child{animation:dash var(--p-animation-duration, 1.2s) steps(50) infinite;stroke:#010205;stroke-dasharray:var(--p-temporary-spinner-stroke-dasharray, 57);stroke-linecap:round}@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}@keyframes dash{0%{stroke-dashoffset:57;transform:rotateZ(0)}50%, 75%{stroke-dashoffset:20;transform:rotateZ(80deg)}100%{stroke-dashoffset:57;transform:rotateZ(360deg)}}.root{display:block;height:inherit;width:inherit;stroke-width:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
             </style>
             <span
               aria-label="Loading state of Some label"
@@ -105,7 +105,7 @@ exports[`manual test cases should pass internal props correctly to p-checkbox-wr
             shadowrootmode="open"
           >
             <style>
-              :host{display:inline-flex !important;vertical-align:top !important;color-scheme:light dark !important}:host([hidden]){display:none !important}svg{display:block;fill:none;animation:rotate var(--p-animation-duration, 1.2s) steps(50) infinite}circle:first-child{stroke:#6B6D70}circle:last-child{animation:dash var(--p-animation-duration, 1.2s) steps(50) infinite;stroke:#010205;stroke-dasharray:var(--p-temporary-spinner-stroke-dasharray, 57);stroke-linecap:round}@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}@keyframes dash{0%{stroke-dashoffset:57;transform:rotateZ(0)}50%, 75%{stroke-dashoffset:20;transform:rotateZ(80deg)}100%{stroke-dashoffset:57;transform:rotateZ(360deg)}}.root{display:block;height:inherit;width:inherit;stroke-width:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
+              :host{display:inline-flex;vertical-align:top !important;color-scheme:light dark !important}:host([hidden]){display:none !important}svg{display:block;fill:none;animation:rotate var(--p-animation-duration, 1.2s) steps(50) infinite}circle:first-child{stroke:#6B6D70}circle:last-child{animation:dash var(--p-animation-duration, 1.2s) steps(50) infinite;stroke:#010205;stroke-dasharray:var(--p-temporary-spinner-stroke-dasharray, 57);stroke-linecap:round}@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}@keyframes dash{0%{stroke-dashoffset:57;transform:rotateZ(0)}50%, 75%{stroke-dashoffset:20;transform:rotateZ(80deg)}100%{stroke-dashoffset:57;transform:rotateZ(360deg)}}.root{display:block;height:inherit;width:inherit;stroke-width:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
             </style>
             <span
               aria-label="Loading state of Some label"
@@ -154,7 +154,7 @@ exports[`manual test cases should pass internal props correctly to p-grid-item 1
     shadowrootmode="open"
   >
     <style>
-      :host{display:flex !important;flex:auto !important;width:auto !important;margin-left:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;margin-right:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;color-scheme:light dark !important;flex-direction:row !important;flex-wrap:wrap !important}:host([hidden]){display:none !important}
+      :host{display:flex;flex:auto !important;width:auto !important;margin-left:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;margin-right:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;color-scheme:light dark !important;flex-direction:row !important;flex-wrap:wrap !important}:host([hidden]){display:none !important}
     </style>
     <slot />
   </template>
@@ -200,7 +200,7 @@ exports[`manual test cases should pass internal props correctly to p-grid-item 2
     shadowrootmode="open"
   >
     <style>
-      :host{display:flex !important;flex:auto !important;width:auto !important;margin-left:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;margin-right:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;color-scheme:light dark !important;flex-direction:row !important;flex-wrap:wrap !important}:host([hidden]){display:none !important}
+      :host{display:flex;flex:auto !important;width:auto !important;margin-left:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;margin-right:calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;color-scheme:light dark !important;flex-direction:row !important;flex-wrap:wrap !important}:host([hidden]){display:none !important}
     </style>
     <slot />
   </template>
@@ -944,7 +944,7 @@ exports[`manual test cases should pass internal props correctly to p-radio-butto
             shadowrootmode="open"
           >
             <style>
-              :host{display:inline-flex !important;vertical-align:top !important;color-scheme:light dark !important}:host([hidden]){display:none !important}svg{display:block;fill:none;animation:rotate var(--p-animation-duration, 1.2s) steps(50) infinite}circle:first-child{stroke:#6B6D70}circle:last-child{animation:dash var(--p-animation-duration, 1.2s) steps(50) infinite;stroke:#010205;stroke-dasharray:var(--p-temporary-spinner-stroke-dasharray, 57);stroke-linecap:round}@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}@keyframes dash{0%{stroke-dashoffset:57;transform:rotateZ(0)}50%, 75%{stroke-dashoffset:20;transform:rotateZ(80deg)}100%{stroke-dashoffset:57;transform:rotateZ(360deg)}}.root{display:block;height:inherit;width:inherit;stroke-width:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
+              :host{display:inline-flex;vertical-align:top !important;color-scheme:light dark !important}:host([hidden]){display:none !important}svg{display:block;fill:none;animation:rotate var(--p-animation-duration, 1.2s) steps(50) infinite}circle:first-child{stroke:#6B6D70}circle:last-child{animation:dash var(--p-animation-duration, 1.2s) steps(50) infinite;stroke:#010205;stroke-dasharray:var(--p-temporary-spinner-stroke-dasharray, 57);stroke-linecap:round}@keyframes rotate{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}@keyframes dash{0%{stroke-dashoffset:57;transform:rotateZ(0)}50%, 75%{stroke-dashoffset:20;transform:rotateZ(80deg)}100%{stroke-dashoffset:57;transform:rotateZ(360deg)}}.root{display:block;height:inherit;width:inherit;stroke-width:1.5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
             </style>
             <span
               aria-label="Loading state of Some label"
@@ -1027,7 +1027,7 @@ exports[`manual test cases should pass internal props correctly to p-segmented-c
     shadowrootmode="open"
   >
     <style>
-      :host{display:grid !important;grid-auto-rows:1fr !important;grid-template-columns:repeat(auto-fit, 100px) !important;gap:6px !important;color-scheme:light dark !important}:host([hidden]){display:none !important}
+      :host{display:grid;grid-auto-rows:1fr !important;grid-template-columns:repeat(auto-fit, 100px) !important;gap:6px !important;color-scheme:light dark !important}:host([hidden]){display:none !important}
     </style>
     <slot />
   </template>
@@ -1041,7 +1041,7 @@ exports[`manual test cases should pass internal props correctly to p-segmented-c
       shadowrootmode="open"
     >
       <style>
-        :host{display:block !important;outline:0 !important}:host([hidden]){display:none !important}button{position:relative;display:block;height:100%;width:100%;padding:13px 17px;margin:0;border:2px solid #FBFCFF;border-radius:4px;outline:0;background:transparent;color:#FBFCFF;font:normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:break-word;hyphens:auto;cursor:pointer}button::before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:2px solid transparent;border-radius:7px}span{display:block;font:normal normal 400 clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:normal;hyphens:auto;color:#88898C}
+        :host{display:block;outline:0 !important}:host([hidden]){display:none !important}button{position:relative;display:block;height:100%;width:100%;padding:13px 17px;margin:0;border:2px solid #FBFCFF;border-radius:4px;outline:0;background:transparent;color:#FBFCFF;font:normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:break-word;hyphens:auto;cursor:pointer}button::before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:2px solid transparent;border-radius:7px}span{display:block;font:normal normal 400 clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:normal;hyphens:auto;color:#88898C}
       </style>
       <button
         aria-pressed="true"
@@ -1062,7 +1062,7 @@ exports[`manual test cases should pass internal props correctly to p-segmented-c
       shadowrootmode="open"
     >
       <style>
-        :host{display:block !important;outline:0 !important}:host([hidden]){display:none !important}button{position:relative;display:block;height:100%;width:100%;padding:13px 17px;margin:0;border:2px solid #404044;border-radius:4px;outline:0;background:transparent;color:#FBFCFF;font:normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:break-word;hyphens:auto;cursor:pointer}button::before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:2px solid transparent;border-radius:7px}span{display:block;font:normal normal 400 clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:normal;hyphens:auto;color:#88898C}
+        :host{display:block;outline:0 !important}:host([hidden]){display:none !important}button{position:relative;display:block;height:100%;width:100%;padding:13px 17px;margin:0;border:2px solid #404044;border-radius:4px;outline:0;background:transparent;color:#FBFCFF;font:normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:break-word;hyphens:auto;cursor:pointer}button::before{content:"";position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:2px solid transparent;border-radius:7px}span{display:block;font:normal normal 400 clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem)/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;overflow-wrap:normal;hyphens:auto;color:#88898C}
       </style>
       <button
         aria-pressed="false"
@@ -1681,7 +1681,7 @@ exports[`manual test cases should pass internal props correctly to p-tabs-item 1
       shadowrootmode="open"
     >
       <style>
-        :host{display:block !important;position:relative !important;color:#FBFCFF !important;outline:0 !important}:host([hidden]){display:none !important}
+        :host{display:block;position:relative !important;color:#FBFCFF !important;outline:0 !important}:host([hidden]){display:none !important}
       </style>
       <slot />
     </template>
@@ -1695,7 +1695,7 @@ exports[`manual test cases should pass internal props correctly to p-tabs-item 1
       shadowrootmode="open"
     >
       <style>
-        :host{display:block !important;position:relative !important;color:#FBFCFF !important;outline:0 !important}:host([hidden]){display:none !important}
+        :host{display:block;position:relative !important;color:#FBFCFF !important;outline:0 !important}:host([hidden]){display:none !important}
       </style>
       <slot />
     </template>
@@ -1975,7 +1975,7 @@ exports[`manual test cases should pass internal props correctly to p-text-list-i
       shadowrootmode="open"
     >
       <style>
-        :host{display:grid !important;grid-template-columns:var(--p-internal-text-list-pseudo-space) 1fr !important;column-gap:16px !important;font:inherit !important;color:inherit !important}:host([hidden]){display:none !important}::slotted(*){--p-internal-text-list-unordered-grid-column:.625rem !important;--p-internal-text-list-unordered-pseudo-content:"–" !important;--p-internal-text-list-ordered-grid-column:2rem !important;--p-internal-text-list-ordered-pseudo-suffix:"" !important}::slotted(*:last-child){grid-column:2 !important}
+        :host{display:grid;grid-template-columns:var(--p-internal-text-list-pseudo-space) 1fr !important;column-gap:16px !important;font:inherit !important;color:inherit !important}:host([hidden]){display:none !important}::slotted(*){--p-internal-text-list-unordered-grid-column:.625rem !important;--p-internal-text-list-unordered-pseudo-content:"–" !important;--p-internal-text-list-ordered-grid-column:2rem !important;--p-internal-text-list-ordered-pseudo-suffix:"" !important}::slotted(*:last-child){grid-column:2 !important}
       </style>
       <span>
         <slot />
@@ -1992,7 +1992,7 @@ exports[`manual test cases should pass internal props correctly to p-text-list-i
       shadowrootmode="open"
     >
       <style>
-        :host{display:grid !important;grid-template-columns:var(--p-internal-text-list-pseudo-space) 1fr !important;column-gap:16px !important;font:inherit !important;color:inherit !important}:host([hidden]){display:none !important}::slotted(*){--p-internal-text-list-unordered-grid-column:.625rem !important;--p-internal-text-list-unordered-pseudo-content:"–" !important;--p-internal-text-list-ordered-grid-column:2rem !important;--p-internal-text-list-ordered-pseudo-suffix:"" !important}::slotted(*:last-child){grid-column:2 !important}
+        :host{display:grid;grid-template-columns:var(--p-internal-text-list-pseudo-space) 1fr !important;column-gap:16px !important;font:inherit !important;color:inherit !important}:host([hidden]){display:none !important}::slotted(*){--p-internal-text-list-unordered-grid-column:.625rem !important;--p-internal-text-list-unordered-pseudo-content:"–" !important;--p-internal-text-list-ordered-grid-column:2rem !important;--p-internal-text-list-ordered-pseudo-suffix:"" !important}::slotted(*:last-child){grid-column:2 !important}
       </style>
       <span>
         <slot />
@@ -2013,16 +2013,16 @@ exports[`should render dsr component for PAccordion 1`] = `
   >
     <style>
       :host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #D8D8DB !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -2232,7 +2232,7 @@ exports[`should render dsr component for PBanner 1`] = `
       >
         <style>
           :host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -2926,7 +2926,7 @@ exports[`should render dsr component for PCarousel 1`] = `
   >
     <style>
       :host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -3432,7 +3432,7 @@ exports[`should render dsr component for PFieldset 1`] = `
   >
     <style>
       :host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -3474,7 +3474,7 @@ exports[`should render dsr component for PFieldsetWrapper 1`] = `
   >
     <style>
       :host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -3516,8 +3516,8 @@ exports[`should render dsr component for PFlex 1`] = `
   >
     <style>
       :host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -3818,7 +3818,7 @@ exports[`should render dsr component for PGrid 1`] = `
   >
     <style>
       :host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -4032,7 +4032,7 @@ exports[`should render dsr component for PInlineNotification 1`] = `
   >
     <style>
       :host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -5279,20 +5279,20 @@ exports[`should render dsr component for PModal 1`] = `
   >
     <style>
       :host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -6218,10 +6218,10 @@ exports[`should render dsr component for PPopover 1`] = `
   >
     <style>
       :host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -6768,7 +6768,7 @@ exports[`should render dsr component for PSegmentedControl 1`] = `
   >
     <style>
       :host {
-  display: grid !important;
+  display: grid;
   grid-auto-rows: 1fr !important;
   grid-template-columns: repeat(auto-fit, 100px) !important;
   gap: 6px !important;
@@ -6795,7 +6795,7 @@ exports[`should render dsr component for PSegmentedControlItem 1`] = `
   >
     <style>
       :host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -7076,7 +7076,7 @@ exports[`should render dsr component for PSpinner 1`] = `
   >
     <style>
       :host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -7555,9 +7555,9 @@ exports[`should render dsr component for PSwitch 1`] = `
   >
     <style>
       :host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -7658,7 +7658,7 @@ exports[`should render dsr component for PTable 1`] = `
   >
     <style>
       :host {
-  display: block !important;
+  display: block;
   font: normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif !important;
   overflow-wrap: break-word !important;
   hyphens: auto !important;
@@ -7958,7 +7958,7 @@ exports[`should render dsr component for PTableBody 1`] = `
   >
     <style>
       :host {
-  display: table-row-group !important;
+  display: table-row-group;
 }
 :host([hidden]) {
   display: none !important;
@@ -7981,11 +7981,11 @@ exports[`should render dsr component for PTableCell 1`] = `
   >
     <style>
       :host {
-  display: table-cell !important;
+  display: table-cell;
+  vertical-align: middle;
   padding: clamp(8px, 0.5vw + 6px, 16px) !important;
   margin: 0 !important;
   white-space: nowrap !important;
-  vertical-align: middle;
 }
 :host([hidden]) {
   display: none !important;
@@ -8008,7 +8008,7 @@ exports[`should render dsr component for PTableHead 1`] = `
   >
     <style>
       :host {
-  display: table-header-group !important;
+  display: table-header-group;
   font-size: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem) !important;
   line-height: calc(6px + 2.125ex) !important;
   font-weight: 600 !important;
@@ -8035,7 +8035,7 @@ exports[`should render dsr component for PTableHeadCell 1`] = `
   >
     <style>
       :host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
@@ -8063,7 +8063,7 @@ exports[`should render dsr component for PTableHeadRow 1`] = `
   >
     <style>
       :host {
-  display: table-row !important;
+  display: table-row;
 }
 :host([hidden]) {
   display: none !important;
@@ -8086,7 +8086,7 @@ exports[`should render dsr component for PTableRow 1`] = `
   >
     <style>
       :host {
-  display: table-row !important;
+  display: table-row;
   border-top: 1px solid var(--p-internal-table-border-color) !important;
   border-bottom: 1px solid var(--p-internal-table-border-color) !important;
   transition: background var(--p-transition-duration, 0.25s) cubic-bezier(0.25,0.1,0.25,1) !important;
@@ -8853,7 +8853,7 @@ exports[`should render dsr component for PTabsItem 1`] = `
   >
     <style>
       :host {
-  display: block !important;
+  display: block;
   position: relative !important;
   color: #010205 !important;
   outline: 0 !important;
@@ -9291,7 +9291,7 @@ exports[`should render dsr component for PTextListItem 1`] = `
   >
     <style>
       :host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: var(--p-internal-text-list-pseudo-space) 1fr !important;
   column-gap: 16px !important;
   font: inherit !important;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 499784d4274..1cc29b3da49 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -23,6 +23,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Hide `border-bottom` of `Accordion` if used as single item
   ([#2911](https://github.com/porsche-design-system/porsche-design-system/pull/2911))
+- `display` css property can be overridden on all components, e.g. within media queries  
+  ([#2913](https://github.com/porsche-design-system/porsche-design-system/pull/2913))
 
 ### [3.9.0] - 2023-11-24
 
diff --git a/packages/components/src/components/accordion/__snapshots__/accordion-styles.spec.ts.snap b/packages/components/src/components/accordion/__snapshots__/accordion-styles.spec.ts.snap
index 7215c97ac19..e515e40d70a 100644
--- a/packages/components/src/components/accordion/__snapshots__/accordion-styles.spec.ts.snap
+++ b/packages/components/src/components/accordion/__snapshots__/accordion-styles.spec.ts.snap
@@ -2,16 +2,16 @@
 
 exports[`getComponentCss() should return correct css for size: "medium", compact: false, open: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #D8D8DB !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -99,16 +99,16 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "medium", compact: false, open: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #D8D8DB !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -197,15 +197,15 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "medium", compact: true, open: false and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -293,15 +293,15 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "medium", compact: true, open: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -389,15 +389,15 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "medium", compact: true, open: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -486,16 +486,16 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "small", compact: false, open: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #D8D8DB !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -583,16 +583,16 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "small", compact: false, open: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #404044 !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -681,16 +681,16 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "small", compact: false, open: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #D8D8DB !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -779,15 +779,15 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "small", compact: true, open: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -875,15 +875,15 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: "small", compact: true, open: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
@@ -972,16 +972,16 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for size: {"base":"small","xs":"medium","s":"small","m":"medium","l":"small","xl":"medium"}, compact: false, open: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   border-bottom: 1px solid #404044 !important;
   color-scheme: light dark !important;
 }
-:host([hidden]) {
-  display: none !important;
-}
 :host(:only-of-type) {
   border-bottom: 0 !important;
 }
+:host([hidden]) {
+  display: none !important;
+}
 button {
   display: flex;
   position: relative;
diff --git a/packages/components/src/components/accordion/accordion-styles.ts b/packages/components/src/components/accordion/accordion-styles.ts
index a0a90e462c3..28d806d2523 100644
--- a/packages/components/src/components/accordion/accordion-styles.ts
+++ b/packages/components/src/components/accordion/accordion-styles.ts
@@ -40,18 +40,20 @@ export const getComponentCss = (
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'block',
-        ...(!compact && {
-          borderBottom: `1px solid ${contrastLowColor}`,
-          ...prefersColorSchemeDarkMediaQuery(theme, {
-            borderColor: contrastLowColorDark,
+        ...addImportantToEachRule({
+          ...(!compact && {
+            borderBottom: `1px solid ${contrastLowColor}`,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+              borderColor: contrastLowColorDark,
+            }),
           }),
+          '&(:only-of-type)': { borderBottom: 0 },
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
         }),
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-        '&(:only-of-type)': { borderBottom: 0 },
-      }),
+      },
       button: {
         display: 'flex',
         position: 'relative',
diff --git a/packages/components/src/components/carousel/__snapshots__/carousel-styles.spec.ts.snap b/packages/components/src/components/carousel/__snapshots__/carousel-styles.spec.ts.snap
index 0dfe2d095aa..08b78b00fb6 100644
--- a/packages/components/src/components/carousel/__snapshots__/carousel-styles.spec.ts.snap
+++ b/packages/components/src/components/carousel/__snapshots__/carousel-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: false, isInfinitePagination: false, alignHeader: center and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -134,7 +134,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: false, isInfinitePagination: true, alignHeader: left and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -264,7 +264,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: false, isInfinitePagination: true, alignHeader: start and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -394,7 +394,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: false, alignHeader: center and theme: dark 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -554,7 +554,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: false, alignHeader: start and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -712,7 +712,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: true, alignHeader: center and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -896,7 +896,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: basic, hasPagination: true, isInfinitePagination: true, alignHeader: start and theme: dark 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -1078,7 +1078,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: extended, hasPagination: {"base":false,"xs":true,"s":false,"m":true,"l":false,"xl":true}, isInfinitePagination: false, alignHeader: start and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -1263,7 +1263,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: extended, hasPagination: {"base":false,"xs":true,"s":false,"m":true,"l":false,"xl":true}, isInfinitePagination: true, alignHeader: center and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -1474,7 +1474,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: extended, hasPagination: false, isInfinitePagination: false, alignHeader: center and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -1606,7 +1606,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: extended, hasPagination: false, isInfinitePagination: true, alignHeader: start and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -1736,7 +1736,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: extended, hasPagination: true, isInfinitePagination: false, alignHeader: start and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
@@ -1894,7 +1894,7 @@ h2,::slotted([slot=heading]),p,::slotted([slot=description]) {
 
 exports[`getComponentCss() should return correct css for width: extended, hasPagination: true, isInfinitePagination: true, alignHeader: center and theme: light 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   gap: clamp(16px, 1.25vw + 12px, 36px) !important;
   flex-direction: column !important;
   box-sizing: content-box !important;
diff --git a/packages/components/src/components/carousel/carousel-styles.ts b/packages/components/src/components/carousel/carousel-styles.ts
index acb99689ba1..d57cf7b9b0e 100644
--- a/packages/components/src/components/carousel/carousel-styles.ts
+++ b/packages/components/src/components/carousel/carousel-styles.ts
@@ -77,46 +77,50 @@ export const getComponentCss = (
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'flex',
-        gap: spacingFluidMedium,
-        flexDirection: 'column',
-        boxSizing: 'content-box', // ensures padding is added to host instead of subtracted
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-      }),
-      '::slotted(*)': {
-        borderRadius: addImportantToRule(`var(--p-carousel-border-radius, ${borderRadiusLarge})`),
-      },
-      '::slotted(*:focus-visible)': addImportantToEachRule({
-        outline: `${borderWidthBase} solid ${focusColor}`,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-          outlineColor: focusColorDark,
-        }),
-        outlineOffset: '2px',
-      }),
-      [selectorHeading]: addImportantToEachRule({
-        ...headingXLargeStyle,
-        maxWidth: '56.25rem',
-        margin: 0,
-      }),
-      [selectorDescription]: addImportantToEachRule({
-        ...textSmallStyle,
-        maxWidth: '34.375rem',
-        margin: `${spacingFluidXSmall} 0 0`,
-      }),
-      [`${selectorHeading},${selectorDescription}`]: addImportantToEachRule({
-        color: primaryColor,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-          color: primaryColorDark,
+        ...addImportantToEachRule({
+          gap: spacingFluidMedium,
+          flexDirection: 'column',
+          boxSizing: 'content-box', // ensures padding is added to host instead of subtracted
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
         }),
-        [mediaQueryS]: isHeaderAlignCenter
-          ? {
-              gridColumn: 2,
-            }
-          : {
-              gridColumn: '1 / 3',
-            },
+      },
+      ...addImportantToEachRule({
+        '::slotted(*)': {
+          borderRadius: `var(--p-carousel-border-radius, ${borderRadiusLarge})`,
+        },
+        '::slotted(*:focus-visible)': {
+          outline: `${borderWidthBase} solid ${focusColor}`,
+          ...prefersColorSchemeDarkMediaQuery(theme, {
+            outlineColor: focusColorDark,
+          }),
+          outlineOffset: '2px',
+        },
+        [selectorHeading]: {
+          ...headingXLargeStyle,
+          maxWidth: '56.25rem',
+          margin: 0,
+        },
+        [selectorDescription]: {
+          ...textSmallStyle,
+          maxWidth: '34.375rem',
+          margin: `${spacingFluidXSmall} 0 0`,
+        },
+        [`${selectorHeading},${selectorDescription}`]: {
+          color: primaryColor,
+          ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: primaryColorDark,
+          }),
+          [mediaQueryS]: isHeaderAlignCenter
+            ? {
+                gridColumn: 2,
+              }
+            : {
+                gridColumn: '1 / 3',
+              },
+        },
       }),
     },
     header: {
diff --git a/packages/components/src/components/fieldset-wrapper/__snapshots__/fieldset-wrapper-styles.spec.ts.snap b/packages/components/src/components/fieldset-wrapper/__snapshots__/fieldset-wrapper-styles.spec.ts.snap
index e3649f7a560..be3bbcac943 100644
--- a/packages/components/src/components/fieldset-wrapper/__snapshots__/fieldset-wrapper-styles.spec.ts.snap
+++ b/packages/components/src/components/fieldset-wrapper/__snapshots__/fieldset-wrapper-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for state: error, labelSize: medium, hasLabel: false and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -30,7 +30,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: error, labelSize: medium, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -58,7 +58,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: medium, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -85,7 +85,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: medium, hasLabel: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -118,7 +118,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: medium, hasLabel: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -151,7 +151,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: small, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -178,7 +178,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: small, hasLabel: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -211,7 +211,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: small, hasLabel: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -244,7 +244,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: success, labelSize: medium, hasLabel: false and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -272,7 +272,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: success, labelSize: medium, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
diff --git a/packages/components/src/components/fieldset-wrapper/fieldset-wrapper-styles.ts b/packages/components/src/components/fieldset-wrapper/fieldset-wrapper-styles.ts
index 02ff6bd9324..4d05ebc7b27 100644
--- a/packages/components/src/components/fieldset-wrapper/fieldset-wrapper-styles.ts
+++ b/packages/components/src/components/fieldset-wrapper/fieldset-wrapper-styles.ts
@@ -21,11 +21,13 @@ export const getComponentCss = (
 ): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'block',
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+        }),
+      },
       fieldset: {
         margin: 0,
         padding: 0,
diff --git a/packages/components/src/components/fieldset/__snapshots__/fieldset-styles.spec.ts.snap b/packages/components/src/components/fieldset/__snapshots__/fieldset-styles.spec.ts.snap
index e3649f7a560..be3bbcac943 100644
--- a/packages/components/src/components/fieldset/__snapshots__/fieldset-styles.spec.ts.snap
+++ b/packages/components/src/components/fieldset/__snapshots__/fieldset-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for state: error, labelSize: medium, hasLabel: false and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -30,7 +30,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: error, labelSize: medium, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -58,7 +58,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: medium, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -85,7 +85,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: medium, hasLabel: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -118,7 +118,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: medium, hasLabel: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -151,7 +151,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: small, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -178,7 +178,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: small, hasLabel: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -211,7 +211,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: none, labelSize: small, hasLabel: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -244,7 +244,7 @@ legend {
 
 exports[`getComponentCss() should return correct css for state: success, labelSize: medium, hasLabel: false and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
@@ -272,7 +272,7 @@ fieldset {
 
 exports[`getComponentCss() should return correct css for state: success, labelSize: medium, hasLabel: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   color-scheme: light dark !important;
 }
 :host([hidden]) {
diff --git a/packages/components/src/components/fieldset/fieldset-styles.ts b/packages/components/src/components/fieldset/fieldset-styles.ts
index 0e2763d4e99..404bfc358cf 100644
--- a/packages/components/src/components/fieldset/fieldset-styles.ts
+++ b/packages/components/src/components/fieldset/fieldset-styles.ts
@@ -21,11 +21,13 @@ export const getComponentCss = (
 ): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'block',
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+        }),
+      },
       fieldset: {
         margin: 0,
         padding: 0,
diff --git a/packages/components/src/components/flex/flex/__snapshots__/flex-styles.spec.ts.snap b/packages/components/src/components/flex/flex/__snapshots__/flex-styles.spec.ts.snap
index 4b0ec0ef16b..c0624974f93 100644
--- a/packages/components/src/components/flex/flex/__snapshots__/flex-styles.spec.ts.snap
+++ b/packages/components/src/components/flex/flex/__snapshots__/flex-styles.spec.ts.snap
@@ -2,8 +2,8 @@
 
 exports[`getComponentCss() should return correct css for alignContent: "center" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -17,8 +17,8 @@ exports[`getComponentCss() should return correct css for alignContent: "center"
 
 exports[`getComponentCss() should return correct css for alignContent: "flex-end" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -32,8 +32,8 @@ exports[`getComponentCss() should return correct css for alignContent: "flex-end
 
 exports[`getComponentCss() should return correct css for alignContent: "flex-start" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -47,8 +47,8 @@ exports[`getComponentCss() should return correct css for alignContent: "flex-sta
 
 exports[`getComponentCss() should return correct css for alignContent: "space-around" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -62,8 +62,8 @@ exports[`getComponentCss() should return correct css for alignContent: "space-ar
 
 exports[`getComponentCss() should return correct css for alignContent: "space-between" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -77,8 +77,8 @@ exports[`getComponentCss() should return correct css for alignContent: "space-be
 
 exports[`getComponentCss() should return correct css for alignContent: "space-evenly" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -92,8 +92,8 @@ exports[`getComponentCss() should return correct css for alignContent: "space-ev
 
 exports[`getComponentCss() should return correct css for alignContent: "stretch" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -107,8 +107,8 @@ exports[`getComponentCss() should return correct css for alignContent: "stretch"
 
 exports[`getComponentCss() should return correct css for alignContent: {"base":"stretch","xs":"center","s":"stretch","m":"center","l":"stretch","xl":"center"} 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -152,8 +152,8 @@ exports[`getComponentCss() should return correct css for alignContent: {"base":"
 
 exports[`getComponentCss() should return correct css for alignItems: "baseline" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -167,8 +167,8 @@ exports[`getComponentCss() should return correct css for alignItems: "baseline"
 
 exports[`getComponentCss() should return correct css for alignItems: "center" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -182,8 +182,8 @@ exports[`getComponentCss() should return correct css for alignItems: "center" 1`
 
 exports[`getComponentCss() should return correct css for alignItems: "flex-end" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -197,8 +197,8 @@ exports[`getComponentCss() should return correct css for alignItems: "flex-end"
 
 exports[`getComponentCss() should return correct css for alignItems: "flex-start" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -212,8 +212,8 @@ exports[`getComponentCss() should return correct css for alignItems: "flex-start
 
 exports[`getComponentCss() should return correct css for alignItems: "stretch" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -227,8 +227,8 @@ exports[`getComponentCss() should return correct css for alignItems: "stretch" 1
 
 exports[`getComponentCss() should return correct css for alignItems: {"base":"stretch","xs":"center","s":"stretch","m":"center","l":"stretch","xl":"center"} 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -272,8 +272,8 @@ exports[`getComponentCss() should return correct css for alignItems: {"base":"st
 
 exports[`getComponentCss() should return correct css for all props being breakpoint customizable 1`] = `
 ":host {
+  display: inline-flex;
   color-scheme: light dark !important;
-  display: inline-flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -285,7 +285,6 @@ exports[`getComponentCss() should return correct css for all props being breakpo
 }
 @media(min-width:480px) {
   :host {
-    display: flex !important;
     flex-wrap: wrap !important;
     flex-direction: column !important;
     justify-content: center !important;
@@ -296,7 +295,6 @@ exports[`getComponentCss() should return correct css for all props being breakpo
 
 @media(min-width:760px) {
   :host {
-    display: flex !important;
     flex-wrap: nowrap !important;
     flex-direction: row !important;
     justify-content: flex-start !important;
@@ -307,7 +305,6 @@ exports[`getComponentCss() should return correct css for all props being breakpo
 
 @media(min-width:1000px) {
   :host {
-    display: inline-flex !important;
     flex-wrap: wrap !important;
     flex-direction: column !important;
     justify-content: center !important;
@@ -318,7 +315,6 @@ exports[`getComponentCss() should return correct css for all props being breakpo
 
 @media(min-width:1300px) {
   :host {
-    display: flex !important;
     flex-wrap: nowrap !important;
     flex-direction: row !important;
     justify-content: flex-start !important;
@@ -329,7 +325,6 @@ exports[`getComponentCss() should return correct css for all props being breakpo
 
 @media(min-width:1760px) {
   :host {
-    display: inline-flex !important;
     flex-wrap: wrap !important;
     flex-direction: column !important;
     justify-content: center !important;
@@ -342,8 +337,8 @@ exports[`getComponentCss() should return correct css for all props being breakpo
 
 exports[`getComponentCss() should return correct css for direction: "column" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: column !important;
   justify-content: flex-start !important;
@@ -357,8 +352,8 @@ exports[`getComponentCss() should return correct css for direction: "column" 1`]
 
 exports[`getComponentCss() should return correct css for direction: "column-reverse" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: column-reverse !important;
   justify-content: flex-start !important;
@@ -372,8 +367,8 @@ exports[`getComponentCss() should return correct css for direction: "column-reve
 
 exports[`getComponentCss() should return correct css for direction: "row" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -387,8 +382,8 @@ exports[`getComponentCss() should return correct css for direction: "row" 1`] =
 
 exports[`getComponentCss() should return correct css for direction: "row-reverse" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row-reverse !important;
   justify-content: flex-start !important;
@@ -402,8 +397,8 @@ exports[`getComponentCss() should return correct css for direction: "row-reverse
 
 exports[`getComponentCss() should return correct css for direction: {"base":"row","xs":"column","s":"row","m":"column","l":"row","xl":"column"} 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -447,8 +442,8 @@ exports[`getComponentCss() should return correct css for direction: {"base":"row
 
 exports[`getComponentCss() should return correct css for inline: {"base":true,"xs":false,"s":false,"m":true,"l":false,"xl":true} 1`] = `
 ":host {
+  display: inline-flex;
   color-scheme: light dark !important;
-  display: inline-flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -460,31 +455,31 @@ exports[`getComponentCss() should return correct css for inline: {"base":true,"x
 }
 @media(min-width:480px) {
   :host {
-    display: flex !important;
+    display: flex;
   }
 }
 
 @media(min-width:760px) {
   :host {
-    display: flex !important;
+    display: flex;
   }
 }
 
 @media(min-width:1000px) {
   :host {
-    display: inline-flex !important;
+    display: inline-flex;
   }
 }
 
 @media(min-width:1300px) {
   :host {
-    display: flex !important;
+    display: flex;
   }
 }
 
 @media(min-width:1760px) {
   :host {
-    display: inline-flex !important;
+    display: inline-flex;
   }
 }
 "
@@ -492,8 +487,8 @@ exports[`getComponentCss() should return correct css for inline: {"base":true,"x
 
 exports[`getComponentCss() should return correct css for inline: false 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -507,8 +502,8 @@ exports[`getComponentCss() should return correct css for inline: false 1`] = `
 
 exports[`getComponentCss() should return correct css for inline: true 1`] = `
 ":host {
+  display: inline-flex;
   color-scheme: light dark !important;
-  display: inline-flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -522,8 +517,8 @@ exports[`getComponentCss() should return correct css for inline: true 1`] = `
 
 exports[`getComponentCss() should return correct css for justifyContent: "center" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: center !important;
@@ -537,8 +532,8 @@ exports[`getComponentCss() should return correct css for justifyContent: "center
 
 exports[`getComponentCss() should return correct css for justifyContent: "flex-end" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-end !important;
@@ -552,8 +547,8 @@ exports[`getComponentCss() should return correct css for justifyContent: "flex-e
 
 exports[`getComponentCss() should return correct css for justifyContent: "flex-start" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -567,8 +562,8 @@ exports[`getComponentCss() should return correct css for justifyContent: "flex-s
 
 exports[`getComponentCss() should return correct css for justifyContent: "space-around" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: space-around !important;
@@ -582,8 +577,8 @@ exports[`getComponentCss() should return correct css for justifyContent: "space-
 
 exports[`getComponentCss() should return correct css for justifyContent: "space-between" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: space-between !important;
@@ -597,8 +592,8 @@ exports[`getComponentCss() should return correct css for justifyContent: "space-
 
 exports[`getComponentCss() should return correct css for justifyContent: "space-evenly" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: space-evenly !important;
@@ -612,8 +607,8 @@ exports[`getComponentCss() should return correct css for justifyContent: "space-
 
 exports[`getComponentCss() should return correct css for justifyContent: {"base":"flex-start","xs":"center","s":"flex-start","m":"center","l":"flex-start","xl":"center"} 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -657,8 +652,8 @@ exports[`getComponentCss() should return correct css for justifyContent: {"base"
 
 exports[`getComponentCss() should return correct css for wrap: "nowrap" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -672,8 +667,8 @@ exports[`getComponentCss() should return correct css for wrap: "nowrap" 1`] = `
 
 exports[`getComponentCss() should return correct css for wrap: "wrap" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: wrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -687,8 +682,8 @@ exports[`getComponentCss() should return correct css for wrap: "wrap" 1`] = `
 
 exports[`getComponentCss() should return correct css for wrap: "wrap-reverse" 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: wrap-reverse !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
@@ -702,8 +697,8 @@ exports[`getComponentCss() should return correct css for wrap: "wrap-reverse" 1`
 
 exports[`getComponentCss() should return correct css for wrap: {"base":"nowrap","xs":"wrap","s":"nowrap","m":"wrap","l":"nowrap","xl":"wrap"} 1`] = `
 ":host {
+  display: flex;
   color-scheme: light dark !important;
-  display: flex !important;
   flex-wrap: nowrap !important;
   flex-direction: row !important;
   justify-content: flex-start !important;
diff --git a/packages/components/src/components/flex/flex/flex-styles.ts b/packages/components/src/components/flex/flex/flex-styles.ts
index ba8eb285e40..02c937d91f2 100644
--- a/packages/components/src/components/flex/flex/flex-styles.ts
+++ b/packages/components/src/components/flex/flex/flex-styles.ts
@@ -20,28 +20,31 @@ export const getComponentCss = (
 ): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule(
-        mergeDeep(
-          colorSchemeStyles,
-          hostHiddenStyles,
-          buildResponsiveStyles(inline, (inlineResponsive: FlexInline) => ({
-            display: inlineResponsive ? 'inline-flex' : 'flex',
-          })),
-          buildResponsiveStyles(wrap, (flexWrapResponsive: FlexWrap) => ({ flexWrap: flexWrapResponsive })),
-          buildResponsiveStyles(direction, (flexDirectionResponsive: FlexDirection) => ({
-            flexDirection: flexDirectionResponsive,
-          })),
-          buildResponsiveStyles(justifyContent, (justifyContentResponsive: FlexJustifyContent) => ({
-            justifyContent: justifyContentResponsive,
-          })),
-          buildResponsiveStyles(alignItems, (alignItemsResponsive: FlexAlignItems) => ({
-            alignItems: alignItemsResponsive,
-          })),
-          buildResponsiveStyles(alignContent, (alignContentResponsive: FlexAlignContent) => ({
-            alignContent: alignContentResponsive,
-          }))
-        )
-      ),
+      ':host': {
+        ...buildResponsiveStyles(inline, (inlineResponsive: FlexInline) => ({
+          display: inlineResponsive ? 'inline-flex' : 'flex',
+        })),
+        ...addImportantToEachRule(
+          mergeDeep(
+            colorSchemeStyles,
+            hostHiddenStyles,
+
+            buildResponsiveStyles(wrap, (flexWrapResponsive: FlexWrap) => ({ flexWrap: flexWrapResponsive })),
+            buildResponsiveStyles(direction, (flexDirectionResponsive: FlexDirection) => ({
+              flexDirection: flexDirectionResponsive,
+            })),
+            buildResponsiveStyles(justifyContent, (justifyContentResponsive: FlexJustifyContent) => ({
+              justifyContent: justifyContentResponsive,
+            })),
+            buildResponsiveStyles(alignItems, (alignItemsResponsive: FlexAlignItems) => ({
+              alignItems: alignItemsResponsive,
+            })),
+            buildResponsiveStyles(alignContent, (alignContentResponsive: FlexAlignContent) => ({
+              alignContent: alignContentResponsive,
+            }))
+          )
+        ),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/grid/grid/__snapshots__/grid-styles.spec.ts.snap b/packages/components/src/components/grid/grid/__snapshots__/grid-styles.spec.ts.snap
index d4bab03e339..fdde6cddf52 100644
--- a/packages/components/src/components/grid/grid/__snapshots__/grid-styles.spec.ts.snap
+++ b/packages/components/src/components/grid/grid/__snapshots__/grid-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for direction: "column" 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -18,7 +18,7 @@ exports[`getComponentCss() should return correct css for direction: "column" 1`]
 
 exports[`getComponentCss() should return correct css for direction: "column-reverse" 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -34,7 +34,7 @@ exports[`getComponentCss() should return correct css for direction: "column-reve
 
 exports[`getComponentCss() should return correct css for direction: "row" 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -50,7 +50,7 @@ exports[`getComponentCss() should return correct css for direction: "row" 1`] =
 
 exports[`getComponentCss() should return correct css for direction: "row-reverse" 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -66,7 +66,7 @@ exports[`getComponentCss() should return correct css for direction: "row-reverse
 
 exports[`getComponentCss() should return correct css for direction: {"base":"column","xs":"row","s":"column","m":"row","l":"column","xl":"row"} 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -112,7 +112,7 @@ exports[`getComponentCss() should return correct css for direction: {"base":"col
 
 exports[`getComponentCss() should return correct css for wrap: "nowrap" 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -128,7 +128,7 @@ exports[`getComponentCss() should return correct css for wrap: "nowrap" 1`] = `
 
 exports[`getComponentCss() should return correct css for wrap: "wrap" 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
@@ -144,7 +144,7 @@ exports[`getComponentCss() should return correct css for wrap: "wrap" 1`] = `
 
 exports[`getComponentCss() should return correct css for wrap: {"base":"wrap","xs":"nowrap","s":"wrap","m":"nowrap","l":"wrap","xl":"nowrap"} 1`] = `
 ":host {
-  display: flex !important;
+  display: flex;
   flex: auto !important;
   width: auto !important;
   margin-left: calc(clamp(16px, 1.25vw + 12px, 36px) / -2) !important;
diff --git a/packages/components/src/components/grid/grid/grid-styles.ts b/packages/components/src/components/grid/grid/grid-styles.ts
index 85899ed0359..12454d2db97 100644
--- a/packages/components/src/components/grid/grid/grid-styles.ts
+++ b/packages/components/src/components/grid/grid/grid-styles.ts
@@ -12,19 +12,21 @@ export const getComponentCss = (
 ): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'flex',
-        flex: 'auto',
-        width: 'auto',
-        marginLeft: gutter,
-        marginRight: gutter,
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-        ...mergeDeep(
-          buildResponsiveStyles(direction, (flexDirection: GridDirection) => ({ flexDirection })),
-          buildResponsiveStyles(wrap, (flexWrap: GridWrap) => ({ flexWrap }))
-        ),
-      }),
+        ...addImportantToEachRule({
+          flex: 'auto',
+          width: 'auto',
+          marginLeft: gutter,
+          marginRight: gutter,
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+          ...mergeDeep(
+            buildResponsiveStyles(direction, (flexDirection: GridDirection) => ({ flexDirection })),
+            buildResponsiveStyles(wrap, (flexWrap: GridWrap) => ({ flexWrap }))
+          ),
+        }),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/host-display-style.spec.ts b/packages/components/src/components/host-display-style.spec.ts
new file mode 100644
index 00000000000..67d8cdd2d96
--- /dev/null
+++ b/packages/components/src/components/host-display-style.spec.ts
@@ -0,0 +1,35 @@
+import { TAG_NAMES, type TagName } from '@porsche-design-system/shared';
+import { getComponentMeta } from '@porsche-design-system/component-meta';
+import {
+  addParentAndSetRequiredProps,
+  componentFactory,
+  getComponentCssObject,
+  getComponentCssSpy,
+} from '../test-utils';
+
+const tagNamesWithJss = TAG_NAMES.filter((tagName) => getComponentMeta(tagName).styling === 'jss');
+
+it.each<TagName>(tagNamesWithJss)(
+  'should not have !important keyword on "display" css property for ":host" selector of %s',
+  (tagName) => {
+    // mock to get the result from getComponentCss() directly
+    const spy = getComponentCssSpy();
+
+    const component = componentFactory(tagName);
+
+    // some components like grid-item and text-list-item require a parent to apply styles
+    // some components require a parent and certain props in order to work
+    addParentAndSetRequiredProps(tagName, component);
+
+    component.render();
+    expect(spy).toBeCalledTimes(1);
+
+    const cssObject = getComponentCssObject(spy);
+    if (cssObject[':host'].display) {
+      expect(cssObject[':host'].display).not.toMatch(/!important/);
+    } else {
+      // some components don't have a display style
+      expect(cssObject[':host'].display).toBeUndefined();
+    }
+  }
+);
diff --git a/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles-shared.spec.ts.snap b/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles-shared.spec.ts.snap
index 78037b348dd..b7a121802d4 100644
--- a/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles-shared.spec.ts.snap
+++ b/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles-shared.spec.ts.snap
@@ -26,7 +26,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#FFE2E4",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -41,7 +40,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#3A0F0F",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -56,7 +54,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#D3E1FF",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -71,7 +68,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#D3E1FF",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr) auto",
   "padding": "16px",
@@ -86,7 +82,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#04294E",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -101,7 +96,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#D3E1FF",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -116,7 +110,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#D3E1FF",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr) auto",
   "padding": "16px",
@@ -131,7 +124,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#D3E1FF",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -146,7 +138,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#04294E",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -161,7 +152,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#E4FFEC",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -176,7 +166,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#003320",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -191,7 +180,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#FFF4D2",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
@@ -206,7 +194,6 @@ exports[`getNotificationRootJssStyles() should return correct JssStyle for state
   },
   "background": "#362B0A",
   "borderRadius": "4px",
-  "display": "grid",
   "gap": "16px",
   "gridTemplateColumns": "minmax(auto, 1fr)",
   "padding": "16px",
diff --git a/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles.spec.ts.snap b/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles.spec.ts.snap
index bf72e764bc5..7d656c76635 100644
--- a/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles.spec.ts.snap
+++ b/packages/components/src/components/inline-notification/__snapshots__/inline-notification-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for state: error, hasAction: false, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -53,7 +53,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: error, hasAction: false, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -104,7 +104,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: false, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -155,7 +155,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: false, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -206,7 +206,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: false, hasClose: true and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -257,7 +257,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: false, hasClose: true and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -308,7 +308,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: true, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -362,7 +362,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: true, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -416,7 +416,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: true, hasClose: true and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -470,7 +470,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: info, hasAction: true, hasClose: true and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -524,7 +524,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: false, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -575,7 +575,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: false, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -626,7 +626,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: false, hasClose: true and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -677,7 +677,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: false, hasClose: true and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -728,7 +728,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: true, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -782,7 +782,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: true, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -836,7 +836,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: true, hasClose: true and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -890,7 +890,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: neutral, hasAction: true, hasClose: true and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) auto !important;
   gap: 16px !important;
   place-items: start !important;
@@ -944,7 +944,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: success, hasAction: false, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -995,7 +995,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: success, hasAction: false, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -1046,7 +1046,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: warning, hasAction: false, hasClose: false and theme: dark 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
@@ -1097,7 +1097,7 @@ h5,p {
 
 exports[`getComponentCss() should return correct css for state: warning, hasAction: false, hasClose: false and theme: light 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: minmax(auto, 1fr) !important;
   gap: 16px !important;
   place-items: start !important;
diff --git a/packages/components/src/components/inline-notification/inline-notification-styles-shared.ts b/packages/components/src/components/inline-notification/inline-notification-styles-shared.ts
index ecffa6dee90..9cf778c175f 100644
--- a/packages/components/src/components/inline-notification/inline-notification-styles-shared.ts
+++ b/packages/components/src/components/inline-notification/inline-notification-styles-shared.ts
@@ -34,7 +34,7 @@ export const getNotificationRootJssStyle = (
   theme: Theme
 ): JssStyle => {
   return {
-    display: 'grid',
+    // display: 'grid', // NOTE: display property is moved into component styled to not apply !important keyword
     // 2 columns for content and optional close button
     gridTemplateColumns: `minmax(auto, 1fr)${hasClose ? ' auto' : ''}`,
     gap: spacingStaticMedium,
diff --git a/packages/components/src/components/inline-notification/inline-notification-styles.ts b/packages/components/src/components/inline-notification/inline-notification-styles.ts
index 02b2a98f371..aef6da9294b 100644
--- a/packages/components/src/components/inline-notification/inline-notification-styles.ts
+++ b/packages/components/src/components/inline-notification/inline-notification-styles.ts
@@ -25,11 +25,14 @@ export const getComponentCss = (
 ): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
-        ...getNotificationRootJssStyle(state, hasAction, hasClose, theme),
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-      }),
+      ':host': {
+        display: 'grid',
+        ...addImportantToEachRule({
+          ...getNotificationRootJssStyle(state, hasAction, hasClose, theme),
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+        }),
+      },
       h5: headingSmallStyle,
       p: textSmallStyle,
       'h5,p': {
diff --git a/packages/components/src/components/modal/__snapshots__/modal-styles.spec.ts.snap b/packages/components/src/components/modal/__snapshots__/modal-styles.spec.ts.snap
index d3b7f66e0f1..8f429b011be 100644
--- a/packages/components/src/components/modal/__snapshots__/modal-styles.spec.ts.snap
+++ b/packages/components/src/components/modal/__snapshots__/modal-styles.spec.ts.snap
@@ -2,20 +2,20 @@
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: false, dismissButton: false, hasHeader: true, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -100,20 +100,20 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: false, dismissButton: true, hasHeader: false, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -218,20 +218,20 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: false, dismissButton: true, hasHeader: true, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -336,20 +336,20 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: true, dismissButton: false, hasHeader: false, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -434,20 +434,20 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: true, dismissButton: false, hasHeader: true, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -532,20 +532,20 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: true, dismissButton: true, hasHeader: false, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -650,20 +650,20 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: false, fullscreen: true, dismissButton: true, hasHeader: true, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: hidden !important;
   transition: visibility 0s linear var(--p-transition-duration, 0.25s) !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -768,19 +768,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: { base: true, xs: false, s: true, m: false, l: true, xl: false }, dismissButton: true, hasHeader: false, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1014,19 +1014,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: false, dismissButton: false, hasHeader: false, hasFooter: true and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1124,19 +1124,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: false, dismissButton: false, hasHeader: true, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1221,19 +1221,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: false, dismissButton: false, hasHeader: true, hasFooter: true and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1331,19 +1331,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: false, dismissButton: true, hasHeader: false, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1448,19 +1448,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: false, dismissButton: true, hasHeader: true, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1565,19 +1565,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: true, dismissButton: false, hasHeader: false, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1662,19 +1662,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: true, dismissButton: false, hasHeader: true, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1759,19 +1759,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: true, dismissButton: true, hasHeader: false, hasFooter: false and theme: light 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
@@ -1876,19 +1876,19 @@ h2 {
 
 exports[`getComponentCss() should return correct css for open: true, fullscreen: true, dismissButton: true, hasHeader: true, hasFooter: false and theme: dark 1`] = `
 ":host {
+  display: flex;
+  overflow-y: auto;
   position: fixed !important;
   top: 0 !important;
   left: 0 !important;
   right: 0 !important;
   bottom: 0 !important;
   z-index: 99999 !important;
-  display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   flex-wrap: wrap !important;
   visibility: inherit !important;
   color-scheme: light dark !important;
-  overflow-y: auto;
 }
 :host([hidden]) {
   display: none !important;
diff --git a/packages/components/src/components/modal/modal-styles.ts b/packages/components/src/components/modal/modal-styles.ts
index 716e9c2a1ca..e4b7daccd1c 100644
--- a/packages/components/src/components/modal/modal-styles.ts
+++ b/packages/components/src/components/modal/modal-styles.ts
@@ -112,11 +112,12 @@ export const getComponentCss = (
   return getCss({
     '@global': {
       ':host': {
+        display: 'flex',
+        overflowY: 'auto', // overrideable
         ...addImportantToEachRule({
           position: 'fixed',
           ...getInsetJssStyle(),
           zIndex: MODAL_Z_INDEX,
-          display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
           flexWrap: 'wrap',
@@ -132,7 +133,6 @@ export const getComponentCss = (
           ...hostHiddenStyles,
           ...getFrostedGlassBackgroundJssStyles(isOpen, duration, theme),
         }),
-        overflowY: 'auto', // overrideable
       },
       '::slotted': addImportantToEachRule(
         mergeDeep(
diff --git a/packages/components/src/components/popover/__snapshots__/popover-styles.spec.ts.snap b/packages/components/src/components/popover/__snapshots__/popover-styles.spec.ts.snap
index 8cd1c15f5b2..0aa3918f503 100644
--- a/packages/components/src/components/popover/__snapshots__/popover-styles.spec.ts.snap
+++ b/packages/components/src/components/popover/__snapshots__/popover-styles.spec.ts.snap
@@ -2,10 +2,10 @@
 
 exports[`getComponentCss() should return correct css for direction: bottom, isNative: false and theme: dark 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -127,10 +127,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: bottom, isNative: false and theme: light 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -252,10 +252,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: left, isNative: false and theme: dark 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -377,10 +377,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: left, isNative: false and theme: light 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -502,10 +502,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: right, isNative: false and theme: dark 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -627,10 +627,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: right, isNative: false and theme: light 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -752,10 +752,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: top, isNative: false and theme: dark 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -877,10 +877,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: top, isNative: false and theme: light 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
@@ -1002,10 +1002,10 @@ button:focus:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for direction: top, isNative: true and theme: light 1`] = `
 ":host {
+  display: inline-block;
+  vertical-align: top;
   position: relative !important;
-  display: inline-block !important;
   color-scheme: light dark !important;
-  vertical-align: top;
 }
 :host([hidden]) {
   display: none !important;
diff --git a/packages/components/src/components/popover/popover-styles.ts b/packages/components/src/components/popover/popover-styles.ts
index a9e3309c187..c56e4b5c7aa 100644
--- a/packages/components/src/components/popover/popover-styles.ts
+++ b/packages/components/src/components/popover/popover-styles.ts
@@ -153,13 +153,13 @@ export const getComponentCss = (direction: PopoverDirection, isNative: boolean,
   return getCss({
     '@global': {
       ':host': {
+        display: 'inline-block',
+        verticalAlign: 'top',
         ...addImportantToEachRule({
           position: 'relative',
-          display: 'inline-block',
           ...colorSchemeStyles,
           ...hostHiddenStyles,
         }),
-        verticalAlign: 'top',
       },
       p: {
         ...textSmallStyle,
diff --git a/packages/components/src/components/segmented-control/segmented-control-item/__snapshots__/segmented-control-item-styles.spec.ts.snap b/packages/components/src/components/segmented-control/segmented-control-item/__snapshots__/segmented-control-item-styles.spec.ts.snap
index 896cd68d434..199b2d7cf9c 100644
--- a/packages/components/src/components/segmented-control/segmented-control-item/__snapshots__/segmented-control-item-styles.spec.ts.snap
+++ b/packages/components/src/components/segmented-control/segmented-control-item/__snapshots__/segmented-control-item-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: false, hasIcon: false, hasSlottedContent: false and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -61,7 +61,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: false, hasIcon: false, hasSlottedContent: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -120,7 +120,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: false, hasIcon: false, hasSlottedContent: true and theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -179,7 +179,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: false, hasIcon: false, hasSlottedContent: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -238,7 +238,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: false, hasIcon: true, hasSlottedContent: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -301,7 +301,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: false, hasIcon: true, hasSlottedContent: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -365,7 +365,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: true, hasIcon: true, hasSlottedContent: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -419,7 +419,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: false, isSelected: true, hasIcon: true, hasSlottedContent: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -474,7 +474,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: true, isSelected: false, hasIcon: true, hasSlottedContent: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -528,7 +528,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: true, isSelected: false, hasIcon: true, hasSlottedContent: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -583,7 +583,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: true, isSelected: true, hasIcon: true, hasSlottedContent: false and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
@@ -637,7 +637,7 @@ span {
 
 exports[`getComponentCss() should return correct css for isDisabled: true, isSelected: true, hasIcon: true, hasSlottedContent: true and theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   outline: 0 !important;
 }
 :host([hidden]) {
diff --git a/packages/components/src/components/segmented-control/segmented-control-item/segmented-control-item-styles.ts b/packages/components/src/components/segmented-control/segmented-control-item/segmented-control-item-styles.ts
index 999d974a476..18370c9fc74 100644
--- a/packages/components/src/components/segmented-control/segmented-control-item/segmented-control-item-styles.ts
+++ b/packages/components/src/components/segmented-control/segmented-control-item/segmented-control-item-styles.ts
@@ -67,11 +67,13 @@ export const getComponentCss = (
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'block',
-        outline: 0,
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          outline: 0,
+          ...hostHiddenStyles,
+        }),
+      },
       // All width relevant styling has to be kept in sync with the tempDiv of the p-segmented-control utils
       button: {
         position: 'relative',
diff --git a/packages/components/src/components/segmented-control/segmented-control/__snapshots__/segmented-control-styles.spec.ts.snap b/packages/components/src/components/segmented-control/segmented-control/__snapshots__/segmented-control-styles.spec.ts.snap
index d458ffe15a2..3562dea7c6e 100644
--- a/packages/components/src/components/segmented-control/segmented-control/__snapshots__/segmented-control-styles.spec.ts.snap
+++ b/packages/components/src/components/segmented-control/segmented-control/__snapshots__/segmented-control-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for maxWidth: 20 and columns: { base: 4, s: 3, m: 2, l: 'auto' } 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-auto-rows: 1fr !important;
   grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
   gap: 6px !important;
@@ -33,7 +33,7 @@ exports[`getComponentCss() should return correct css for maxWidth: 20 and column
 
 exports[`getComponentCss() should return correct css for maxWidth: 20 and columns: auto 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-auto-rows: 1fr !important;
   grid-template-columns: repeat(auto-fit, 46px) !important;
   gap: 6px !important;
@@ -46,7 +46,7 @@ exports[`getComponentCss() should return correct css for maxWidth: 20 and column
 
 exports[`getComponentCss() should return correct css for maxWidth: 80 and columns: 1 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-auto-rows: 1fr !important;
   grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   gap: 6px !important;
@@ -59,7 +59,7 @@ exports[`getComponentCss() should return correct css for maxWidth: 80 and column
 
 exports[`getComponentCss() should return correct css for maxWidth: 230 and columns: 10 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-auto-rows: 1fr !important;
   grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
   gap: 6px !important;
diff --git a/packages/components/src/components/segmented-control/segmented-control/segmented-control-styles.ts b/packages/components/src/components/segmented-control/segmented-control/segmented-control-styles.ts
index f7b8efecbdd..dc7e989e8f8 100644
--- a/packages/components/src/components/segmented-control/segmented-control/segmented-control-styles.ts
+++ b/packages/components/src/components/segmented-control/segmented-control/segmented-control-styles.ts
@@ -11,16 +11,18 @@ export const getComponentCss = (maxWidth: number, columns: BreakpointCustomizabl
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'grid',
-        gridAutoRows: '1fr', // for equal height
-        ...buildResponsiveStyles(columns, (col: SegmentedControlColumns) => ({
-          gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
-        })),
-        gap: '6px',
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          gridAutoRows: '1fr', // for equal height
+          ...buildResponsiveStyles(columns, (col: SegmentedControlColumns) => ({
+            gridTemplateColumns: col === 'auto' ? `repeat(auto-fit, ${maxWidth}px)` : `repeat(${col}, minmax(0, 1fr))`,
+          })),
+          gap: '6px',
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+        }),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/spinner/__snapshots__/spinner-styles.spec.ts.snap b/packages/components/src/components/spinner/__snapshots__/spinner-styles.spec.ts.snap
index 12efd2cf786..a9e40582fe3 100644
--- a/packages/components/src/components/spinner/__snapshots__/spinner-styles.spec.ts.snap
+++ b/packages/components/src/components/spinner/__snapshots__/spinner-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for size: "inherit" and theme dark 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -65,7 +65,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "inherit" and theme light 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -128,7 +128,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "large" and theme dark 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -191,7 +191,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "large" and theme light 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -254,7 +254,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "medium" and theme dark 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -317,7 +317,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "medium" and theme light 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -380,7 +380,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "small" and theme dark 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -443,7 +443,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: "small" and theme light 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -506,7 +506,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: {"base":"medium","xs":"small","s":"medium","m":"small","l":"medium","xl":"small"} and theme dark 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
@@ -604,7 +604,7 @@ circle:last-child {
 
 exports[`getComponentCss() should return correct css for size: {"base":"medium","xs":"small","s":"medium","m":"small","l":"medium","xl":"small"} and theme light 1`] = `
 ":host {
-  display: inline-flex !important;
+  display: inline-flex;
   vertical-align: top !important;
   color-scheme: light dark !important;
 }
diff --git a/packages/components/src/components/spinner/spinner-styles.ts b/packages/components/src/components/spinner/spinner-styles.ts
index fde70c9c392..e07c102da61 100644
--- a/packages/components/src/components/spinner/spinner-styles.ts
+++ b/packages/components/src/components/spinner/spinner-styles.ts
@@ -37,12 +37,14 @@ export const getComponentCss = (size: BreakpointCustomizable<SpinnerSize>, theme
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'inline-flex',
-        verticalAlign: 'top',
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          verticalAlign: 'top',
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+        }),
+      },
       svg: {
         display: 'block', // for correct vertical alignment
         fill: 'none',
diff --git a/packages/components/src/components/switch/__snapshots__/switch-styles.spec.ts.snap b/packages/components/src/components/switch/__snapshots__/switch-styles.spec.ts.snap
index efbd89e2428..e108860c679 100644
--- a/packages/components/src/components/switch/__snapshots__/switch-styles.spec.ts.snap
+++ b/packages/components/src/components/switch/__snapshots__/switch-styles.spec.ts.snap
@@ -2,9 +2,9 @@
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":false,"checked":false,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -96,9 +96,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":false,"checked":false,"disabled":true,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -180,9 +180,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":true,"checked":false,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: block !important;
   width: 100% !important;
 }
 :host([hidden]) {
@@ -273,9 +273,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":true,"checked":false,"disabled":false,"loading":true,"theme":"light"} 1`] = `
 ":host {
+  display: block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: block !important;
   width: 100% !important;
 }
 :host([hidden]) {
@@ -363,9 +363,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":true,"checked":false,"disabled":true,"loading":true,"theme":"dark"} 1`] = `
 ":host {
+  display: block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: block !important;
   width: 100% !important;
 }
 :host([hidden]) {
@@ -453,9 +453,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":true,"checked":false,"disabled":true,"loading":true,"theme":"light"} 1`] = `
 ":host {
+  display: block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: block !important;
   width: 100% !important;
 }
 :host([hidden]) {
@@ -543,9 +543,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"end","hideLabel":false,"stretch":true,"checked":true,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: block !important;
   width: 100% !important;
 }
 :host([hidden]) {
@@ -636,9 +636,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"end","hi
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"left","hideLabel":false,"stretch":false,"checked":false,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -730,9 +730,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"left","h
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"right","hideLabel":false,"stretch":false,"checked":false,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -824,9 +824,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"right","
 
 exports[`getComponentCss() should return correct css for {"alignLabel":"start","hideLabel":true,"stretch":false,"checked":false,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -917,9 +917,9 @@ exports[`getComponentCss() should return correct css for {"alignLabel":"start","
 
 exports[`getComponentCss() should return correct css for {"alignLabel":{"base":"start","xs":"end","s":"start","m":"end","l":"start","xl":"end"},"hideLabel":{"base":true,"xs":false,"s":true,"m":false,"l":true,"xl":false},"stretch":{"base":false,"xs":true,"s":false,"m":true,"l":false,"xl":true},"checked":false,"disabled":false,"loading":false,"theme":"light"} 1`] = `
 ":host {
+  display: inline-block;
   outline: 0 !important;
   color-scheme: light dark !important;
-  display: inline-block !important;
   width: auto !important;
   vertical-align: top !important;
 }
@@ -928,14 +928,12 @@ exports[`getComponentCss() should return correct css for {"alignLabel":{"base":"
 }
 @media(min-width:480px) {
   :host {
-    display: block !important;
     width: 100% !important;
   }
 }
 
 @media(min-width:760px) {
   :host {
-    display: inline-block !important;
     width: auto !important;
     vertical-align: top !important;
   }
@@ -943,14 +941,12 @@ exports[`getComponentCss() should return correct css for {"alignLabel":{"base":"
 
 @media(min-width:1000px) {
   :host {
-    display: block !important;
     width: 100% !important;
   }
 }
 
 @media(min-width:1300px) {
   :host {
-    display: inline-block !important;
     width: auto !important;
     vertical-align: top !important;
   }
@@ -958,7 +954,6 @@ exports[`getComponentCss() should return correct css for {"alignLabel":{"base":"
 
 @media(min-width:1760px) {
   :host {
-    display: block !important;
     width: 100% !important;
   }
 }
diff --git a/packages/components/src/components/switch/switch-styles.ts b/packages/components/src/components/switch/switch-styles.ts
index 71cca291143..bade1073c6c 100644
--- a/packages/components/src/components/switch/switch-styles.ts
+++ b/packages/components/src/components/switch/switch-styles.ts
@@ -90,16 +90,20 @@ export const getComponentCss = (
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
-        outline: 0, // custom element is able to delegate the focus
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
+      ':host': {
         ...buildResponsiveStyles(stretch, (stretchValue: boolean) => ({
           display: stretchValue ? 'block' : 'inline-block',
-          width: stretchValue ? '100%' : 'auto', // prevents adjusting its size when used as flex or grid child
-          ...(!stretchValue && { verticalAlign: 'top' }),
         })),
-      }),
+        ...addImportantToEachRule({
+          outline: 0, // custom element is able to delegate the focus
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+          ...buildResponsiveStyles(stretch, (stretchValue: boolean) => ({
+            width: stretchValue ? '100%' : 'auto', // prevents adjusting its size when used as flex or grid child
+            ...(!stretchValue && { verticalAlign: 'top' }),
+          })),
+        }),
+      },
     },
     root: {
       display: 'flex',
diff --git a/packages/components/src/components/table/table-body/__snapshots__/table-body-styles.spec.ts.snap b/packages/components/src/components/table/table-body/__snapshots__/table-body-styles.spec.ts.snap
index 0c05e4216cd..b355a8d1b30 100644
--- a/packages/components/src/components/table/table-body/__snapshots__/table-body-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table-body/__snapshots__/table-body-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css 1`] = `
 ":host {
-  display: table-row-group !important;
+  display: table-row-group;
 }
 :host([hidden]) {
   display: none !important;
diff --git a/packages/components/src/components/table/table-body/table-body-styles.ts b/packages/components/src/components/table/table-body/table-body-styles.ts
index 08d99f7d786..3e7044111bc 100644
--- a/packages/components/src/components/table/table-body/table-body-styles.ts
+++ b/packages/components/src/components/table/table-body/table-body-styles.ts
@@ -4,10 +4,10 @@ import { addImportantToEachRule, hostHiddenStyles } from '../../../styles';
 export const getComponentCss = (): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'table-row-group',
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule(hostHiddenStyles),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/table/table-cell/__snapshots__/table-cell-styles.spec.ts.snap b/packages/components/src/components/table/table-cell/__snapshots__/table-cell-styles.spec.ts.snap
index 784c56c0a78..c58b63b4103 100644
--- a/packages/components/src/components/table/table-cell/__snapshots__/table-cell-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table-cell/__snapshots__/table-cell-styles.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`getComponentCss() should return correct css for multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
+  vertical-align: middle;
   padding: clamp(8px, 0.5vw + 6px, 16px) !important;
   margin: 0 !important;
   white-space: nowrap !important;
-  vertical-align: middle;
 }
 :host([hidden]) {
   display: none !important;
@@ -15,11 +15,11 @@ exports[`getComponentCss() should return correct css for multiline: false 1`] =
 
 exports[`getComponentCss() should return correct css for multiline: true 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
+  vertical-align: middle;
   padding: clamp(8px, 0.5vw + 6px, 16px) !important;
   margin: 0 !important;
   white-space: normal !important;
-  vertical-align: middle;
 }
 :host([hidden]) {
   display: none !important;
diff --git a/packages/components/src/components/table/table-cell/table-cell-styles.ts b/packages/components/src/components/table/table-cell/table-cell-styles.ts
index 398d97f5622..99054195cc0 100644
--- a/packages/components/src/components/table/table-cell/table-cell-styles.ts
+++ b/packages/components/src/components/table/table-cell/table-cell-styles.ts
@@ -6,14 +6,14 @@ export const getComponentCss = (multiline: boolean): string => {
   return getCss({
     '@global': {
       ':host': {
+        display: 'table-cell',
+        verticalAlign: 'middle',
         ...addImportantToEachRule({
-          display: 'table-cell',
           padding: spacingFluidSmall,
           margin: 0,
           whiteSpace: multiline ? 'normal' : 'nowrap',
           ...hostHiddenStyles,
         }),
-        verticalAlign: 'middle',
       },
     },
   });
diff --git a/packages/components/src/components/table/table-head-cell/__snapshots__/table-head-cell-styles.spec.ts.snap b/packages/components/src/components/table/table-head-cell/__snapshots__/table-head-cell-styles.spec.ts.snap
index 03492f9528a..ccfb0adeeb5 100644
--- a/packages/components/src/components/table/table-head-cell/__snapshots__/table-head-cell-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table-head-cell/__snapshots__/table-head-cell-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for active: false, direction: asc, hideLabel: false and multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
@@ -68,7 +68,7 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for active: false, direction: desc, hideLabel: false and multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
@@ -134,7 +134,7 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for active: true, direction: asc, hideLabel: false and multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
@@ -200,7 +200,7 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for active: true, direction: desc, hideLabel: false and multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
@@ -266,7 +266,7 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for active: true, direction: desc, hideLabel: false and multiline: true 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: normal !important;
@@ -332,7 +332,7 @@ button:not(:focus-visible)::before {
 
 exports[`getComponentCss() should return correct css for active: undefined, direction: undefined, hideLabel: false and multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
@@ -344,7 +344,7 @@ exports[`getComponentCss() should return correct css for active: undefined, dire
 
 exports[`getComponentCss() should return correct css for active: undefined, direction: undefined, hideLabel: true and multiline: false 1`] = `
 ":host {
-  display: table-cell !important;
+  display: table-cell;
   padding: 2px clamp(8px, 0.5vw + 6px, 16px) clamp(8px, 0.5vw + 6px, 16px) !important;
   vertical-align: bottom !important;
   white-space: nowrap !important;
diff --git a/packages/components/src/components/table/table-head-cell/table-head-cell-styles.ts b/packages/components/src/components/table/table-head-cell/table-head-cell-styles.ts
index e55a92f0ecb..6a0473afc2e 100644
--- a/packages/components/src/components/table/table-head-cell/table-head-cell-styles.ts
+++ b/packages/components/src/components/table/table-head-cell/table-head-cell-styles.ts
@@ -33,13 +33,15 @@ export const getComponentCss = (
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'table-cell',
-        padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`,
-        verticalAlign: 'bottom',
-        whiteSpace: multiline ? 'normal' : 'nowrap',
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          padding: `2px ${spacingFluidSmall} ${spacingFluidSmall}`,
+          verticalAlign: 'bottom',
+          whiteSpace: multiline ? 'normal' : 'nowrap',
+          ...hostHiddenStyles,
+        }),
+      },
       ...(sortable
         ? {
             button: {
diff --git a/packages/components/src/components/table/table-head-row/__snapshots__/table-head-row-styles.spec.ts.snap b/packages/components/src/components/table/table-head-row/__snapshots__/table-head-row-styles.spec.ts.snap
index 2eff759c166..1cd7bcf0e0f 100644
--- a/packages/components/src/components/table/table-head-row/__snapshots__/table-head-row-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table-head-row/__snapshots__/table-head-row-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css 1`] = `
 ":host {
-  display: table-row !important;
+  display: table-row;
 }
 :host([hidden]) {
   display: none !important;
diff --git a/packages/components/src/components/table/table-head-row/table-head-row-styles.ts b/packages/components/src/components/table/table-head-row/table-head-row-styles.ts
index 200fa83a9b8..245a1659302 100644
--- a/packages/components/src/components/table/table-head-row/table-head-row-styles.ts
+++ b/packages/components/src/components/table/table-head-row/table-head-row-styles.ts
@@ -4,10 +4,10 @@ import { addImportantToEachRule, hostHiddenStyles } from '../../../styles';
 export const getComponentCss = (): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'table-row',
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule(hostHiddenStyles),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/table/table-head/__snapshots__/table-head-styles.spec.ts.snap b/packages/components/src/components/table/table-head/__snapshots__/table-head-styles.spec.ts.snap
index 132d523857c..f9390eee0cd 100644
--- a/packages/components/src/components/table/table-head/__snapshots__/table-head-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table-head/__snapshots__/table-head-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css 1`] = `
 ":host {
-  display: table-header-group !important;
+  display: table-header-group;
   font-size: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem) !important;
   line-height: calc(6px + 2.125ex) !important;
   font-weight: 600 !important;
diff --git a/packages/components/src/components/table/table-head/table-head-styles.ts b/packages/components/src/components/table/table-head/table-head-styles.ts
index 71fbd596458..d2e8eca9ac1 100644
--- a/packages/components/src/components/table/table-head/table-head-styles.ts
+++ b/packages/components/src/components/table/table-head/table-head-styles.ts
@@ -5,13 +5,15 @@ import { fontLineHeight, fontSizeTextXSmall, fontWeightSemiBold } from '@porsche
 export const getComponentCss = (): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'table-header-group',
-        fontSize: fontSizeTextXSmall,
-        lineHeight: fontLineHeight,
-        fontWeight: fontWeightSemiBold,
-        ...hostHiddenStyles,
-      }),
+        ...addImportantToEachRule({
+          fontSize: fontSizeTextXSmall,
+          lineHeight: fontLineHeight,
+          fontWeight: fontWeightSemiBold,
+          ...hostHiddenStyles,
+        }),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/table/table-row/__snapshots__/table-row-styles.spec.ts.snap b/packages/components/src/components/table/table-row/__snapshots__/table-row-styles.spec.ts.snap
index f4e818c658d..39fdf08fa0a 100644
--- a/packages/components/src/components/table/table-row/__snapshots__/table-row-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table-row/__snapshots__/table-row-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css 1`] = `
 ":host {
-  display: table-row !important;
+  display: table-row;
   border-top: 1px solid var(--p-internal-table-border-color) !important;
   border-bottom: 1px solid var(--p-internal-table-border-color) !important;
   transition: background var(--p-transition-duration, 0.25s) cubic-bezier(0.25,0.1,0.25,1) !important;
diff --git a/packages/components/src/components/table/table-row/table-row-styles.ts b/packages/components/src/components/table/table-row/table-row-styles.ts
index deca1cfe3a6..96ab51c9271 100644
--- a/packages/components/src/components/table/table-row/table-row-styles.ts
+++ b/packages/components/src/components/table/table-row/table-row-styles.ts
@@ -5,19 +5,21 @@ import { cssVariableTableBorderColor, cssVariableTableHoverColor } from '../tabl
 export const getComponentCss = (): string => {
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'table-row',
-        borderTop: `1px solid var(${cssVariableTableBorderColor})`,
-        borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
-        transition: getTransition('background'),
-        ...hostHiddenStyles,
-        ...hoverMediaQuery({
-          '&(:hover)': {
-            // ...frostedGlassStyle, // will result in not smooth transition when applied
-            background: `var(${cssVariableTableHoverColor})`,
-          },
+        ...addImportantToEachRule({
+          borderTop: `1px solid var(${cssVariableTableBorderColor})`,
+          borderBottom: `1px solid var(${cssVariableTableBorderColor})`,
+          transition: getTransition('background'),
+          ...hostHiddenStyles,
+          ...hoverMediaQuery({
+            '&(:hover)': {
+              // ...frostedGlassStyle, // will result in not smooth transition when applied
+              background: `var(${cssVariableTableHoverColor})`,
+            },
+          }),
         }),
-      }),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/table/table/__snapshots__/table-styles.spec.ts.snap b/packages/components/src/components/table/table/__snapshots__/table-styles.spec.ts.snap
index 057503db214..cc4645750d7 100644
--- a/packages/components/src/components/table/table/__snapshots__/table-styles.spec.ts.snap
+++ b/packages/components/src/components/table/table/__snapshots__/table-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   font: normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif !important;
   overflow-wrap: break-word !important;
   hyphens: auto !important;
@@ -31,7 +31,7 @@ exports[`getComponentCss() should return correct css for theme: dark 1`] = `
 
 exports[`getComponentCss() should return correct css for theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   font: normal normal 400 1rem/calc(6px + 2.125ex) 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif !important;
   overflow-wrap: break-word !important;
   hyphens: auto !important;
diff --git a/packages/components/src/components/table/table/table-styles.ts b/packages/components/src/components/table/table/table-styles.ts
index 3da42e8c175..6095994a409 100644
--- a/packages/components/src/components/table/table/table-styles.ts
+++ b/packages/components/src/components/table/table/table-styles.ts
@@ -24,17 +24,19 @@ export const getComponentCss = (theme: Theme): string => {
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'block',
-        ...textSmallStyle,
-        color: primaryColor,
-        textAlign: 'start',
-        ...colorSchemeStyles,
-        ...hostHiddenStyles,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-          color: primaryColorDark,
+        ...addImportantToEachRule({
+          ...textSmallStyle,
+          color: primaryColor,
+          textAlign: 'start',
+          ...colorSchemeStyles,
+          ...hostHiddenStyles,
+          ...prefersColorSchemeDarkMediaQuery(theme, {
+            color: primaryColorDark,
+          }),
         }),
-      }),
+      },
       '::slotted(*)': addImportantToEachRule({
         [cssVariableTableHoverColor]: hoverColor,
         [cssVariableTableBorderColor]: contrastLowColor,
diff --git a/packages/components/src/components/tabs/tabs-item/__snapshots__/tabs-item-styles.spec.ts.snap b/packages/components/src/components/tabs/tabs-item/__snapshots__/tabs-item-styles.spec.ts.snap
index 105d6833048..4c9fbbd3928 100644
--- a/packages/components/src/components/tabs/tabs-item/__snapshots__/tabs-item-styles.spec.ts.snap
+++ b/packages/components/src/components/tabs/tabs-item/__snapshots__/tabs-item-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css for theme: dark 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   position: relative !important;
   color: #FBFCFF !important;
   outline: 0 !important;
@@ -24,7 +24,7 @@ exports[`getComponentCss() should return correct css for theme: dark 1`] = `
 
 exports[`getComponentCss() should return correct css for theme: light 1`] = `
 ":host {
-  display: block !important;
+  display: block;
   position: relative !important;
   color: #010205 !important;
   outline: 0 !important;
diff --git a/packages/components/src/components/tabs/tabs-item/tabs-item-styles.ts b/packages/components/src/components/tabs/tabs-item/tabs-item-styles.ts
index fe53e0934a7..d7566dd19ba 100644
--- a/packages/components/src/components/tabs/tabs-item/tabs-item-styles.ts
+++ b/packages/components/src/components/tabs/tabs-item/tabs-item-styles.ts
@@ -15,26 +15,28 @@ export const getComponentCss = (theme: Theme): string => {
 
   return getCss({
     '@global': {
-      ':host': addImportantToEachRule({
+      ':host': {
         display: 'block',
-        position: 'relative',
-        color: primaryColor, // enables color inheritance for e.g. slotted anchor
-        outline: 0,
-        ...hostHiddenStyles,
-        ...prefersColorSchemeDarkMediaQuery(theme, {
-          color: primaryColorDark,
-        }),
-        '&(:focus:focus-visible)::before': {
-          content: '""',
-          position: 'absolute',
-          ...getInsetJssStyle(-4),
-          border: `${borderWidthBase} solid ${focusColor}`,
-          borderRadius: borderRadiusSmall,
+        ...addImportantToEachRule({
+          position: 'relative',
+          color: primaryColor, // enables color inheritance for e.g. slotted anchor
+          outline: 0,
+          ...hostHiddenStyles,
           ...prefersColorSchemeDarkMediaQuery(theme, {
-            borderColor: focusColorDark,
+            color: primaryColorDark,
           }),
-        },
-      }),
+          '&(:focus:focus-visible)::before': {
+            content: '""',
+            position: 'absolute',
+            ...getInsetJssStyle(-4),
+            border: `${borderWidthBase} solid ${focusColor}`,
+            borderRadius: borderRadiusSmall,
+            ...prefersColorSchemeDarkMediaQuery(theme, {
+              borderColor: focusColorDark,
+            }),
+          },
+        }),
+      },
     },
   });
 };
diff --git a/packages/components/src/components/text-list/text-list-item/__snapshots__/text-list-item-styles.spec.ts.snap b/packages/components/src/components/text-list/text-list-item/__snapshots__/text-list-item-styles.spec.ts.snap
index 4fd49db99b1..7225f3456a0 100644
--- a/packages/components/src/components/text-list/text-list-item/__snapshots__/text-list-item-styles.spec.ts.snap
+++ b/packages/components/src/components/text-list/text-list-item/__snapshots__/text-list-item-styles.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`getComponentCss() should return correct css 1`] = `
 ":host {
-  display: grid !important;
+  display: grid;
   grid-template-columns: var(--p-internal-text-list-pseudo-space) 1fr !important;
   column-gap: 16px !important;
   font: inherit !important;
diff --git a/packages/components/src/components/text-list/text-list-item/text-list-item-styles.ts b/packages/components/src/components/text-list/text-list-item/text-list-item-styles.ts
index 0e9625d0689..97f5aca964c 100644
--- a/packages/components/src/components/text-list/text-list-item/text-list-item-styles.ts
+++ b/packages/components/src/components/text-list/text-list-item/text-list-item-styles.ts
@@ -11,24 +11,28 @@ import {
 
 export const getComponentCss = (): string => {
   return getCss({
-    '@global': addImportantToEachRule({
+    '@global': {
       ':host': {
         display: 'grid',
-        gridTemplateColumns: `var(${cssVariablePseudoSpace}) 1fr`,
-        columnGap: spacingStaticMedium,
-        font: 'inherit', // ensures style can't be overwritten from outside
-        color: 'inherit', // ensures style can't be overwritten from outside
-        ...hostHiddenStyles,
+        ...addImportantToEachRule({
+          gridTemplateColumns: `var(${cssVariablePseudoSpace}) 1fr`,
+          columnGap: spacingStaticMedium,
+          font: 'inherit', // ensures style can't be overwritten from outside
+          color: 'inherit', // ensures style can't be overwritten from outside
+          ...hostHiddenStyles,
+        }),
       },
-      '::slotted(*)': {
-        [cssVariableUnorderedGridColumn]: '.625rem', // reserves space for ::before (nested unordered list)
-        [cssVariableUnorderedPseudoContent]: '"–"', // custom ::before char "–" (nested unordered list)
-        [cssVariableOrderedGridColumn]: '2rem', // reserves space for ::before (nested ordered list)
-        [cssVariableOrderedPseudoSuffix]: '""', // don't show ::before suffix "." (nested ordered list)
-      },
-      '::slotted(*:last-child)': {
-        gridColumn: 2,
-      },
-    }),
+      ...addImportantToEachRule({
+        '::slotted(*)': {
+          [cssVariableUnorderedGridColumn]: '.625rem', // reserves space for ::before (nested unordered list)
+          [cssVariableUnorderedPseudoContent]: '"–"', // custom ::before char "–" (nested unordered list)
+          [cssVariableOrderedGridColumn]: '2rem', // reserves space for ::before (nested ordered list)
+          [cssVariableOrderedPseudoSuffix]: '""', // don't show ::before suffix "." (nested ordered list)
+        },
+        '::slotted(*:last-child)': {
+          gridColumn: 2,
+        },
+      }),
+    },
   });
 };
diff --git a/packages/components/src/components/toast/toast-item/toast-item-styles.ts b/packages/components/src/components/toast/toast-item/toast-item-styles.ts
index 9ea2b9d32c1..66b5bdffecb 100644
--- a/packages/components/src/components/toast/toast-item/toast-item-styles.ts
+++ b/packages/components/src/components/toast/toast-item/toast-item-styles.ts
@@ -13,6 +13,7 @@ export const getComponentCss = (state: ToastState, theme: Theme): string => {
   return getCss({
     '@global': {
       ':host': {
+        display: 'grid',
         ...getNotificationRootJssStyle(state, false, true, theme),
         ...dropShadowHighStyle,
       },