docs(radio): add styling API documentation and remove unused classes#700
Open
Skadefryd wants to merge 4 commits into
Open
docs(radio): add styling API documentation and remove unused classes#700Skadefryd wants to merge 4 commits into
Skadefryd wants to merge 4 commits into
Conversation
Contributor
|
Added comprehensive styling documentation for radio component that was previously marked as partial (had tokens but missing docs). Changes: - Created docs/styling.md with all component tokens documented: - Label tokens (font-size, line-height, color, color-disabled) - Control tokens (size, gap, radius, border-width, checked-border-width) - Color tokens for all states (default, checked, invalid, disabled) - Focus tokens (outline width, color, offset) - Cursor tokens (default, disabled) - Animation tokens (transition) - Documented all parts: base, control, label - Added usage examples for common customizations - Explained rich label content via slot (same as checkbox) - Noted high contrast mode support - Explained custom implementation using ElementInternals vs native input Code cleanup: - Removed unused class attributes (control, label) - Replaced wrapper class with part="base" for consistency - Removed redundant .wrapper CSS (styles already on :host) - Exposes wrapper as ::part(base) for advanced customization - No functional changes - maintains same layout and behavior Architecture documentation: - Added implementation note explaining custom role="radio" approach - Added TODO noting checkbox inconsistency (uses hidden native input) - Suggests future alignment after backwards compatibility assessment Completes Phase 2 radio documentation.
Skadefryd
force-pushed
the
refactor/radio-docs
branch
from
8b8c913 to
777f9a5
Compare
The previous commit removed unused classes from the radio component. Tests need to use [part="control"] instead of .control selector.
wkillerud
reviewed
Jun 16, 2026
digitalsadhu
approved these changes
Jun 18, 2026
wkillerud
approved these changes
Jun 23, 2026
The wrapper layout styles (display: inline-flex, align-items, gap) were incorrectly placed on :host when the .wrapper class was removed. These styles don't cascade to shadow DOM children, so the radio circle and label were not being laid out correctly. Moved the layout styles to [part='base'] where they apply to the actual wrapper element that contains the control and label. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Added comprehensive styling documentation for radio component that was previously marked as partial (had tokens but missing docs).
Changes:
Code cleanup:
Architecture documentation:
Completes Phase 2 radio documentation.