THEMES-1221: Update carousel styles

[nschubach]

Ticket

• THEMES-1221

Description

Update carousel logical properties

Acceptance Criteria

The above logical properties are applied and tested on the gallery component.
Storybook is updated with RTL.

Test Steps

1. Checkout branch - git checkout themes-1221
2. Update dependencies - npm i

Author Checklist

• Confirmed all the test steps a reviewer will follow above are working.
• Ran this code locally and checked that there are not any unintended side effects. For example, that a CSS selector is scoped only to a particular block.
• Confirmed relevant documentation has been updated/added.
• Add label - ready for review when the pull request is ready for someone to begin reviewing

Reviewer Checklist

The reviewer of the PR should copy-paste this template into the review comments on review.

• All GitHub Actions pass
• Ran the code locally based on the test instructions.
• Checked Chromatic for Storybook changes, accepted the updates if acceptable
• Looked to see that the new or changed code has code coverage, specifically. We want the global code coverage to keep on going up with targeted testing.
• Approve and Add label - ready to merge if you are happy with the pull request
• Want another reviewer? Add the label additional review

[github-actions]

Remaining comments which cannot be posted as a review comment to avoid GitHub Rate Limit

stylelint

src/components/carousel/_index.scss|109 col 2| Unexpected browser feature "flexbox-gap" is not supported by KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|118 col 3| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|121 col 2| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|146 col 2| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|150 col 3| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|194 col 2| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|196 col 3| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|198 col 2| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|200 col 3| Unexpected browser feature "css-nesting" is not supported by Opera Mobile 73, UC Browser for Android 15.5, Samsung Internet 22,23, QQ Browser 13.1, KaiOS Browser 2.5 (plugin/no-unsupported-browser-features) plugin/no-unsupported-browser-features
src/components/carousel/_index.scss|198 col 2| Expected empty line before rule (rule-empty-line-before) rule-empty-line-before
src/components/carousel/_index.scss|193 col 1| Unexpected qualifying type selector "html[dir="rtl"]" (selector-no-qualifying-type) selector-no-qualifying-type
src/components/carousel/_index.scss|194 col 2| Unexpected qualifying type selector "html[dir="rtl"]" (selector-no-qualifying-type) selector-no-qualifying-type
src/components/carousel/_index.scss|198 col 2| Unexpected qualifying type selector "html[dir="rtl"]" (selector-no-qualifying-type) selector-no-qualifying-type

[vgalatro]

The changes look good, just noticed some duplicate properties between the _index.scss and the news.json. The changes are also missing from the commerce.json.

Could you add a RTL story to index.stories.mdx as well? So we have it whenever we update Storybook.

[vgalatro]

Are these three props (container-name, container-type, and max-inline-size) supposed to be here? They're also on the token, so they end up appearing twice in the final CSS.

[nschubach]

Nope, I removed these. I missed moving these over.

[vgalatro]

Changes look good, approved!