Component Migration Tracker Tracks progress toward a fully migrated component library. A component is considered migrated when it lives in a tiered folder (01.atoms – 05.forms) and has both supporting documents complete.
Symbol
Meaning
✅
Exists
☐
Required — not yet created
—
N/A — internal/sub-component, not consumed directly
CS = CONSUMER-STYLING.md in the component folderSN = VS Code snippet in .vscode/srcdev-component-{name}.code-snippets
Component
File
CS
SN
AnimatedSvgText
animations/animated-svg-text/AnimatedSvgText.vue✅
✅ animated-svg-text
EntryAnimation
animations/entry/EntryAnimation.vue☐
☐
ScrollRevealFrame
animations/scroll-reveal-frame/ScrollRevealFrame.vue✅
✅ scroll-reveal-frame
ScrollRevealImage
animations/scroll-reveal-image/ScrollRevealImage.vue✅
✅ scroll-reveal-image
RotatingCarouselImage
animations/rotating-carousel-image/RotatingCarouselImage.vue✅
✅ rotating-carousel-image
ClipElement
animations/clip-element/ClipElement.vue✅
✅ clip-element
WipeAwayVertical
animations/view-timeline/WipeAwayVertical.vue✅
✅ wipe-away-vertical
BannerVideo
banner-video/BannerVideo.vue☐
☐
CanvasSwitcher
canvas-switcher/CanvasSwitcher.vue✅
✅ canvas-switcher
CardCore
card/CardCore.vue✅
☐
ClippedPanel
clipped-panel/ClippedPanel.vue✅
✅ clipped-panel
DashboardQuadGrid
content-wrappers/layout-grid/dashboard-quad-grid/✅
✅ dashboard-quad-grid
DashboardStatsGrid
content-wrappers/layout-grid/dashboard-stats-grid/✅
✅ dashboard-stats-grid
LayoutGridByCols
content-wrappers/layout-grid/layout-grid-by-cols/✅
✅ layout-grid-by-cols
DisplayDialog
display-dialog/DisplayDialog.vue✅
✅ dialog
DisplayTooltip
display-tooltip/DisplayTooltip.vue✅
✅ display-tooltip
DisplayPill
display-pill/DisplayPill.vue✅
✅ display-pill
GlassPanel
glass-panel/GlassPanel.vue✅
✅
AutoGrid
grids/auto-grid/AutoGrid.vue☐
☐
GridStack
grids/grid-stack/GridStack.vue☐
☐
ColumnFlowGrid
grids/column-flow-grid/ColumnFlowGrid.vue (renamed from MasonryGrid)✅
✅ column-flow-grid
MasonryGrid
grids/masonry-grid/MasonryGrid.vue (renamed from MasonryGridReadingOrder, itself renamed from MasonryGridSorted)✅
✅ masonry-grid
PageRow
page-row/PageRow.vue✅
☐
DisplayQrCode
qr-code/DisplayQrCode.vue☐
☐
TextBlock
text-block/TextBlock.vue☐
☐
EyebrowText
text-blocks/eyebrow-text/EyebrowText.vue☐
☐
HeroText
text-blocks/hero-text/HeroText.vue☐
☐
LinkText
text-blocks/link-text/LinkText.vue☐
☐
UiBlockDecorated
ui-block-decorated/UiBlockDecorated.vue✅
✅ ui-block-decorated
Component
File
CS
SN
ActionMenu
action-menu/ActionMenu.vue✅
☐
ActionMenuItem
action-menu/ActionMenuItem.vue—
—
AlertContent
alert-content/AlertContent.vue✅
✅ alert-content
AlertContentInner
alert-content/AlertContentInner.vue—
—
AlertMaskedContent
alert-masked-content/AlertMaskedContent.vue✅
✅ alert-masked-content
ContactSection
contact-section/ContactSection.vue☐
☐
DisplayAvatar
display-avatar/DisplayAvatar.vue✅
✅ display-avatar
DisplayTooltipRich
display-tooltip-rich/DisplayTooltipRich.vue✅
✅ display-tooltip-rich
DisplayChip
display-chip/DisplayChip.vue☐
☐
DisplayPrompt
prompt/DisplayPrompt.vue☐
✅ display-prompt
DisplayToast
toast/DisplayToast.vue✅
✅ display-toast
DisplayToastProvider
toast/DisplayToastProvider.vue✅
✅ display-toast
AccordionGroup
expandable/accordion-group/AccordionGroup.vue☐
☐
ExpandingPanel
expandable/expanding-panel/ExpandingPanel.vue☐
☐
OpeningHours
opening-hours/OpeningHours.vue✅
✅ opening-hours
PriceList
price-list/PriceList.vue✅
✅ price-list
ProfileSection
profile-section/ProfileSection.vue☐
☐
CaptureQrCode
qr-code/CaptureQrCode.vue☐
☐
DecodeQrCode
qr-code/DecodeQrCode.vue☐
☐
SamaritanPrompt
samaritan-prompt/SamaritanPrompt.vue✅
✅ samaritan-prompt
SamaritanPromptMixed
samaritan-prompt/SamaritanPromptMixed.vue✅
✅ samaritan-prompt
SocialIconsList
social-icons-list/SocialIconsList.vue☐
☐
StepperList
stepper-list/StepperList.vue✅
☐
Component
File
CS
SN
CarouselFlip
image-galleries/carousel-flip/CarouselFlip.vue✅
✅ carousel-flip
SliderGallery
image-galleries/slider-gallery/SliderGallery.vue☐
☐
ServicesCard
services/services-card/ServicesCard.vue✅
✅ services-card
ServicesCardGrid
services/services-grids/ServicesCardGrid.vue✅
✅ services-grids
ServiceSummaryGrid
services/services-grids/ServiceSummaryGrid.vue☐
☐
ServiceSummary
services/service-summary/ServiceSummary.vue☐
☐
Component
File
CS
SN
PageHeroHighlights
page-hero-highlights/PageHeroHighlights.vue☐
☐
PageHeroHighlightsHeader
page-hero-highlights/PageHeroHighlightsHeader.vue—
—
Component
File
CS
SN
FormWrapper
form-wrapper/FormWrapper.vue✅
✅
FormFieldset
form-fieldset/FormFieldset.vue✅
✅
FormField
form-field/FormField.vue✅
✅
InputError
form-errors/InputError.vue✅
✅
InputLabel
input-label/InputLabel.vue—
—
InputDescription
input-description/InputDescription.vue✅
✅
Component
File
CS
SN
InputButton
input-button/InputButton.vue☐
☐
Component
File
CS
SN
InputText
input-text/InputText.vue☐
☐
InputTextField
input-text/InputTextField.vue☐
☐
InputTextAsNumberField
input-text/InputTextAsNumberField.vue☐
☐
InputPasswordField
input-text/InputPasswordField.vue☐
☐
InputTextarea
input-textarea/InputTextarea.vue☐
☐
InputTextareaField
input-textarea/InputTextareaField.vue☐
☐
InputCopyCore
input-copy/InputCopyCore.vue☐
☐
Component
File
CS
SN
InputSelect
input-select/InputSelect.vue☐
☐
InputSelectField
input-select/InputSelectField.vue☐
☐
InputNumber
input-number/InputNumber.vue☐
☐
InputNumberField
input-number/InputNumberField.vue☐
☐
Component
File
CS
SN
InputCheckboxRadioCore
input-checkbox-radio/InputCheckboxRadioCore.vue—
—
InputCheckboxRadioButton
input-checkbox-radio/InputCheckboxRadioButton.vue—
—
InputCheckboxRadioWithLabel
input-checkbox-radio/InputCheckboxRadioWithLabel.vue—
—
SingleCheckbox
input-checkbox/SingleCheckbox.vue☐
☐
MultipleCheckboxes
input-checkbox/MultipleCheckboxes.vue☐
☐
MultipleRadiobuttons
input-radio/MultipleRadiobuttons.vue☐
☐
Component
File
CS
SN
ToggleSwitch
toggle-switch/ToggleSwitch.vue☐
☐
ToggleSwitchField
toggle-switch/ToggleSwitchField.vue☐
☐
SegmentedControl
segmented-control/SegmentedControl.vue✅
✅ segmented-control
InputRange
input-range/InputRange.vue✅
✅ input-range
InputRangeField
input-range/InputRangeField.vue✅
✅ input-range
Component
File
CS
SN
PendingEffect
pending-effect/PendingEffect.vue✅
✅
These components still live in the root app/components/ folder and need to be assessed, tiered, and moved before CS and SN work can begin.
Component
File
Notes
AlertMask
alert-mask/AlertMask.vueSVG mask utility — may stay internal
CarouselFlip
carousels/CarouselFlip.vue
DeepExpandingMenu
deep-expanding-menu/DeepExpandingMenu.vue
DeepExpandingMenuOld
deep-expanding-menu/DeepExpandingMenuOld.vueLikely deprecated — review before migrating
DisplayBanner
display-banner/DisplayBanner.vue
DisplayThemeSwitch
display-theme-switch/DisplayThemeSwitch.vue
MagneticNavigation
magnetic-navigation/MagneticNavigation.vue
MarqueeScroller
marquee-scroller/MarqueeScroller.vue
PopOver
pop-over/PopOver.vue
ResponsiveHeader
responsive-header/ResponsiveHeader.vue
NavigationItems
responsive-header/NavigationItems.vueInternal sub-component of ResponsiveHeader