feat(segmented-control): introduce segmented control

[Vortelf]

feat(segmented-control): introduce bl-segmented-control

As discussed in the previous PR, I extended the suggested bl-toggle component from #1089 into a new more functional and distinct component.

This PR is related to #1092.

---

Summary

This PR adds a new Segmented Control component (<bl-segmented-control) to the Baklava Design System. It supports RTL out-of-the-box, multiple sizes, inverted styling, and customization via CSS properties. The PR also includes documentation (Storybook stories) and unit tests with 100% coverage for the new logic.

Motivation and Context

The segmented control provides more distinct visual change of context compared to similar-functinality components (e.g. radio group) where switching between binary context is not enough. It is a linear control which has a set of 2 ≤ options, each functioning as a button or a value provider.

What’s Included

• New web component: src/components/segmented-control
  • Props
    • label-false, label-true text labels
    • icon-false, icon-true icon names
    • disabled, inverted, size (small | medium | large), icons-only
  • Events
    • bl-segmented-control-change (detail: Emitted when the value changes. Event detail is the selected value. )
  • Accessibility
    • Keyboard support (Left/Down, Right/Up, Enter/Space)
    • ARIA role and state: role="radiogroup", aria-disabled
    • Focus management synced with disabled
  • RTL support
    • Uses setDirectionProperty utility and logical label placement based on direction
  • Customization via CSS properties
    • --bl-segment-bg
    • --bl-segment-color
    • --bl-segment-selected-bg
    • --bl-segment-selected-color
    • --bl-segment-width
• Styles: src/components/segmented-control/bl-segmented-control.css
• Stories: src/components/segmented-control/bl-segmented-control.stories.mdx
  • Basic, Checked, Icons, Length, Sizes, Inverted, Disabled, Customization, RTL examples
• Tests: src/components/segmented-control/bl-segmented-control.test.ts
  • Unit tests for state toggling, keyboard interaction, ARIA sync, disabled behavior, RTL behavior, and icon/text fallbacks

Accessibility Details (A11y)

• The host element is keyboard focusable when not disabled and responds to Enter/Space.
• role="radiogroup" with aria-checked is kept in sync with the checked state.
• aria-disabled is applied when disabled; tabIndex becomes -1 to remove from tab order.
• Supports external labels via aria-label for assistive technologies.

RTL Support

• The component internally uses the setDirectionProperty utility and logical placement so that:
  • In LTR: false label/icon on the left, true label/icon on the right.
  • In RTL: positions are mirrored.
• Stories include an RTL demo using dir="rtl" to verify layout and behavior.

Documentation

• Storybook MDX with ArgsTable and usage guidance added for bl-segmented-control.
• Usage notes include guidance for external labels (use aria-label) and no indeterminate state.

Checklist (per CONTRIBUTING.md)

• Code quality: Lint passes (npm run lint)
• Tests: 100% coverage maintained (npm test), new tests added for all logic paths
• Commit messages: follow a conventional format to enable automated releases
• Visual changes: documented in stories; ready for design review when required
• RTL support: verified with dir="rtl" example and logical placement
• Documentation: Storybook stories and ArgsTable provided
• Automated checks: expected to pass in CI
• PR description: detailed and complete (this file)
• No breaking changes

Additional Notes

• If any visual or functionality tweaks are requested by design, follow-up commits will update the component accordingly.