refactor(theme): use relative units for .pills

[spliffone]

See https://code.siemens.com/simpl/simpl-element/-/work_items/4

---

Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

• charts-ng
• dashboards-ng
• element-ng
• element-translate-ng
• maps-ng
• native-charts-ng

[gemini-code-assist]

Code Review

The pull request updates the pill component by replacing pixel-based dimensions with rem units for block-size and border-radius. Feedback recommends using min-block-size instead of block-size to ensure the component scales with text and suggests increasing the border-radius to 1.5rem to preserve the capsule shape if the height expands.

[gemini-code-assist]

Using min-block-size instead of block-size is recommended for components containing text. This ensures the pill can expand if the content wraps or if the font size is increased, preventing text overflow. Additionally, using a larger border-radius (e.g., 1.5rem) ensures the capsule shape is maintained even if the height increases. Note that for full consistency with the goal of using relative units, the padding (currently using pixel-based spacers) should also ideally be converted to rem.

Suggested change

	block-size: 1.5rem;
	border-radius: 0.75rem;
	min-block-size: 1.5rem;
	border-radius: 1.5rem;

[gemini-code-assist]

Using a larger value for the border radius ensures that the pill maintains its capsule shape even if its height increases due to content scaling.

Suggested change

	border-start-start-radius: 0.75rem;
	border-end-start-radius: 0.75rem;
	border-start-start-radius: 1.5rem;
	border-end-start-radius: 1.5rem;

[gemini-code-assist]

Using a larger value for the border radius ensures that the pill maintains its capsule shape even if its height increases due to content scaling.

Suggested change

	border-start-end-radius: 0.75rem;
	border-end-end-radius: 0.75rem;
	border-start-end-radius: 1.5rem;
	border-end-end-radius: 1.5rem;

[dr-itz]

size should be natural. Looking at filtered-search where .pill is used, we have multiple problems there, e.g. forced line-height: 24px and the .pill block-size is used to make the pill smaller since the there's also padding-block