fix(ui5-slider): improve labels structure and placement

[Vonahz]

fixes: #9908

[ndeshev]

add a pull request message (fixes: #123)
change the title to something more 'understandable' - 'improve labels structure and placement' or something like that :))

[Copilot]

Pull Request Overview

This PR fixes an overflow issue in the UI5 slider by refactoring how label containers are sized and rendered.

• Converted inline width calculations into CSS-based flex layout and pseudo-elements
• Replaced style-based label rendering in the template with data-counter attributes and CSS
• Simplified label-overlap detection logic in the base class and removed now-unnecessary style props

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/main/src/themes/SliderBase.css	Adjusted tickmark border units; refactored label container to use flex and pseudo-elements
packages/main/src/SliderBaseTemplate.tsx	Removed inline label styles and switched to data-counter attributes
packages/main/src/SliderBase.ts	Removed abstract style props; added rem-based overlap calculation with new logic
packages/main/src/Slider.ts	Removed now-unused inline label style properties
packages/main/src/RangeSlider.ts	Removed now-unused inline label style properties

Comments suppressed due to low confidence (4)

packages/main/src/SliderBaseTemplate.tsx:44

• [nitpick] The data-counter attribute may not clearly convey its purpose. Consider renaming it to something like data-label or data-value to improve readability.

									<li data-counter={l}></li>

packages/main/src/SliderBase.ts:412

• New overlap-detection logic should be covered by unit tests to ensure correct behavior when labels do and do not overlap.

		this._labelsOverlapping = labelItemsParentWidth < labelItemsSumWidth;

packages/main/src/themes/SliderBase.css:207

• Applying width: 100% to .ui5-slider-handle will stretch the handle across the full track. These layout rules (width, display, justify-content) should be moved to the label container (.ui5-slider-labels) instead of the handle.

    width: 100%;

packages/main/src/themes/SliderBase.css:206

• [nitpick] Indentation of the new CSS properties uses 4 spaces, while existing rules use 2 spaces. Align to the project's style guide for consistency.

    height: 1rem;

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.13.0-rc.0 🎉

The release is available on v2.13.0-rc.0

Your semantic-release bot 📦🚀