J3W1 / DESIGN SYSTEM
v0.1.0 release → v0.1.0 release
Pinned release comparison · extended
Source revision 1faefcf014c8bf01a6b27308ea796da968773a81
Choose another pair · Download JSON report · Download Markdown migration report
Historical availability
- Before: No historical usage index; impact uses the recorded component and port mappings. Prose and composite alias dependencies may be unknown.
- After: No historical usage index; impact uses the recorded component and port mappings. Prose and composite alias dependencies may be unknown.
Semantic changes
No semantic changes detected in supported inputs.
Known downstream impact
Port catalogue: no registered ports. Unknown: consumers without registered mappings cannot be enumerated. Known affected means a recorded contract or dependency changed; it does not establish a regression in an application.
Matched visual references
640 × 480 CSS pixels · comfortable · LTR · static endpoints · historical JavaScript disabled. Both frames use the same browser and available local fonts. A change to requested typography or fixture bytes can change appearance independently of color. No actual keyboard, screen-reader or historical-runtime pass is implied.
Requested font before: "SauceCodePro NFM", "Source Code Pro", "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace; after: "SauceCodePro NFM", "Source Code Pro", "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace.
button
Same fixture bytes on both sides.
All maintained variants and states (static links):
- default/active: Before · After
- default/default: Before · After
- default/disabled: Before · After
- default/focus-visible: Before · After
- default/hover: Before · After
- default/loading: Before · After
- destructive/active: Before · After
- destructive/default: Before · After
- destructive/disabled: Before · After
- destructive/focus-visible: Before · After
- destructive/hover: Before · After
- destructive/loading: Before · After
- secondary/active: Before · After
- secondary/default: Before · After
- secondary/disabled: Before · After
- secondary/focus-visible: Before · After
- secondary/hover: Before · After
- secondary/loading: Before · After
- tertiary/active: Before · After
- tertiary/default: Before · After
- tertiary/disabled: Before · After
- tertiary/focus-visible: Before · After
- tertiary/hover: Before · After
- tertiary/loading: Before · After
text-field
Same fixture bytes on both sides.
All maintained variants and states (static links):
- affix/default: Before · After
- affix/disabled: Before · After
- affix/disabled+filled: Before · After
- affix/filled: Before · After
- affix/focus-visible: Before · After
- affix/hover: Before · After
- affix/invalid: Before · After
- affix/invalid+focus-visible: Before · After
- affix/invalid+hover: Before · After
- affix/loading: Before · After
- affix/placeholder-shown: Before · After
- affix/read-only: Before · After
- affix/read-only+focus-visible: Before · After
- affix/required: Before · After
- default/default: Before · After
- default/disabled: Before · After
- default/disabled+filled: Before · After
- default/filled: Before · After
- default/focus-visible: Before · After
- default/hover: Before · After
- default/invalid: Before · After
- default/invalid+focus-visible: Before · After
- default/invalid+hover: Before · After
- default/loading: Before · After
- default/placeholder-shown: Before · After
- default/read-only: Before · After
- default/read-only+focus-visible: Before · After
- default/required: Before · After
- number/default: Before · After
- number/disabled: Before · After
- number/disabled+filled: Before · After
- number/filled: Before · After
- number/focus-visible: Before · After
- number/hover: Before · After
- number/invalid: Before · After
- number/invalid+focus-visible: Before · After
- number/invalid+hover: Before · After
- number/loading: Before · After
- number/placeholder-shown: Before · After
- number/read-only: Before · After
- number/read-only+focus-visible: Before · After
- number/required: Before · After
- password/default: Before · After
- password/disabled: Before · After
- password/disabled+filled: Before · After
- password/filled: Before · After
- password/focus-visible: Before · After
- password/hover: Before · After
- password/invalid: Before · After
- password/invalid+focus-visible: Before · After
- password/invalid+hover: Before · After
- password/loading: Before · After
- password/placeholder-shown: Before · After
- password/read-only: Before · After
- password/read-only+focus-visible: Before · After
- password/required: Before · After
- search/default: Before · After
- search/disabled: Before · After
- search/disabled+filled: Before · After
- search/filled: Before · After
- search/focus-visible: Before · After
- search/hover: Before · After
- search/invalid: Before · After
- search/invalid+focus-visible: Before · After
- search/invalid+hover: Before · After
- search/loading: Before · After
- search/placeholder-shown: Before · After
- search/read-only: Before · After
- search/read-only+focus-visible: Before · After
- search/required: Before · After
checkbox
Same fixture bytes on both sides.
All maintained variants and states (static links):
- default/checked: Before · After
- default/checked+disabled: Before · After
- default/checked+focus-visible: Before · After
- default/default: Before · After
- default/disabled: Before · After
- default/focus-visible: Before · After
- default/hover: Before · After
- default/invalid: Before · After
- default/mixed: Before · After
- default/required: Before · After
- group/checked: Before · After
- group/checked+disabled: Before · After
- group/checked+focus-visible: Before · After
- group/default: Before · After
- group/disabled: Before · After
- group/focus-visible: Before · After
- group/hover: Before · After
- group/invalid: Before · After
- group/mixed: Before · After
- group/required: Before · After
tabs
Same fixture bytes on both sides.
All maintained variants and states (static links):
- default/default: Before · After
- default/disabled: Before · After
- default/focus-visible: Before · After
- default/hover: Before · After
- default/selected: Before · After
- default/selected+container-inactive: Before · After
- default/selected+focus-visible: Before · After
- overflow/default: Before · After
- overflow/disabled: Before · After
- overflow/focus-visible: Before · After
- overflow/hover: Before · After
- overflow/selected: Before · After
- overflow/selected+container-inactive: Before · After
- overflow/selected+focus-visible: Before · After
dialog
Same fixture bytes on both sides.
All maintained variants and states (static links):
- alert-dialog/closed: Before · After
- alert-dialog/default: Before · After
- alert-dialog/focus-trapped: Before · After
- alert-dialog/focus-visible: Before · After
- alert-dialog/hover: Before · After
- alert-dialog/open: Before · After
- alert-dialog/reduced-motion: Before · After
- default/closed: Before · After
- default/default: Before · After
- default/focus-trapped: Before · After
- default/focus-visible: Before · After
- default/hover: Before · After
- default/open: Before · After
- default/reduced-motion: Before · After
- form/closed: Before · After
- form/default: Before · After
- form/focus-trapped: Before · After
- form/focus-visible: Before · After
- form/hover: Before · After
- form/open: Before · After
- form/reduced-motion: Before · After
table
Same fixture bytes on both sides.
All maintained variants and states (static links):
- default/default: Before · After
- default/empty: Before · After
- default/hover: Before · After
- default/loading: Before · After
- default/selected: Before · After
- default/selected+container-inactive: Before · After
- default/selected+focus-visible: Before · After
- default/sorted: Before · After
- numeric/default: Before · After
- numeric/empty: Before · After
- numeric/hover: Before · After
- numeric/loading: Before · After
- numeric/selected: Before · After
- numeric/selected+container-inactive: Before · After
- numeric/selected+focus-visible: Before · After
- numeric/sorted: Before · After
- sticky-header/default: Before · After
- sticky-header/empty: Before · After
- sticky-header/hover: Before · After
- sticky-header/loading: Before · After
- sticky-header/selected: Before · After
- sticky-header/selected+container-inactive: Before · After
- sticky-header/selected+focus-visible: Before · After
- sticky-header/sorted: Before · After
- with-caption/default: Before · After
- with-caption/empty: Before · After
- with-caption/hover: Before · After
- with-caption/loading: Before · After
- with-caption/selected: Before · After
- with-caption/selected+container-inactive: Before · After
- with-caption/selected+focus-visible: Before · After
- with-caption/sorted: Before · After
sidebar-nav
Same fixture bytes on both sides.
All maintained variants and states (static links):
- collapsed/collapsed: Before · After
- collapsed/current: Before · After
- collapsed/default: Before · After
- collapsed/expanded: Before · After
- collapsed/focus-visible: Before · After
- collapsed/hover: Before · After
- collapsed/selected: Before · After
- collapsed/selected+container-inactive: Before · After
- default/collapsed: Before · After
- default/current: Before · After
- default/default: Before · After
- default/expanded: Before · After
- default/focus-visible: Before · After
- default/hover: Before · After
- default/selected: Before · After
- default/selected+container-inactive: Before · After
- nested/collapsed: Before · After
- nested/current: Before · After
- nested/default: Before · After
- nested/expanded: Before · After
- nested/focus-visible: Before · After
- nested/hover: Before · After
- nested/selected: Before · After
- nested/selected+container-inactive: Before · After
Expected migration verification
- Review changed roles and their explicit dependencies.
- Recheck applicable component states, focus, selection and contrast in each actual consumer.
- Run matched browser captures and inspect differences; record browser, fonts, viewport and input digests.
- Resolve unsupported historical inputs and unmapped consumers before claiming migration coverage.
Limits
- Historical JavaScript and historical build tools are never executed.
- Only explicit revision-bound migration mappings establish renames.
- Missing eligibility or evidence fields remain unknown; current rules are never backfilled.
- Known affected means a recorded contract/dependency changed, not that a downstream application regressed.
- No native-port verification or automatic consumer upgrade is performed.