docs(color-slider): enhance README with detailed sections

[blunteshwar]

docs(color-slider): enhance README with detailed component overview

Overview

This PR reorganizes the color-slider README.md to follow the established documentation standards structure, improving accessibility and consistency with other components.

Changes Made

Structure Reorganization

• Overview: Replaced "Description" with "Overview" section to align with documentation standards
• Usage: Updated import code blocks with proper language syntax highlighting (bash, javascript)
• Anatomy: Added new section describing the component's key parts and basic usage
• Options: Created new section with:
  • Orientation property documentation (moved vertical option here)
• States: Reorganized existing content into proper states section:
  • Standard state
  • Disabled state
• Behaviors: Moved Color Formatting section here to align with other component documentation
• Accessibility: Added comprehensive new section including:
  • ARIA attributes information
  • Keyboard navigation table with all supported keys
  • Screen reader support details

Code Quality Improvements

• Added language identifiers to all code blocks for proper syntax highlighting
• Maintained all existing content without removal
• Improved content organization for better readability

Accessibility Enhancements

• Added keyboard navigation documentation with semantic <sp-table> structure
• Used <kbd> tags for keyboard keys
• Documented screen reader behavior and ARIA implementation

Testing

• Verified all existing content is preserved
• Checked that code examples render correctly
• Ensured documentation follows established patterns from other components
• Validated markdown formatting
• No linting errors introduced

Related Documentation

This PR follows the documentation standards outlined in:

• Adding a Component - Documentation Standards
• Example PR #5663 (used as reference)

Screenshots

N/A - Documentation only changes

Before/After Structure Comparison

Before:

• Description
• Usage
• Color Formatting
• Default
• Vertical
• Disabled

After:

• Overview
• Usage
• Anatomy
• Options
  • Orientation
• States
  • Standard
  • Disabled
• Behaviors
  • Color Formatting
• Accessibility
  • Keyboard Navigation

Checklist

• Documentation follows established structure and standards
• All code blocks have appropriate language hints
• Examples are accessible
• No content removed, only reorganized
• Keyboard navigation documented with proper table structure
• Consistent with other component documentation (meter, tooltip, etc.)

[changeset-bot]

⚠️ No Changeset found

Latest commit: f2bc09d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5728

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[TarunAdobe]

can we use js for consistency?

[blunteshwar]

For every color-component we have used javascript only

[TarunAdobe]

and everywhere else we've used js. i dont know what is better tbh was just curious lol

[TarunAdobe]

do we wanna talk about shift+arrow keys here or not?

[blunteshwar]

Sure!

[rise-erpelding]

This is excellent, overall!

Since digging through the internals of this component in SWC is new to me, there were a few things that were unfamiliar to me that may or may not need to be added to the documentation:

• How does the gradient slot work? It looks like in Storybook there are stories for Canvas and Image, which look to be using this slot, are those worth showing here?
• Can you use the color slider to select an alpha/opacity level? Similar to this example in CSS? Would that be useful at all to show here, too?

[blunteshwar]

This is excellent, overall!

Since digging through the internals of this component in SWC is new to me, there were a few things that were unfamiliar to me that may or may not need to be added to the documentation:

• How does the gradient slot work? It looks like in Storybook there are stories for Canvas and Image, which look to be using this slot, are those worth showing here?
• Can you use the color slider to select an alpha/opacity level? Similar to this example in CSS? Would that be useful at all to show here, too?
  Currently we don't have support for alpha/opacity level in color-slider, It's also not on our storybook.