chore(base): remove dir management from SpectrumElement and sp-theme

[rubencarvalho]

Description

This refactor removes the legacy JavaScript-based dir (text direction) management from SpectrumElement and replaces it with the modern CSS :dir() pseudo-class. The previous implementation used a MutationObserver to watch for dir attribute changes on document.documentElement and propagated these to child components. This approach required explicit dir attributes on elements and manual registration with sp-theme.

The new approach leverages the browser's native :dir() CSS pseudo-class, which automatically inherits directionality from the DOM hierarchy without requiring explicit attributes. This reduces JavaScript overhead, simplifies the component architecture, and improves performance.

Key changes:

• Removed isLTR getter and dirParent tracking from SpectrumMixin
• Removed connectedCallback/disconnectedCallback overrides that managed direction registration
• Removed MutationObserver and observedForElements Set for tracking direction changes
• Added simple dir getter using getComputedStyle(this).direction for JavaScript access when needed
• Updated CSS files to replace [dir="ltr"]/[dir="rtl"] attribute selectors with :dir(ltr)/:dir(rtl)

Note:
The only expected VRT failures are due to a fix for a previously unknown sp-link RTL issue affecting multiple components.

Motivation and context

This refactor is in preparation for 2nd-gen components, which will not include this shared direction management logic. By moving to the CSS :dir() pseudo-class now, we ensure a consistent approach across both 1st-gen and 2nd-gen components, and reduce the surface area of shared code that needs to be maintained between generations.

The CSS :dir() pseudo-class is now well-supported across modern browsers and provides a more performant, declarative approach to handling text direction. It automatically inherits directionality from parent elements in the DOM hierarchy, eliminating the need for manual attribute management and JavaScript-based observation.

Related issue(s)

• fixes SWC-1461

---

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

---

Reviewer's checklist

• Includes a Github Issue with appropriate flag or Jira ticket number without a link
• Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
• Automated tests cover all use cases and follow best practices for writing
• Validated on all supported browsers
• All VRTs are approved before the author can update Golden Hash

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 893b745

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview Links

• Documentation Site (first-gen)
• Storybook (first-gen)
• Storybook (second-gen)

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5936

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[Rajdeepc]

Solid modernization effort, we just cleaned up 4+ years of workaround code.

[Rajdeepc]

None of our components read dir during construction phase so we are safe but this is a bit expensive. Can you work with some partner teams and check if this is something worth auditing?

[rubencarvalho]

It is indeed expensive, but it's necessary for components that need JavaScript logic dependent on directionality (from my quick check it's e.g., ColorArea, ColorSlider, ColorWheel, Slider calculations, Menu placement).
But hey, at least this approach is more performant than the previous implementation 😛

[rubencarvalho]

I reached out to PSWeb and they do not support RTL so they are not using dir at all.

[Rajdeepc]

Nothing blocking.Coverage report flagging a few missing branches. If you could take a look at those and either add coverage or confirm they’re intentional, I’m happy to come back for a re-review.

[Rajdeepc]

Sorry I was curious and pulled down the code and did a search on few areas and have some feedback 😄

1. The [trackedChildren](https://github.com/adobe/spectrum-web-components/blob/ruben/remove-dir/1st-gen/tools/theme/src/Theme.ts#L342) Set and the methods are now dead code. You can remove or keep as no-ops for backward compatibility.
2. There is a [dir="rtl"] in spectrum-progress-bar.css. This is a progressive pattern but do you feel we should document this as this is the only css file.
3. I see that there is still a direction inheritance logic in Theme.ts. Seems intentional but it is slightly contrasting with changes in the PR which relies on purely CSS dir().
4. A changeset is required marking this as a breaking change.
5. Just a thought: How about keeping isLTR as a convenience getter for backward compatibility?

public get isLTR(): boolean {
       return this.dir === 'ltr';
   }