Component Gap Analysis
Components, tokens, and patterns that required custom implementations beyond the NYSDS component library.
All custom CSS uses NYSDS design tokens exclusively — no hardcoded colors, spacing, or typography values.
Custom Components Built
These five TypeScript classes were built as reusable modules in src/components/ because no NYSDS equivalent exists.
| Component | Used In | Notes |
|---|---|---|
CodeInput |
OTP Entry | 6-digit verification code input with auto-advance, paste support, and keyboard navigation. |
RepeaterManager |
Household Repeater | Generic add/edit/remove list manager with modal confirmation. Configurable via callbacks for rendering and parsing. |
CalendarGrid |
Timeslot Picker | Month-view calendar with role="grid" for accessible date selection. Full keyboard nav (arrows, Home/End, PageUp/PageDown). Three date states: available, limited, unavailable. |
Timeline |
Status Timeline | CSS-styled <ol> for chronological event history with status dots and connecting lines. Three states: complete, current, pending. |
DataTableManager |
Data Table | Sortable/filterable/paginated table manager with optional checkbox selection. Integrates with nys-pagination. |
Custom UI Patterns by Category
Beyond the five discrete components above, many patterns required significant custom HTML/CSS structures to cover interaction needs that NYSDS does not address with existing components.
Identity & Access
Password Strength Meter
Demo: Account Creation
What it does: Multi-segment color bar showing password strength (weak/fair/good/strong) with a checklist of password requirements that update in real time.
.password-strength
.strength-meter
.strength-segment
.strength-label
.password-rules
.rule-item
Step Indicator
Demo: Password Reset
What it does: Numbered step badges connected by lines showing progress through a multi-step flow. Panels show/hide based on current step.
.step-indicator
.step-badges
.step-badge
.step-connector
.step-description
.step-panel
OTP Layout
Demo: OTP Entry
What it does: Constrained-width layout for one-time passcode verification with countdown timer and resend controls.
.otp-content
.otp-heading
.otp-subtext
.otp-actions
.otp-resend
.resend-timer-text
Profile Snapshot
Demo: Profile Snapshot
What it does: User profile page with avatar, verification badge, contact information cards with edit buttons, and quick actions.
.profile-banner
.profile-banner__identity
.profile-banner__info
.profile-banner__name
.profile-banner__status
.profile-contact
.profile-section-heading
.profile-contact__list
.profile-contact__item
Notification Preferences
Demo: Notification Preferences
What it does: Grouped toggle switches for managing notification channels per category.
.notification-section
.notification-section-heading
.notification-section-description
.notification-toggles
.notification-alert-container
Verify Identity
Demo: Verify Identity
What it does: Privacy notice text and date-of-birth field grouping for identity verification forms.
.privacy-notice
.dob-fields
Wayfinding
Process Map
Demo: Process Map
What it does: Vertical timeline of numbered steps with connecting lines via CSS pseudo-elements. Three states: completed (green), current (theme-colored ring), and future (hollow).
.process-map
.process-map__step
.process-map__node
.process-map__node-number
.process-map__content
.process-map__label
.process-map__description
.process-map__time
.process-map__status
Task Progress Bar
Demo: Task List
What it does: Progress bar showing completion percentage with accordion-based task items below. Disabled tasks appear dimmed.
.task-list-container
.task-progress
.task-progress__text
.task-progress__bar-container
.task-progress__bar
.task-item
.task-item__header
.task-item__description
.task-item__action
.task-item--disabled
Wizard Stepper Review
Demo: Wizard Stepper
What it does: Multi-step form wizard with review/confirm step showing editable summary sections and a confirmation reference number.
.wizard-container
.review-section
.review-edit-link
.confirmation-content
.confirmation-ref
.saved-banner
Eligibility Result
Demo: Eligibility Result
What it does: Eligibility determination display with eligible/ineligible/partial result variants, disclaimer notice, and alternative program suggestions with apply links.
.eligibility-container
.demo-toggle
.result-section
.result-details
.result-actions
.result-disclaimer
.alternative-programs
.alt-program__info
Form Capture
Error Summary
Demo: Validation Errors
What it does: Alert box at the top of a form listing all validation errors as anchor links that jump to the corresponding field.
.error-summary
.error-summary-heading
.error-list
Review & Confirm
Demo: Review Confirm
What it does: Read-only review of all form sections in accordions with edit links, a legal certification checkbox, and a post-submission confirmation with print button.
.review-confirm-wrapper
.review-title
.review-description
.review-section
.review-dl
.household-list
.household-member
.certification-section
.confirmation-section
Income Entry
Demo: Income Entry
What it does: Dynamic list of income sources with add/remove and a live-updating total amount.
.income-entry-form
.income-header
.income-title
.income-description
.income-sources
.income-add-action
.income-total
.total-label
.total-amount
Expenses Entry
Demo: Expenses Entry
What it does: Categorized expense rows with live summary totals and net income comparison.
.expenses-entry-form
.expenses-header
.expense-rows
.expenses-summary
.summary-row
.summary-total
.summary-net
.income-comparison
Conditional Questions
Demo: Conditional Questions
What it does: Yes/no radio questions that reveal additional form fields when a specific answer is selected.
.conditional-question
.conditional-fields
.conditional-alert-container
Date Capture
Demo: Date Capture
What it does: Date input examples with format guidance text.
.date-example
.date-example-description
.date-alert-container
Evidence & Documents
Document Cards
Demo: Document Upload
What it does: Uploaded file list with icon, filename, size/date metadata, and remove button per card.
.upload-form
.uploaded-documents
.document-card
.document-card__icon
.document-card__details
.document-card__name
.document-card__meta
.document-card__actions
Document Checklist
Demo: Document Checklist
What it does: Required/optional document checklist with progress summary bar, due dates, and upload status per item.
.checklist-progress
.checklist-section
.checklist-item
.checklist-item__check
.checklist-item__details
.checklist-item__status--submitted
.checklist-item__status--pending
Multi-File Upload Queue
Demo: Multi-File Upload
What it does: Batch file upload with per-file progress bars, error/complete states, and a summary count. Data attributes toggle error/success border colors.
.multi-upload-input
.upload-summary
.file-queue
.file-queue-item
.file-queue-item__progress
.file-queue-item__progress-bar
.file-queue-item__error
.file-queue-item__status
Download Table
Demo: Download Center
What it does: Responsive table of downloadable documents with icon, name, date, size, and download button per row.
.download-center-header
.download-center-count
.table-responsive
.download-table
.doc-name-cell
Scheduling
Location Selector
Demo: Location Selector
What it does: Search field with filterable office location cards containing address, hours, and select action.
.location-search
.location-search__heading
.location-results
.location-results__heading
.location-results__cards
Timeslot Picker Layout
Demo: Timeslot Picker
What it does: Side-by-side layout of calendar grid (custom CalendarGrid component) and available time slot radio buttons with a selection summary.
.timeslot-picker
.timeslot-picker__location
.timeslot-picker__heading
.timeslot-picker__layout
.timeslot-picker__calendar-section
.timeslot-picker__timeslots
.timeslot-picker__summary
Appointment Details Card
Demo: Appointment Details
What it does: Confirmation card with reference number, appointment date/time/location details, a “what to bring” checklist, and add-to-calendar/cancel actions.
.appointment-details
.appointment-card
.appointment-card__header
.appointment-card__title
.appointment-card__ref
.appointment-card__details
.appointment-card__bring
.appointment-actions
Payments
Bill Lookup Result
Demo: Bill Lookup
What it does: Success-bordered card displaying bill account details in a grid layout with a large formatted balance amount.
.result-card
.bill-details
.balance-amount
Payment Form Sections
Demo: Payment Form
What it does: Sectioned payment form with divider lines between amount, payment method, and billing address groups.
.payment-section
.payment-balance
Receipt Page
Demo: Receipt Page
What it does: Payment confirmation with success alert, receipt card with transaction details, next steps list, and print/download actions.
.receipt-page-content
.receipt-success-alert
.receipt-card
.receipt-details
.amount-value
.next-steps
.receipt-actions
Status & Messaging
Action Needed
Demo: Action Needed
What it does: Urgent action banner with deadline, missing items checklist, and progress toward completion.
.action-deadline
.deadline-label
.missing-items
.missing-items-heading
.checklist
.checklist-item
.progress-summary
Message Thread
Demo: Message Thread
What it does: Conversation thread with alternating message bubbles, sender info, timestamps, and a reply form with response-time notice.
.thread-header
.thread-subject
.thread-meta
.message-thread
.reply-form
.reply-heading
.response-time
Notice Viewer
Demo: Notice Viewer
What it does: Official notice display with metadata header, structured detail rows, full notice text, and a contact information section.
.notice-header
.notice-title
.notice-meta
.notice-details
.details-list
.full-notice-content
.questions-section
.contact-info
Data Display
Record Detail
Demo: Record Detail
What it does: Case record page with metric cards, detail fields, related documents list, and chronological activity log.
.record-header
.record-header-title
.record-case-number
.record-actions
.record-metrics
.metric-card
.record-detail-list
.record-document-list
.record-activity-log
Bulk Actions Bar
Demo: Bulk Actions
What it does: Sticky bottom action bar that appears when table rows are selected, with select-all banner and bulk operation buttons.
.select-all-banner
.select-all-link
.bulk-table-container
.bulk-action-bar
.bulk-action-bar-inner
.bulk-action-count
.bulk-action-buttons
Help & Safety
Contextual Help
Demo: Contextual Help
What it does: Tooltip triggers and accordion-based help content sections with labels and descriptions.
.help-pattern-section
.help-pattern-label
.help-pattern-description
.accordion-help-content
Confirmation & Next Steps
Demo: Confirmation Next Steps
What it does: Post-submission success page with checkmark icon, reference number with copy button, numbered next steps, timeline alert, and contact information.
.confirmation-page
.confirmation-header
.success-icon-circle
.confirmation-title
.confirmation-card
.confirmation-ref
.copy-feedback
.next-steps-section
.next-steps-list
.timeline-alert
.contact-section
Session Timeout
Demo: Session Timeout
What it does: Session countdown timer with warning modal (extend/save/logout), save-and-exit functionality, and a logged-out state view.
.demo-controls
.timer-display
.timer-label
.timer-value
.logged-out-state
.logged-out-content
.modal-save-note
Shared Layout (global.css)
Pattern Page Shell
Demo: Index
What it does: Shared page structure for all 41 pattern pages — constrained-width main content, intro with breadcrumb, raised demo container, and usage notes aside.
.pattern-page
.pattern-intro
.pattern-description
.breadcrumb
.demo-container
.pattern-notes
Index Catalog
Demo: Index
What it does: Landing page with categorized card grid for browsing all patterns.
.catalog-intro
.pattern-category
.category-description
.pattern-grid
.pattern-card
.pattern-card-meta
Form Helpers
Demo: Address Form
What it does: Reusable form layout primitives for vertical stacking, inline field groups, button rows, and data summary cards.
.form-row
.form-row-inline
.form-actions
.summary-card
Notes on nys-datepicker
The nys-datepicker component exists in NYSDS but is not documented in the MCP server. It was used in Date Capture and other patterns. It does not support per-date availability indicators (available/limited/unavailable styling), which is why a custom CalendarGrid was needed for the Timeslot Picker pattern.
Missing Tokens
| Token | Context | Workaround |
|---|---|---|
--nys-font-family-mono |
Reference numbers, masked values | Falls back to generic monospace |