fix(layout): ensure locally defined layout definition has precedence

[janhassel]

Closes #19388

When a component redefines layout tokens (such as size), the selector .cds--layout--{group}-{step} .{component} is created.

As outlined in the linked issue, if a <Button>'s props.size is set to lg, it emits the class name .cds--layout--size-lg. If you were to place a <Tag> (which redefines layout tokens) inside of the button, the selector .cds--layout--size-lg .cds--tag would be matched and receive precedence over the locally defined size.

This PR adds a second selector that is being emitted: .{component}.cds--layout--{group}-{step} which takes precedence in this case (.cds--tag.cds--layout--group-sm would be matched) as the specificity of the original selector has been lowered (.cds--layout--{group}-{step} :where(.{component})).

Changelog

Changed

• Updated the styles emitted by layout.redefine-tokens as described above.

Testing / Reviewing

• Verify the following scenario:

{/* The button should be displayed as lg (48px) while the tag should be displayed at 18px height. */}
<Button size="lg">
  <Tag size="sm">SM tag</Tag>
</Button>

• Verify the ContainedList -> With title decorators story remains unchanged
• Verify the popover in the OperationalTag story remains unchanged
• Verify the functionality of unstable_Layout story
  • A tag has been added to the demo

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

• Reviewed every line of the diff
• Updated documentation and storybook examples~
• Wrote passing tests that cover this change
• Addressed any impact on accessibility (a11y)
• Tested for cross-browser consistency
• Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

[netlify]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	550492f
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/6827278b424a5200084fbc64
😎 Deploy Preview	https://deploy-preview-19406--v11-carbon-web-components.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	550492f
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/6827278b876f350008ca8060
😎 Deploy Preview	https://deploy-preview-19406--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.85%. Comparing base (bdc774e) to head (550492f).
Report is 31 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #19406   +/-   ##
=======================================
  Coverage   84.85%   84.85%           
=======================================
  Files         371      371           
  Lines       14413    14413           
  Branches     4694     4694           
=======================================
  Hits        12230    12230           
  Misses       2037     2037           
  Partials      146      146           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[tay1orjones]

LGTM, thanks!