Improve theme infra of BitSlider (#13336)

[msynk]

closes #13336

Summary by CodeRabbit

• New Features

  • Added customizable slider mark-label templates and improved mark labeling.
  • Added accessibility descriptions and grouped range-slider semantics.
  • Added shared slider configuration through cascading parameters.
  • Added extensive CSS custom properties for slider theming and sizing.
  • Improved required-state styling, value-label sizing, and touch target support.

• Documentation

  • Expanded slider examples for accessibility, customization, marks, formatting, and theming.
  • Updated documented CSS variables and usage guidance.

• Bug Fixes

  • Improved slider label rendering, focus styling, forced-colors support, and accessibility behavior.

[coderabbitai]

Understand this PR’s impact

Explore downstream dependencies and potential security impact with Blast Radius.

View blast radius →

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 302e9317-52c9-4488-b295-3ed35b81f769

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 07d6275b-fab4-48fc-91b6-f965657aab3e

📥 Commits

Reviewing files that changed from the base of the PR and between a7a66ac and 20287eb.

📒 Files selected for processing (12)

• src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputBase.cs
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSliderMark.cs
• src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSliderParams.cs
• src/BlazorUI/Bit.BlazorUI/Utils/Params/BitInputBaseParams.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Slider/BitSliderDemo.razor
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Slider/BitSliderDemo.razor.cs
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Slider/BitSliderDemo.razor.samples.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Slider/BitSliderTests.cs
• src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs

Included review availability: Your plan provides up to 4 included reviews per hour; 0 remain after this review.

---

Walkthrough

BitSlider adds cascading parameters, mark-label templates, ARIA descriptions and range grouping, required-state styling, stable value-label sizing, public CSS variables, expanded demos, and regression tests.

Changes

BitSlider enhancements

Layer / File(s)	Summary
Parameter cascade contracts and wiring src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputBase.cs, src/BlazorUI/Bit.BlazorUI/Utils/Params/BitInputBaseParams.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSliderParams.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs	Input parameters record explicit markup assignments. BitSliderParams applies configured values only when local parameters are unset.
Slider accessibility and interaction behavior src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.razor.cs, src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSliderMark.cs	The slider renders descriptions, grouped ranged inputs, required-state output, mark templates, generated mark labels, and reserved value-label widths.
Public slider theme contract src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss	Slider styles use public --bit-Slider-* variables, minimum pointer targets, required-state styling, hidden description styling, and forced-colors rules.
Examples and regression coverage src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Slider/*, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/Slider/BitSliderTests.cs, src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitComponentCssVariablesContractTests.cs	Demos document the updated API and CSS variables. Tests cover slider behavior, cascading parameters, accessibility output, and CSS-variable documentation contracts.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~45 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 20287

No concrete behavior or repository-contract issue remains; the PR is mergeable after normal checks.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 17.39% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 69 functions across 9 files. (3 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies BitSlider theme infrastructure as the main change. It is concise and related to the CSS variable and theming updates in the pull request.
Linked Issues check	✅ Passed	The PR addresses the coding objectives in #13336. BitSlider.scss adds themeable --bit-Slider-* CSS variables and token fallbacks. BitSlider adds AriaDescription, aria-describedby, ranged-sli…
Out of Scope Changes check	✅ Passed	The changes stay within #13336. BitInputBase and BitInputBaseParams support shared input parameters required by slider cascading configuration. The CSS variable contract test supports the public C…

Full details: Docstring Coverage

Explanation

Docstring coverage is 17.39% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 69 functions across 9 files. (3 skipped: 3 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit tunes the slider bright
With marks that bloom in neat delight
ARIA whispers, labels align
Cascaded settings follow the line
New theme tokens make it shine}

_{Comment @coderabbitai help to get the list of available commands.}

[msynk]

@coderabbitai full-review

[coderabbitai]

@msynk: I will perform a full review of PR #13347.

⚠️ Action not completed

Pull request base or head changed.