Components: migrate Truncate to SCSS module

[ciampo]

Part of #66806

What?

Migrates Truncate away from Emotion styles and onto an SCSS Module.

Why?

This is one of the canary components for the refreshed Emotion migration plan. It validates a small static style migration plus a prop-driven CSS custom property replacement.

How?

• Replaces the Emotion styles.ts file with style.module.scss.
• Uses clsx for class composition.
• Replaces the dynamic numberOfLines Emotion interpolation with --wp-components-truncate-lines.
• Keeps the one-line word-break exception as an internal SCSS module class, without adding a public data attribute.
• Keeps polymorphic rendering delegated to View; the View migration remains separate.

Testing Instructions

• npm run test:unit packages/components/src/truncate/test/index.tsx -- --runInBand
• npm run lint:js -- packages/components/src/truncate/hook.ts packages/components/src/truncate/test/index.tsx
• npm run lint:css -- packages/components/src/truncate/style.module.scss
• ./node_modules/.bin/tsgo --build packages/components/tsconfig.json
• git diff --check

Testing Instructions for Keyboard

No keyboard-specific behavior changed. Truncate is a non-interactive typography primitive.

Screenshots or screencast

Not applicable; this should preserve the existing visual output.

Use of AI Tools

Used AI assistance to inspect the existing component implementation, apply the migration, and draft this PR description. The changes were reviewed and verified locally.

[github-actions]

Size Change: +195 B (0%)

Total Size: 7.51 MB

📦 View Changed

Filename	Size	Change
build/scripts/components/index.min.js	264 kB	+195 B (+0.07%)

_{compressed-size-action}

[ciampo]

Slightly changed the test here, switching from invoking the auto mode (which relies on CSS text-truncation and can't be tested) to the explicit limit + ellipsizeMode (which actually chanegs the content of the DOM element).

Sidenote: not in scope for this PR, but we should probably retain the whole text content for assistive technology all the time? Something to keep in mind for #77391

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Flaky tests detected in 2058bc5.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/28168347114
📝 Reported issues:

• [Flaky Test] shows post-locked modal when document size limit is exceeded #78753 in /test/e2e/specs/editor/collaboration/http-only/collaboration-document-size-lock.spec.ts