@cyberskill/design 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DESIGN.md +25 -3
- package/README.md +7 -7
- package/SKILL.md +4 -4
- package/VERSION +1 -1
- package/_ds_bundle.js +819 -416
- package/_ds_manifest.json +1 -1
- package/_esm/cs.mjs +18 -4
- package/_esm/react.d.ts +2 -0
- package/_esm/react.mjs +1 -0
- package/base/a11y.css +18 -0
- package/base/ai.css +2 -2
- package/base/collections.css +8 -3
- package/base/components.css +11 -2
- package/base/controls.css +61 -48
- package/base/data.css +3 -3
- package/base/feedback.css +5 -0
- package/base/forms.css +9 -3
- package/base/glass.css +6 -0
- package/base/navigation.css +8 -2
- package/base/reset.css +1 -1
- package/base/responsive.css +25 -0
- package/base/shell.css +7 -1
- package/components/_i18n/i18n.js +13 -1
- package/components/_i18n/strings.js +52 -3
- package/components/ai/ConfidenceMeter.jsx +8 -6
- package/components/data/Watermark.jsx +11 -3
- package/components/datatable/DataGrid.jsx +10 -1
- package/components/dialog/Dialog.jsx +13 -45
- package/components/feedback/ProgressBar.jsx +4 -2
- package/components/forms/Cascader.jsx +69 -6
- package/components/forms/Editor.jsx +37 -2
- package/components/forms/FileUpload.jsx +22 -8
- package/components/forms/Switch.jsx +16 -2
- package/components/forms/TimePicker.jsx +3 -1
- package/components/icon/Icon.jsx +1 -0
- package/components/navigation/CommandPalette.jsx +22 -7
- package/components/navigation/Toolbar.jsx +2 -1
- package/components/overlays/AlertDialog.jsx +19 -49
- package/components/overlays/Drawer.jsx +24 -20
- package/components/overlays/OverlayManager.d.ts +40 -0
- package/components/overlays/OverlayManager.jsx +214 -0
- package/components/overlays/OverlayManager.prompt.md +12 -0
- package/components/overlays/Tour.jsx +14 -7
- package/dist/styles.min.css +2004 -0
- package/docs/benchmark-rubric.md +1 -1
- package/docs/ci-cd.md +3 -1
- package/docs/consuming.md +6 -6
- package/docs/contrast-report.md +1 -1
- package/docs/conventions.md +4 -4
- package/docs/decisions/container-query-migration.md +18 -0
- package/docs/decisions/overlay-manager-design.md +101 -0
- package/docs/decisions.md +5 -5
- package/docs/design-styles.md +1 -1
- package/docs/plans/cyberskill-design-system-audit-and-12-month-evolution-plan.md +1490 -0
- package/docs/quality-gates.md +21 -9
- package/docs/release-notes.md +10 -2
- package/docs/status/data/status-feed.json +1 -1
- package/docs/status/data/task/TASK-REL-002.js +1 -0
- package/docs/status/index.html +7 -6
- package/docs/status/status-legacy.html +13 -12
- package/docs/sync.md +1 -1
- package/docs/tasks/BACKLOG.md +1 -0
- package/docs/tasks/_state/commit-links.yaml +14 -0
- package/docs/tasks/release/TASK-REL-002-republish-1-1-1/spec.md +54 -0
- package/docs/vi/benchmark-rubric.md +1 -1
- package/docs/vi/ci-cd.md +3 -1
- package/docs/vi/consuming.md +6 -6
- package/docs/vi/contrast-report.md +1 -1
- package/docs/vi/conventions.md +2 -2
- package/docs/vi/decisions.md +5 -5
- package/docs/vi/quality-gates.md +21 -9
- package/docs/vi/release-notes.md +10 -2
- package/docs/vi/sync.md +1 -1
- package/guidelines/atomic-view.html +11 -7
- package/llms.txt +5 -5
- package/package.json +14 -6
- package/templates/_ds-base.canonical.js +55 -0
- package/templates/ai-cluster-demo.html +2 -2
- package/templates/app-shell/AppShell.dc.html +5 -3
- package/templates/app-shell/ds-base.js +33 -1
- package/templates/app-shell/support.js +13 -20
- package/templates/article/Article.dc.html +5 -1
- package/templates/article/ds-base.js +33 -1
- package/templates/article/support.js +13 -20
- package/templates/auth/Auth.dc.html +10 -5
- package/templates/auth/content-schema.json +12 -0
- package/templates/auth/ds-base.js +33 -1
- package/templates/auth/support.js +13 -20
- package/templates/bod-deck/BodDeck.dc.html +11 -10
- package/templates/bod-deck/ds-base.js +33 -1
- package/templates/bod-deck/support.js +13 -20
- package/templates/bod-investor-update/BodInvestorUpdate.dc.html +4 -3
- package/templates/bod-investor-update/ds-base.js +33 -1
- package/templates/bod-investor-update/support.js +13 -20
- package/templates/bod-memo/BodMemo.dc.html +6 -5
- package/templates/bod-memo/ds-base.js +33 -1
- package/templates/bod-memo/support.js +13 -20
- package/templates/bod-minutes/BodMinutes.dc.html +2 -1
- package/templates/bod-minutes/ds-base.js +33 -1
- package/templates/bod-minutes/support.js +13 -20
- package/templates/bod-report/BodReport.dc.html +3 -2
- package/templates/bod-report/ds-base.js +33 -1
- package/templates/bod-report/support.js +13 -20
- package/templates/bod-resolution/BodResolution.dc.html +5 -4
- package/templates/bod-resolution/ds-base.js +33 -1
- package/templates/bod-resolution/support.js +13 -20
- package/templates/culture-event-invite/CultureEventInvite.dc.html +3 -2
- package/templates/culture-event-invite/ds-base.js +33 -1
- package/templates/culture-event-invite/support.js +13 -20
- package/templates/dashboard/Dashboard.dc.html +7 -3
- package/templates/dashboard/ds-base.js +33 -1
- package/templates/dashboard/support.js +13 -20
- package/templates/delivery-change-note/DeliveryChangeNote.dc.html +2 -1
- package/templates/delivery-change-note/ds-base.js +33 -1
- package/templates/delivery-change-note/support.js +13 -20
- package/templates/delivery-kickoff/DeliveryKickoff.dc.html +3 -2
- package/templates/delivery-kickoff/ds-base.js +33 -1
- package/templates/delivery-kickoff/support.js +13 -20
- package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +6 -5
- package/templates/delivery-qbr-deck/ds-base.js +33 -1
- package/templates/delivery-qbr-deck/support.js +13 -20
- package/templates/delivery-runbook/DeliveryRunbook.dc.html +3 -2
- package/templates/delivery-runbook/ds-base.js +33 -1
- package/templates/delivery-runbook/support.js +13 -20
- package/templates/delivery-status-email/DeliveryStatusEmail.dc.html +3 -2
- package/templates/delivery-status-email/ds-base.js +33 -1
- package/templates/delivery-status-email/support.js +13 -20
- package/templates/doc-style-guide/DocStyleGuide.dc.html +67 -64
- package/templates/doc-style-guide/ds-base.js +33 -1
- package/templates/doc-style-guide/support.js +13 -20
- package/templates/doc-suite-index/DocSuiteIndex.dc.html +46 -45
- package/templates/doc-suite-index/ds-base.js +33 -1
- package/templates/doc-suite-index/support.js +13 -20
- package/templates/doc-templates/DocTemplates.dc.html +42 -41
- package/templates/doc-templates/ds-base.js +33 -1
- package/templates/doc-templates/support.js +13 -20
- package/templates/email/Email.dc.html +3 -2
- package/templates/email/ds-base.js +33 -1
- package/templates/email/support.js +13 -20
- package/templates/finance-dunning-email/FinanceDunningEmail.dc.html +4 -3
- package/templates/finance-dunning-email/ds-base.js +33 -1
- package/templates/finance-dunning-email/support.js +13 -20
- package/templates/finance-expense-report/FinanceExpenseReport.dc.html +4 -3
- package/templates/finance-expense-report/ds-base.js +33 -1
- package/templates/finance-expense-report/support.js +13 -20
- package/templates/finance-invoice/FinanceInvoice.dc.html +4 -3
- package/templates/finance-invoice/ds-base.js +33 -1
- package/templates/finance-invoice/support.js +13 -20
- package/templates/finance-quote/FinanceQuote.dc.html +4 -3
- package/templates/finance-quote/ds-base.js +33 -1
- package/templates/finance-quote/support.js +13 -20
- package/templates/hr-announcement/HrAnnouncement.dc.html +5 -4
- package/templates/hr-announcement/ds-base.js +33 -1
- package/templates/hr-announcement/support.js +13 -20
- package/templates/hr-interview-kit/HrInterviewKit.dc.html +4 -3
- package/templates/hr-interview-kit/ds-base.js +33 -1
- package/templates/hr-interview-kit/support.js +13 -20
- package/templates/hr-offboarding/HrOffboarding.dc.html +2 -1
- package/templates/hr-offboarding/ds-base.js +33 -1
- package/templates/hr-offboarding/support.js +13 -20
- package/templates/hr-performance-review/HrPerformanceReview.dc.html +2 -1
- package/templates/hr-performance-review/ds-base.js +33 -1
- package/templates/hr-performance-review/support.js +13 -20
- package/templates/hr-pip/HrPip.dc.html +2 -1
- package/templates/hr-pip/ds-base.js +33 -1
- package/templates/hr-pip/support.js +13 -20
- package/templates/kitchen-sink.html +9 -4
- package/templates/legal-msa/LegalMsa.dc.html +2 -1
- package/templates/legal-msa/ds-base.js +33 -1
- package/templates/legal-msa/support.js +13 -20
- package/templates/legal-sow/LegalSow.dc.html +2 -1
- package/templates/legal-sow/ds-base.js +33 -1
- package/templates/legal-sow/support.js +13 -20
- package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +3 -2
- package/templates/marketing-campaign-brief/ds-base.js +33 -1
- package/templates/marketing-campaign-brief/support.js +13 -20
- package/templates/marketing-case-study/MarketingCaseStudy.dc.html +5 -4
- package/templates/marketing-case-study/ds-base.js +33 -1
- package/templates/marketing-case-study/support.js +13 -20
- package/templates/marketing-launch/MarketingLaunch.dc.html +6 -5
- package/templates/marketing-launch/ds-base.js +33 -1
- package/templates/marketing-launch/support.js +13 -20
- package/templates/marketing-newsletter/MarketingNewsletter.dc.html +13 -12
- package/templates/marketing-newsletter/ds-base.js +33 -1
- package/templates/marketing-newsletter/support.js +13 -20
- package/templates/marketing-page/MarketingPage.dc.html +17 -12
- package/templates/marketing-page/ds-base.js +33 -1
- package/templates/marketing-page/support.js +13 -20
- package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
- package/templates/marketing-press-release/ds-base.js +33 -1
- package/templates/marketing-press-release/support.js +13 -20
- package/templates/marketing-social-kit/MarketingSocialKit.dc.html +5 -4
- package/templates/marketing-social-kit/ds-base.js +33 -1
- package/templates/marketing-social-kit/support.js +13 -20
- package/templates/sales-one-pager/SalesOnePager.dc.html +5 -4
- package/templates/sales-one-pager/ds-base.js +33 -1
- package/templates/sales-one-pager/support.js +13 -20
- package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +7 -6
- package/templates/sales-proposal-deck/ds-base.js +33 -1
- package/templates/sales-proposal-deck/support.js +13 -20
- package/templates/settings/Settings.dc.html +5 -1
- package/templates/settings/ds-base.js +33 -1
- package/templates/settings/support.js +13 -20
- package/templates/slide-deck/SlideDeck.dc.html +5 -4
- package/templates/slide-deck/ds-base.js +33 -1
- package/templates/slide-deck/support.js +13 -20
- package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +2 -1
- package/templates/team-meeting-agenda/ds-base.js +33 -1
- package/templates/team-meeting-agenda/support.js +13 -20
- package/templates/tech-incident-report/TechIncidentReport.dc.html +3 -2
- package/templates/tech-incident-report/ds-base.js +33 -1
- package/templates/tech-incident-report/support.js +13 -20
- package/templates/tech-release-notes/TechReleaseNotes.dc.html +6 -5
- package/templates/tech-release-notes/ds-base.js +33 -1
- package/templates/tech-release-notes/support.js +13 -20
- package/templates/tech-retro/TechRetro.dc.html +4 -3
- package/templates/tech-retro/ds-base.js +33 -1
- package/templates/tech-retro/support.js +13 -20
- package/templates/tech-rfc/TechRfc.dc.html +3 -2
- package/templates/tech-rfc/ds-base.js +33 -1
- package/templates/tech-rfc/support.js +13 -20
- package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +36 -35
- package/templates/vn-appointment-transfer/ds-base.js +33 -1
- package/templates/vn-appointment-transfer/support.js +13 -20
- package/templates/vn-certificate-of-employment/VnCertificateOfEmployment.dc.html +27 -26
- package/templates/vn-certificate-of-employment/ds-base.js +33 -1
- package/templates/vn-certificate-of-employment/support.js +13 -20
- package/templates/vn-code-of-conduct/VnCodeOfConduct.dc.html +44 -43
- package/templates/vn-code-of-conduct/ds-base.js +33 -1
- package/templates/vn-code-of-conduct/support.js +13 -20
- package/templates/vn-compensation-regulation/VnCompensationRegulation.dc.html +53 -52
- package/templates/vn-compensation-regulation/ds-base.js +33 -1
- package/templates/vn-compensation-regulation/support.js +13 -20
- package/templates/vn-contract-amendment/VnContractAmendment.dc.html +41 -40
- package/templates/vn-contract-amendment/ds-base.js +33 -1
- package/templates/vn-contract-amendment/support.js +13 -20
- package/templates/vn-contractor-agreement/VnContractorAgreement.dc.html +50 -49
- package/templates/vn-contractor-agreement/ds-base.js +33 -1
- package/templates/vn-contractor-agreement/support.js +13 -20
- package/templates/vn-data-protection-policy/VnDataProtectionPolicy.dc.html +54 -53
- package/templates/vn-data-protection-policy/ds-base.js +33 -1
- package/templates/vn-data-protection-policy/support.js +13 -20
- package/templates/vn-disciplinary-case-file/VnDisciplinaryCaseFile.dc.html +72 -71
- package/templates/vn-disciplinary-case-file/ds-base.js +33 -1
- package/templates/vn-disciplinary-case-file/support.js +13 -20
- package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +21 -20
- package/templates/vn-disciplinary-schedule/ds-base.js +33 -1
- package/templates/vn-disciplinary-schedule/support.js +13 -20
- package/templates/vn-employee-request/VnEmployeeRequest.dc.html +54 -53
- package/templates/vn-employee-request/ds-base.js +33 -1
- package/templates/vn-employee-request/support.js +13 -20
- package/templates/vn-exit-handover/VnExitHandover.dc.html +122 -121
- package/templates/vn-exit-handover/ds-base.js +33 -1
- package/templates/vn-exit-handover/support.js +13 -20
- package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +31 -30
- package/templates/vn-foreign-employee-pack/ds-base.js +33 -1
- package/templates/vn-foreign-employee-pack/support.js +13 -20
- package/templates/vn-grassroots-democracy/VnGrassrootsDemocracy.dc.html +54 -53
- package/templates/vn-grassroots-democracy/ds-base.js +33 -1
- package/templates/vn-grassroots-democracy/support.js +13 -20
- package/templates/vn-infosec-policy/VnInfosecPolicy.dc.html +50 -49
- package/templates/vn-infosec-policy/ds-base.js +33 -1
- package/templates/vn-infosec-policy/support.js +13 -20
- package/templates/vn-internal-labor-regulations/VnInternalLaborRegulations.dc.html +84 -83
- package/templates/vn-internal-labor-regulations/ds-base.js +33 -1
- package/templates/vn-internal-labor-regulations/support.js +13 -20
- package/templates/vn-internship-agreement/VnInternshipAgreement.dc.html +44 -43
- package/templates/vn-internship-agreement/ds-base.js +33 -1
- package/templates/vn-internship-agreement/support.js +13 -20
- package/templates/vn-job-description/VnJobDescription.dc.html +28 -27
- package/templates/vn-job-description/ds-base.js +33 -1
- package/templates/vn-job-description/support.js +13 -20
- package/templates/vn-labor-contract/VnLaborContract.dc.html +109 -108
- package/templates/vn-labor-contract/ds-base.js +33 -1
- package/templates/vn-labor-contract/support.js +13 -20
- package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +32 -31
- package/templates/vn-labour-management-book/ds-base.js +33 -1
- package/templates/vn-labour-management-book/support.js +13 -20
- package/templates/vn-mutual-nda/VnMutualNda.dc.html +45 -44
- package/templates/vn-mutual-nda/ds-base.js +33 -1
- package/templates/vn-mutual-nda/support.js +13 -20
- package/templates/vn-ndnca-ip/VnNdncaIp.dc.html +73 -72
- package/templates/vn-ndnca-ip/ds-base.js +33 -1
- package/templates/vn-ndnca-ip/support.js +13 -20
- package/templates/vn-offer-letter/VnOfferLetter.dc.html +32 -31
- package/templates/vn-offer-letter/ds-base.js +33 -1
- package/templates/vn-offer-letter/support.js +13 -20
- package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +16 -15
- package/templates/vn-onboarding-checklist/ds-base.js +33 -1
- package/templates/vn-onboarding-checklist/support.js +13 -20
- package/templates/vn-pdpl-consent/VnPdplConsent.dc.html +43 -42
- package/templates/vn-pdpl-consent/ds-base.js +33 -1
- package/templates/vn-pdpl-consent/support.js +13 -20
- package/templates/vn-performance-evaluation-regulation/VnPerformanceEvaluationRegulation.dc.html +65 -64
- package/templates/vn-performance-evaluation-regulation/ds-base.js +33 -1
- package/templates/vn-performance-evaluation-regulation/support.js +13 -20
- package/templates/vn-performance-review-form/VnPerformanceReviewForm.dc.html +49 -48
- package/templates/vn-performance-review-form/ds-base.js +33 -1
- package/templates/vn-performance-review-form/support.js +13 -20
- package/templates/vn-phantom-stock/VnPhantomStock.dc.html +41 -40
- package/templates/vn-phantom-stock/ds-base.js +33 -1
- package/templates/vn-phantom-stock/support.js +13 -20
- package/templates/vn-probation-contract/VnProbationContract.dc.html +56 -55
- package/templates/vn-probation-contract/ds-base.js +33 -1
- package/templates/vn-probation-contract/support.js +13 -20
- package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +28 -27
- package/templates/vn-receipt-acknowledgement/ds-base.js +33 -1
- package/templates/vn-receipt-acknowledgement/support.js +13 -20
- package/templates/vn-remote-work-policy/VnRemoteWorkPolicy.dc.html +44 -43
- package/templates/vn-remote-work-policy/ds-base.js +33 -1
- package/templates/vn-remote-work-policy/support.js +13 -20
- package/templates/vn-resignation-letter/VnResignationLetter.dc.html +20 -19
- package/templates/vn-resignation-letter/ds-base.js +33 -1
- package/templates/vn-resignation-letter/support.js +13 -20
- package/templates/vn-salary-scale/VnSalaryScale.dc.html +39 -38
- package/templates/vn-salary-scale/ds-base.js +33 -1
- package/templates/vn-salary-scale/support.js +13 -20
- package/templates/vn-sow-appendix/VnSowAppendix.dc.html +21 -20
- package/templates/vn-sow-appendix/ds-base.js +33 -1
- package/templates/vn-sow-appendix/support.js +13 -20
- package/templates/vn-termination-decision/VnTerminationDecision.dc.html +25 -24
- package/templates/vn-termination-decision/ds-base.js +33 -1
- package/templates/vn-termination-decision/support.js +13 -20
- package/templates/vn-total-rewards-appendix/VnTotalRewardsAppendix.dc.html +63 -62
- package/templates/vn-total-rewards-appendix/ds-base.js +33 -1
- package/templates/vn-total-rewards-appendix/support.js +13 -20
- package/templates/vn-training-commitment/VnTrainingCommitment.dc.html +39 -38
- package/templates/vn-training-commitment/ds-base.js +33 -1
- package/templates/vn-training-commitment/support.js +13 -20
- package/templates/vn-travel-expense-policy/VnTravelExpensePolicy.dc.html +50 -49
- package/templates/vn-travel-expense-policy/ds-base.js +33 -1
- package/templates/vn-travel-expense-policy/support.js +13 -20
- package/tokens/colors.css +19 -1
- package/tokens/component-tokens.css +1 -0
- package/tokens/elements.css +35 -2
- package/tokens/elevation.css +8 -2
- package/tokens/native/CSTokens.kt +35 -1
- package/tokens/native/CSTokens.swift +35 -1
- package/tokens/native/cs_tokens.dart +35 -1
- package/tokens/provenance.json +12 -12
- package/tokens/spacing.css +2 -0
- package/tokens/tokens.dtcg.json +111 -3
- package/tokens/tokens.js +46 -6
- package/tokens/tokens.json +45 -5
- package/tokens/typography.css +2 -0
- package/ui_kits/deck/index.html +4 -0
- package/ui_kits/status-hub/StatusHub.jsx +30 -4
- package/ui_kits/status-hub/index.html +3 -3
- package/ui_kits/status-hub/login.html +4 -0
- package/ui_kits/status-hub/project.html +4 -0
- package/ui_kits/status-hub/settings.html +35 -13
- package/ui_kits/status-hub/status.css +5 -1
- package/ui_kits/website/Website.jsx +25 -3
- package/ui_kits/website/careers.html +4 -0
- package/ui_kits/website/chat.html +5 -3
- package/ui_kits/website/index.html +3 -3
- package/ui_kits/website/site.css +2 -2
- package/ui_kits/website/work.html +4 -0
|
@@ -0,0 +1,1490 @@
|
|
|
1
|
+
# CyberSkill Design System audit and 12-month evolution plan
|
|
2
|
+
|
|
3
|
+
## 1. Executive assessment
|
|
4
|
+
|
|
5
|
+
Audit date: 2026-07-28.
|
|
6
|
+
|
|
7
|
+
The current release does not meet an enterprise-grade claim. It has broad component coverage, deterministic generation checks, bilingual documentation, npm provenance, and a large test surface. Those strengths are offset by release controls that can report success without publishing, declarations that fail strict consumer compilation, unsafe HTML rendering, global CSS leakage, incomplete accessibility behavior, a two-language locale model, and four known consumers that remain on older or commit-pinned builds.
|
|
8
|
+
|
|
9
|
+
The highest-priority conclusions are:
|
|
10
|
+
|
|
11
|
+
- `@cyberskill/design@1.1.1` exists on npm, the registry tarball matches the tested repository artifact, and SLSA provenance is present.
|
|
12
|
+
- The published declarations fail strict TypeScript consumer checks. The current entry test checks text and export parity without compiling the declarations.
|
|
13
|
+
- `Editor` renders caller HTML without sanitation. This becomes a stored-XSS boundary when any consumer passes untrusted or remote HTML.
|
|
14
|
+
- Release automation accepts any `v*` tag and converts several publish failures into exit code 0.
|
|
15
|
+
- Only `fast-gates` and `docs-consistency-blocker` are required on `main`. Independent review, CODEOWNERS approval, signed commits, administrator enforcement, and conversation resolution are absent.
|
|
16
|
+
- The package contains 1,032 files and is 10.69 MB compressed. Templates and assets account for most of this size.
|
|
17
|
+
- The React entry publishes raw JSX, has no `"use client"` boundaries, and requires consumer-specific transpilation.
|
|
18
|
+
- System dark mode and high-contrast mode contain confirmed color failures, including measured contrast near 1.23:1 and 2.10:1.
|
|
19
|
+
- Several components declare ARIA widget roles without implementing the related keyboard model.
|
|
20
|
+
- The locale system maps every non-Vietnamese locale to English and links English to USD and Vietnamese to VND.
|
|
21
|
+
- Finance, SachViet, Landing Page, and Strategem are all behind the current release or use local wrappers, copied CSS, unsupported token names, or source-file imports.
|
|
22
|
+
- The audited maturity score is 2.10 out of 5 across 21 dimensions. This is a directional engineering score, not an external certification.
|
|
23
|
+
|
|
24
|
+
No repository file was changed. The pre-existing untracked `.cursor/`, `.devin/`, `.github/copilot-instructions.md`, `.grok/`, `.windsurf/`, and `dist/` paths remain untouched.
|
|
25
|
+
|
|
26
|
+
## 2. Repository and architecture map
|
|
27
|
+
|
|
28
|
+
Current Git and release state:
|
|
29
|
+
|
|
30
|
+
- `main`, `origin/main`, `HEAD`, and tag `v1.1.1` resolve to commit `0266444`.
|
|
31
|
+
- npm `latest` is `1.1.1`.
|
|
32
|
+
- The packed artifact SHA-1 matches the registry `dist.shasum`.
|
|
33
|
+
- The repository is public and has no GitHub Releases or active GitHub issues.
|
|
34
|
+
- Older `v1.5.0` and `v1.5.1` tags belong to an earlier package identity, while the current public package restarted at `1.0.0`. This leaves a confusing tag history.
|
|
35
|
+
|
|
36
|
+
Current architecture:
|
|
37
|
+
|
|
38
|
+
```mermaid
|
|
39
|
+
flowchart LR
|
|
40
|
+
CSS["CSS token files"] --> JSON["tokens.json and tokens.js"]
|
|
41
|
+
SEEDS["Element seeds"] --> PATCH["Partial element generator"]
|
|
42
|
+
PATCH --> JSON
|
|
43
|
+
PATCH --> DTCG["tokens.dtcg.json"]
|
|
44
|
+
DTCG --> NATIVE["Swift, Kotlin, and Dart mirrors"]
|
|
45
|
+
JSX["105 JSX modules"] --> INFER["Capitalized export discovery"]
|
|
46
|
+
INFER --> MANIFEST["_ds_manifest.json"]
|
|
47
|
+
INFER --> BUNDLE["_ds_bundle.js"]
|
|
48
|
+
MANIFEST --> REACT["_esm/react.mjs and react.d.ts"]
|
|
49
|
+
BUNDLE --> LEGACY["_esm/cs.mjs browser loader"]
|
|
50
|
+
CSS --> STYLES["styles.css with 24 imports"]
|
|
51
|
+
REACT --> NPM["@cyberskill/design"]
|
|
52
|
+
LEGACY --> NPM
|
|
53
|
+
STYLES --> NPM
|
|
54
|
+
NATIVE --> NPM
|
|
55
|
+
TEMPLATES["84 formal templates and 12 demos"] --> NPM
|
|
56
|
+
ASSETS["Fonts, images, docs, UI kits"] --> NPM
|
|
57
|
+
NPM --> CONSUMERS["Finance, SachViet, Landing Page, Strategem"]
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
The token arrows describe intended authority. The repository has no general generator that recreates JSON and DTCG from the CSS sources. Element generation patches existing mirrors, while native generation treats DTCG as authoritative.
|
|
61
|
+
|
|
62
|
+
The source graph contains 116 JS or JSX files, 263 imports, 157 internal edges, and 106 React edges. No source cycle was found.
|
|
63
|
+
|
|
64
|
+
The public package has one runtime boundary:
|
|
65
|
+
|
|
66
|
+
- Root and `/react`: raw React source through `_esm/react.mjs`.
|
|
67
|
+
- `/legacy`: browser-only loader through `_esm/cs.mjs`.
|
|
68
|
+
- `/styles.css`, `/tokens/*`, the bundle, and the manifest.
|
|
69
|
+
- Components, templates, assets, docs, and guidelines are packed but are not exposed through normal package subpaths.
|
|
70
|
+
|
|
71
|
+
## 3. Complete audited inventory
|
|
72
|
+
|
|
73
|
+
### Component source inventory
|
|
74
|
+
|
|
75
|
+
All 105 primary JSX modules have matching declaration, prompt, and Figma mapping files.
|
|
76
|
+
|
|
77
|
+
| Group | Count | Components |
|
|
78
|
+
|---|---:|---|
|
|
79
|
+
| AI | 8 | AIDisclosureBadge, ChatMessage, CitationList, ConfidenceMeter, HumanReviewGate, PromptInput, PromptSuggestions, TypingIndicator |
|
|
80
|
+
| Brand | 1 | LumiAvatar |
|
|
81
|
+
| Buttons | 3 | Button, ButtonGroup, FloatingActionButton |
|
|
82
|
+
| Data | 26 | Accordion, AspectRatio, Avatar, Card, Carousel, Chart, CodeBlock, Collapsible, Comment, DescriptionList, Divider, Image, Item, Kbd, List, Masonry, QRCode, ScrollArea, Sortable, Splitter, Stat, Terminal, Timeline, Tooltip, Tree, Watermark |
|
|
83
|
+
| Data tables | 3 | DataGrid, DataTable, TreeTable |
|
|
84
|
+
| Dialog | 1 | Dialog |
|
|
85
|
+
| Feedback | 10 | Alert, Badge, EmptyState, ProgressBar, Result, Skeleton, Spinner, StatusIndicator, Tag, Toast |
|
|
86
|
+
| Forms | 28 | Calendar, Cascader, Checkbox, ColorPicker, Combobox, DatePicker, Editor, FileUpload, Form, InlineEdit, InputGroup, InputOTP, Mentions, NativeSelect, NumberField, RadioGroup, Rating, SearchField, SegmentedControl, Select, Slider, Switch, TagInput, Textarea, TimePicker, Toggle, Transfer, TreeSelect |
|
|
87
|
+
| Icon | 1 | Icon |
|
|
88
|
+
| Logo | 1 | Logo |
|
|
89
|
+
| Navigation | 15 | Anchor, BackTop, Breadcrumb, CommandPalette, Dock, HotKeys, Link, Menu, Menubar, NavigationMenu, Pagination, Sidebar, Steps, Tabs, Toolbar |
|
|
90
|
+
| Overlays | 7 | AlertDialog, ContextMenu, Drawer, HoverCard, Popconfirm, Popover, Tour |
|
|
91
|
+
| Text field | 1 | TextField |
|
|
92
|
+
|
|
93
|
+
The 16 additional root exports are AvatarGroup, CardHeader, CardBody, CardFooter, ListItem, ToastStack, FormField, FormFieldArray, FormWizard, Radio, CS_ICONS, CS_LOGO_VIEWBOX, CS_LOGO_MARK_INNER, MenuItem, NavItem, and Tab.
|
|
94
|
+
|
|
95
|
+
### Other inventory
|
|
96
|
+
|
|
97
|
+
| Area | Inventory | Audit status |
|
|
98
|
+
|---|---|---|
|
|
99
|
+
| Component files | 445 files: 105 JSX, 105 declarations, 105 prompts, 105 Figma files, 20 component cards, 5 helpers | Static audit complete; full runtime certification remains open |
|
|
100
|
+
| Public exports | 121 names | Export membership and declaration surface audited |
|
|
101
|
+
| Templates | 84 `.dc.html` templates and 12 demo or email-safe pages | Static and whole-set gate coverage audited; legal content correctness was outside this technical audit |
|
|
102
|
+
| Storybook | 133 story files; every primary referenced; 29 FullMatrix stories reported by current gates | Structure audited; interaction depth is partial |
|
|
103
|
+
| Audit system | 112 files | Gate ownership, browser scope, assertions, and required-check status audited |
|
|
104
|
+
| Tokens | 18 files; 146 DTCG leaves; native Swift, Kotlin, and Dart mirrors | Authority, categories, generation, provenance, and coverage audited |
|
|
105
|
+
| CSS | 25 files; 3,455 declarations | Cascade, global scope, raw values, responsiveness, modes, and delivery audited |
|
|
106
|
+
| Icons | 28 registry names plus local SVG and Unicode glyphs | Registry and duplicate-use pattern audited |
|
|
107
|
+
| Fonts | 45 WOFF2 files, about 536 KB | Loading, script coverage, packaging, and license evidence audited |
|
|
108
|
+
| Images | 10 files; four aurora PNGs total about 5.7 MB | Size, delivery, and rights metadata audited |
|
|
109
|
+
| Docs | English and Vietnamese operational documents, Storybook docs, status pages, task records | Freshness, parity, release communication, and gaps audited |
|
|
110
|
+
| Build output | `_ds_bundle.js` 331,300 bytes; 116 modules; 121 public exports | Bundle graph and freshness checks audited |
|
|
111
|
+
| Package | 1,032 files; 10,685,208 compressed bytes; 18,008,525 unpacked bytes | Pack contents and registry integrity audited |
|
|
112
|
+
| Consumers | Finance, SachViet, Landing Page, Strategem | Dependency state and static usage audited |
|
|
113
|
+
| Live Figma state | Secrets, file access, and real node mappings unavailable | Open investigation |
|
|
114
|
+
| Manual assistive technology | No current evidence set | Open investigation |
|
|
115
|
+
| Organization-level GitHub security | Repository-visible settings inspected; organization policy unavailable | Open investigation |
|
|
116
|
+
|
|
117
|
+
The 84 formal template names are: app-shell, article, auth, bod-deck, bod-investor-update, bod-memo, bod-minutes, bod-report, bod-resolution, culture-event-invite, dashboard, delivery-change-note, delivery-kickoff, delivery-qbr-deck, delivery-runbook, delivery-status-email, doc-style-guide, doc-suite-index, doc-templates, email, finance-dunning-email, finance-expense-report, finance-invoice, finance-quote, hr-announcement, hr-interview-kit, hr-offboarding, hr-performance-review, hr-pip, legal-msa, legal-sow, marketing-campaign-brief, marketing-case-study, marketing-launch, marketing-newsletter, marketing-page, marketing-press-release, marketing-social-kit, sales-one-pager, sales-proposal-deck, settings, slide-deck, team-meeting-agenda, tech-incident-report, tech-release-notes, tech-retro, tech-rfc, and 37 `vn-*` employment, policy, privacy, compensation, governance, and contracting templates.
|
|
118
|
+
|
|
119
|
+
## 4. Findings register
|
|
120
|
+
|
|
121
|
+
All paths in this register are relative to `/Users/stephencheng/Projects/CyberSkill/design-system`.
|
|
122
|
+
|
|
123
|
+
Priority uses P0 for immediate containment, P1 for foundational work, P2 for planned remediation, and P3 for expansion. Effort is rough sizing.
|
|
124
|
+
|
|
125
|
+
### Security, release, governance, and metadata
|
|
126
|
+
|
|
127
|
+
#### CDS-SEC-001 - Editor accepts executable HTML
|
|
128
|
+
|
|
129
|
+
- Classification and scope: Confirmed implementation flaw with probable exploit exposure; Critical; P0; `components/forms/Editor.jsx:10-23`.
|
|
130
|
+
- Evidence and behavior: `defaultValue` is inserted through `dangerouslySetInnerHTML`; updates emit `innerHTML`; the component uses deprecated `document.execCommand`. Expected behavior is a defined trust boundary with sanitized or schema-based content. The root cause is using HTML as an unrestricted value model.
|
|
131
|
+
- Risk: Likelihood depends on consumer input; impact can be stored XSS; blast radius includes every product rendering remote or user-authored editor content; confidence is high. Edge cases include event attributes, SVG payloads, `javascript:` URLs, pasted markup, and Trusted Types. Related: CDS-SEC-002 and CDS-FORM-001.
|
|
132
|
+
- Remediation: Sanitize by default, add explicit trusted-content APIs, then replace the editor with a schema-based implementation. A containment-only alternative keeps raw HTML behind an `unsafeHtml` API; its tradeoff is continuing application-level trust work. Dependencies: CSP policy and migration guidance.
|
|
133
|
+
- Verification and delivery: Security payload suite, CSP, Trusted Types, paste, selection, and keyboard tests. Effort 4-8 engineer-weeks. Phase 1. Reference: Spectrum behavior separation and OWASP-compatible sanitation practice.
|
|
134
|
+
|
|
135
|
+
#### CDS-SEC-002 - Unsafe template execution shares the main host boundary
|
|
136
|
+
|
|
137
|
+
- Classification and scope: Confirmed configuration risk; High; P1; `vercel.json:56-57`, `templates/*/support.js:774,1148`.
|
|
138
|
+
- Evidence and behavior: Main-host CSP permits `unsafe-inline` and `unsafe-eval`; every copied template runtime uses `new Function`. Expected behavior is a strict public documentation origin and isolated compiler execution. The root cause is combining docs, previews, editable HTML, and compiler tools under one origin.
|
|
139
|
+
- Risk: Likelihood is medium; impact is script execution if untrusted content reaches the preview; blast radius is the public host; confidence is high. Related: CDS-SEC-001 and CDS-HOST-001.
|
|
140
|
+
- Remediation: Move template execution to a separate origin or sandboxed iframe and apply a strict CSP to Storybook. Replacing dynamic evaluation is an alternative, but it may require more compiler work. Dependencies: separate template product boundary.
|
|
141
|
+
- Verification and delivery: CSP report-only trial, injection fixtures, iframe sandbox checks, and cross-origin tests. Effort 1-2 engineer-months. Phases 1-2. Reference: browser CSP and Trusted Types guidance.
|
|
142
|
+
|
|
143
|
+
#### CDS-SEC-003 - Supply-chain controls are incomplete
|
|
144
|
+
|
|
145
|
+
- Classification and scope: Confirmed repository state with an open organization-policy question; Medium; P1; workflow files and `package-lock.json`.
|
|
146
|
+
- Evidence and behavior: Actions use mutable major tags, release installs `npm@latest`, and `npm audit` reports three high dev findings through `@figma/code-connect`, `minimatch`, and `brace-expansion`. No repository SBOM, dependency-review, CodeQL, or OpenSSF job exists. Production dependency audit is clean.
|
|
147
|
+
- Risk: Likelihood is medium; impact is CI or release compromise; blast radius includes published packages; confidence is high for repository-visible controls. Related: CDS-REL-001 and CDS-GOV-001.
|
|
148
|
+
- Remediation: Pin Actions by SHA, pin npm and Node, isolate Code Connect, add dependency review, SBOM, code scanning, and secret scanning. Removing Figma tooling is an alternative with design-integration cost.
|
|
149
|
+
- Verification and delivery: Reproducible workflow lock, SPDX output, dependency-review test PR, and organization-setting audit. Effort 3-6 engineer-weeks. Phases 1-2. References: [npm trusted publishing](https://docs.npmjs.com/trusted-publishers/), [SLSA 1.2](https://slsa.dev/spec/v1.2/), and [OpenSSF Scorecard](https://openssf.org/scorecard/).
|
|
150
|
+
|
|
151
|
+
#### CDS-REL-001 - Release automation can succeed without publishing
|
|
152
|
+
|
|
153
|
+
- Classification and scope: Confirmed process defect; High; P0; `.github/workflows/npm-publish.yml:12-41`, `_audit/ci/npm-publish.mjs:24-54,118-141`.
|
|
154
|
+
- Evidence and behavior: Any `v*` tag or manual dispatch can publish. Authentication, permission, not-found, and version-conflict errors can exit 0. The job does not bind tag, package version, protected-main ancestry, gate SHA, and registry digest.
|
|
155
|
+
- Risk: Likelihood is medium; impact is a green release with no valid artifact or an incorrect tag association; blast radius covers all consumers; confidence is high. Related: CDS-REL-003 and CDS-META-001.
|
|
156
|
+
- Remediation: Require `v${package.version}`, protected-main ancestry, exact-SHA gates, one packed tarball, post-publish integrity verification, and fail-closed errors. Keeping soft skips is acceptable only for optional Figma operations.
|
|
157
|
+
- Verification and delivery: Negative tests for wrong tags, auth errors, duplicate versions, failed gates, registry mismatch, and rollback. Effort 2-4 engineer-weeks. Phase 1. References: npm trusted publishing and SLSA.
|
|
158
|
+
|
|
159
|
+
#### CDS-REL-002 - Generated-token automation pushes directly to main
|
|
160
|
+
|
|
161
|
+
- Classification and scope: Confirmed governance defect; High; P0; `.github/workflows/design-system-gates.yml:252-325`.
|
|
162
|
+
- Evidence and behavior: The workflow grants `contents: write`, resets to the remote branch, commits generated files with `[skip ci]`, and pushes directly. A real protected-branch rejection already occurred.
|
|
163
|
+
- Risk: Likelihood is high; impact is bypassed or failed generation repair; blast radius includes token outputs and releases; confidence is high. Related: CDS-TOKEN-001 and CDS-GOV-001.
|
|
164
|
+
- Remediation: Keep pull-request parity checks read-only and fail-closed. Scheduled correction creates a bot PR or patch artifact. Allowing direct push with a bypass token is rejected because it weakens review and test traceability.
|
|
165
|
+
- Verification and delivery: Drift fixture, bot-PR path, normal required checks on generated output, and no write permission in PR jobs. Effort 1-2 weeks. Phase 1. Reference: Carbon and GitLab contribution controls.
|
|
166
|
+
|
|
167
|
+
#### CDS-REL-003 - Publish preparation omits release-grade checks
|
|
168
|
+
|
|
169
|
+
- Classification and scope: Confirmed process gap; High; P0; `package.json:65-94`.
|
|
170
|
+
- Evidence and behavior: `prepublishOnly` rebuilds the bundle and React entry and checks `DESIGN.md`; it does not compile declarations, run consumer tests, check lockfile version, run security checks, or execute full gates.
|
|
171
|
+
- Risk: Likelihood is high; impact is invalid packed output; blast radius covers every installation; confidence is high. Related: CDS-TYPE-001, CDS-QA-003, and CDS-REL-001.
|
|
172
|
+
- Remediation: Publish only a tarball already tested through type, package, browser, SSR, security, and integrity fixtures. Re-running repository tests during publish is an alternative, but testing the exact packed artifact is safer.
|
|
173
|
+
- Verification and delivery: Extracted-tarball suite and digest equality between test, publish, and registry. Effort 2-4 weeks. Phase 1. Reference: Primer and Ant release practice.
|
|
174
|
+
|
|
175
|
+
#### CDS-GOV-001 - Main protection does not enforce the available quality system
|
|
176
|
+
|
|
177
|
+
- Classification and scope: Confirmed GitHub state; High; P0.
|
|
178
|
+
- Evidence and behavior: GitHub protection requires only `fast-gates` and `docs-consistency-blocker`, with strict status checks. Required reviews, CODEOWNERS, signed commits, administrator enforcement, and conversation resolution are disabled. Representative merged PRs usually had no independent human review.
|
|
179
|
+
- Risk: Likelihood is high; impact is unreviewed API, security, or accessibility regression; blast radius is the full package; confidence is high. Related: CDS-QA-001 and CDS-GOV-002.
|
|
180
|
+
- Remediation: Require all release-significant checks, one independent approval, CODEOWNERS for high-risk areas, resolved conversations, and administrator enforcement. A lighter path may keep expensive suites scheduled but must retain type, API, unit, package, accessibility, and consumer gates on PRs.
|
|
181
|
+
- Verification and delivery: GitHub API snapshot asserted by a policy check. Effort 1-2 weeks. Phase 1. Reference: Carbon and Primer contribution governance.
|
|
182
|
+
|
|
183
|
+
#### CDS-GOV-002 - Public API and component lifecycle have no owner model
|
|
184
|
+
|
|
185
|
+
- Classification and scope: Confirmed operating-model gap; Medium; P1; `_ds_manifest.json`, docs, and repository settings.
|
|
186
|
+
- Evidence and behavior: Components have no owner, status, stability, deprecation, accessibility contract, or support metadata. The repository has no CODEOWNERS and no active issue intake.
|
|
187
|
+
- Risk: Likelihood is high; impact is accidental stability and unclear maintenance; blast radius covers all 121 exports; confidence is high. Related: CDS-API-001 and CDS-COV-001.
|
|
188
|
+
- Remediation: Add `experimental`, `beta`, `stable`, `deprecated`, and `removed` states with owner and entry criteria. Add RFC thresholds, review groups, intake SLAs, and incident ownership. An all-stable declaration is rejected because current evidence does not support it.
|
|
189
|
+
- Verification and delivery: Machine-readable registry, ownership coverage gate, and quarterly status review. Effort 1 engineer-month initially. Phases 0-2. Reference: Primer component status and Carbon contribution checklist.
|
|
190
|
+
|
|
191
|
+
#### CDS-META-001 - Version, lockfile, tag, and status metadata disagree
|
|
192
|
+
|
|
193
|
+
- Classification and scope: Confirmed metadata drift; Medium; P0; `package.json:3`, `package-lock.json:3,9`, `docs/status/data/status-feed.json`.
|
|
194
|
+
- Evidence and behavior: Package and `VERSION` are 1.1.1, while the lockfile root remains 1.0.0. Status data reports an older head and omits `v1.1.1`.
|
|
195
|
+
- Risk: Likelihood is high; impact is misleading release evidence and automation drift; blast radius includes maintainers and consumers; confidence is high. Related: CDS-REL-001 and CDS-DOC-001.
|
|
196
|
+
- Remediation: Gate every version input; inject commit, tag, and registry state at build time; publish a signed release manifest. Keeping self-referential Git data in tracked pages is rejected.
|
|
197
|
+
- Verification and delivery: Version parity, tag ancestry, manifest digest, and registry integrity tests. Effort 1-2 weeks. Phase 1. Reference: Ant and Spectrum release records.
|
|
198
|
+
|
|
199
|
+
#### CDS-LIC-001 - Public `UNLICENSED` distribution conflicts with the selected open-core model
|
|
200
|
+
|
|
201
|
+
- Classification and scope: Confirmed adoption barrier; Medium; P0 decision; `package.json:63` and `docs/consumer-grant.md`.
|
|
202
|
+
- Evidence and behavior: The public package is `UNLICENSED` and depends on a separate grant. Expected behavior under the selected model is an explicit open license for reusable packages and separate treatment of trademarks, corporate assets, and proprietary products.
|
|
203
|
+
- Risk: Likelihood is high; impact is blocked adoption and unclear rights; blast radius includes external consumers; confidence is high. Related: CDS-ASSET-001 and CDS-PKG-002.
|
|
204
|
+
- Remediation: Default to Apache-2.0 for reusable code and generic tokens, with CyberSkill trademarks, logos, photography, legal templates, and proprietary products excluded through an asset policy. MIT is simpler but lacks Apache's explicit patent grant. Legal review is a Phase 0 gate.
|
|
205
|
+
- Verification and delivery: Counsel-approved LICENSE, NOTICE, asset manifest, package metadata, and consumer terms. Effort 1-3 weeks plus legal review. Phases 0-1. Reference: open-source licensing practice in Material Web, Carbon, Primer, and Ant.
|
|
206
|
+
|
|
207
|
+
### Types, API, packaging, hosting, and performance
|
|
208
|
+
|
|
209
|
+
#### CDS-TYPE-001 - Published declarations fail strict compilation
|
|
210
|
+
|
|
211
|
+
- Classification and scope: Confirmed consumer failure; High; P0; `_esm/react.d.ts`, `components/data/Card.d.ts`, Collapsible, List, Alert, Toast, and 14 declaration files without React type imports.
|
|
212
|
+
- Evidence and behavior: TypeScript 6 and 7 exit 2. Native `title: string` conflicts with custom `ReactNode`; `JSX.IntrinsicElements` is unresolved; several files use `React.ReactElement` without imports. The current entry test never compiles declarations.
|
|
213
|
+
- Risk: Likelihood is high; impact is blocked strict TypeScript consumers; blast radius is the entire React entry; confidence is high. Related: CDS-TYPE-002 and CDS-QA-003.
|
|
214
|
+
- Remediation: Correct native extensions with `Omit`, use `React.JSX`, add pinned TypeScript and React types, and compile packed declarations with `skipLibCheck: false`. Generating declarations from TSX is the preferred long-term path.
|
|
215
|
+
- Verification and delivery: React 18 and 19 type fixtures under minimum and current TypeScript versions. Effort 2-4 weeks. Phase 1. Reference: Spectrum and Primer typed API practice.
|
|
216
|
+
|
|
217
|
+
#### CDS-TYPE-002 - Runtime locale props and declarations have drifted
|
|
218
|
+
|
|
219
|
+
- Classification and scope: Confirmed API mismatch; High; P1; 14 components including ConfidenceMeter, DataTable, FileUpload, Breadcrumb, CommandPalette, Pagination, and Drawer.
|
|
220
|
+
- Evidence and behavior: Runtime accepts `lang`, while declarations omit it. Expected behavior is one source for runtime and type contracts.
|
|
221
|
+
- Risk: Likelihood is high; impact is hidden supported behavior and consumer type errors; blast radius spans 14 exports; confidence is high. Related: CDS-I18N-001 and CDS-TYPE-001.
|
|
222
|
+
- Remediation: Generate declarations from typed source or one API schema. A declaration-diff script is an interim control.
|
|
223
|
+
- Verification and delivery: Property parity test for all 105 modules. Effort 1-2 weeks. Phases 1-2. Reference: Atlassian machine-enforced API controls.
|
|
224
|
+
|
|
225
|
+
#### CDS-TYPE-003 - Data components discard row inference
|
|
226
|
+
|
|
227
|
+
- Classification and scope: Confirmed typing weakness; Medium; P2; `components/datatable/DataGrid.d.ts` and `TreeTable.d.ts`.
|
|
228
|
+
- Evidence and behavior: Rows default to `any`, keys are strings, and exported functions are non-generic. Expected behavior is inferred row shape, typed accessors, and stable ID contracts.
|
|
229
|
+
- Risk: Likelihood is high; impact is bounded data-grid misuse; blast radius covers table consumers; confidence is high. Related: CDS-DATA-001.
|
|
230
|
+
- Remediation: Export generic component signatures and typed column accessors. A broad record type is simpler but retains runtime errors.
|
|
231
|
+
- Verification and delivery: Positive and negative type fixtures. Effort 2-4 weeks. Phase 3. Reference: Spectrum and Ant collection typing.
|
|
232
|
+
|
|
233
|
+
#### CDS-API-001 - Public membership is inferred from capitalized exports
|
|
234
|
+
|
|
235
|
+
- Classification and scope: Confirmed architectural weakness; Medium; P1; `scripts/build-bundle.mjs:35-37,188-205`, `scripts/generate-react-entry.mjs`.
|
|
236
|
+
- Evidence and behavior: Any uppercase named export found by the build becomes public. The manifest contains only name and source path. Expected behavior is deliberate public membership with status and package path.
|
|
237
|
+
- Risk: Likelihood is high; impact is accidental API expansion; blast radius covers versioning and migration; confidence is high. Related: CDS-GOV-002 and CDS-REL-003.
|
|
238
|
+
- Remediation: Create a machine-readable API registry and generate exports, types, manifest data, docs, and compatibility names from it. Hand-maintained barrels are an alternative with higher drift risk.
|
|
239
|
+
- Verification and delivery: API-diff gate with reviewed additions, removals, and signature changes. Effort 1-2 engineer-months. Phase 2. Reference: Primer status metadata and Atlassian API tooling.
|
|
240
|
+
|
|
241
|
+
#### CDS-API-002 - Ref and native-element composition are inconsistent
|
|
242
|
+
|
|
243
|
+
- Classification and scope: Confirmed systemic API gap; High; P1; all interactive components.
|
|
244
|
+
- Evidence and behavior: No component uses `forwardRef`; at least 58 modules do not forward rest props. Wrapper and control `className` targets vary. Some runtime props are broader than declarations.
|
|
245
|
+
- Risk: Likelihood is high; impact includes broken focus, form-library integration, ARIA extension, and trigger composition; blast radius spans most public components; confidence is high. Related: CDS-API-003 and CDS-A11Y-003.
|
|
246
|
+
- Remediation: Define rendered element, ref target, native prop inheritance, slots, `classNames`, `slotProps`, and polymorphism rules. A universal `as` prop is rejected because it weakens semantics.
|
|
247
|
+
- Verification and delivery: Type and runtime ref fixtures for every interactive component. Effort 2-3 engineer-months. Phases 2-3. Reference: Spectrum slot and behavior design.
|
|
248
|
+
|
|
249
|
+
#### CDS-API-003 - Controlled state and callbacks follow incompatible conventions
|
|
250
|
+
|
|
251
|
+
- Classification and scope: Confirmed systemic API gap; High; P1; Select, SearchField, NumberField, Toggle, DatePicker, PromptInput, Menu, Popover, and Form.
|
|
252
|
+
- Evidence and behavior: Some callbacks emit DOM events and others emit values. Some components use `value != null` as the controlled check and can become read-only without warning. Form guesses argument shapes.
|
|
253
|
+
- Risk: Likelihood is high; impact is stale state and integration errors; blast radius covers forms and overlays; confidence is high. Related: CDS-FORM-001.
|
|
254
|
+
- Remediation: Add `useControllableState`; keep native `onChange` events and use `onValueChange` for values. Provide aliases and a codemod. A forced breaking normalization would simplify internals but raise migration cost.
|
|
255
|
+
- Verification and delivery: Controlled, uncontrolled, switch-mode, Strict Mode, and stale-callback tests. Effort 1-2 engineer-months. Phases 2-3. Reference: Spectrum and React state conventions.
|
|
256
|
+
|
|
257
|
+
#### CDS-PKG-001 - React distribution ships source JSX
|
|
258
|
+
|
|
259
|
+
- Classification and scope: Confirmed distribution constraint; High; P1; `package.json:12-29`, `_esm/react.mjs:1-7`.
|
|
260
|
+
- Evidence and behavior: Direct Node import fails on `.jsx`; Next consumers must configure `transpilePackages`; all root imports parse 112 source inputs; no `"use client"` directives or per-component exports exist.
|
|
261
|
+
- Risk: Likelihood is high; impact is bundler and SSR incompatibility; blast radius covers all React consumers; confidence is high. Related: CDS-SUPPORT-001 and CDS-SSR-002.
|
|
262
|
+
- Remediation: Emit compiled ESM with preserved modules, source maps, declarations, client markers, per-component exports, and explicit CSS side effects. Keeping a raw-source expert entry is optional.
|
|
263
|
+
- Verification and delivery: Next App Router, Vite SSR, plain ESM, Webpack, and package-resolution fixtures. Effort 2-3 engineer-months. Phase 2. Reference: Spectrum subpath distribution and Primer packaging.
|
|
264
|
+
|
|
265
|
+
#### CDS-PKG-002 - The package is a runtime library and repository archive at once
|
|
266
|
+
|
|
267
|
+
- Classification and scope: Confirmed distribution cost; High; P1; `package.json:37-55`.
|
|
268
|
+
- Evidence and behavior: The tarball is 10.69 MB compressed and 18.01 MB unpacked. Templates account for about 9.01 MB and assets about 6.48 MB. Eighty-four copies of `support.js` are byte-identical and total about 5.58 MB.
|
|
269
|
+
- Risk: Likelihood is certain; impact is install, cache, audit, and ownership cost; blast radius covers every package consumer; confidence is high. Related: CDS-LIC-001 and CDS-ASSET-001.
|
|
270
|
+
- Remediation: Move templates and legal or brand assets to the selected separate products. Keep runtime packages small and deduplicate shared code. A separate template package is valid but was not selected.
|
|
271
|
+
- Verification and delivery: Tarball file-count and compressed-size budgets. Effort 1-2 engineer-months. Phases 2 and 5. Reference: Primer and Spectrum package separation.
|
|
272
|
+
|
|
273
|
+
#### CDS-PKG-003 - CSS delivery is an unbuilt 24-import manifest
|
|
274
|
+
|
|
275
|
+
- Classification and scope: Confirmed packaging gap; Medium; P1; `styles.css:1-40`, `package.json:69`.
|
|
276
|
+
- Evidence and behavior: Imported CSS totals about 157.7 KB before the manifest; publish has no CSS compile, minification, source map, or size gate.
|
|
277
|
+
- Risk: Likelihood is high; impact is request overhead and unpredictable processing; blast radius covers CSS consumers; confidence is high. Related: CDS-CSS-001 and CDS-PERF-001.
|
|
278
|
+
- Remediation: Build deterministic token, reset, component, utility, and compatibility entries with source maps. Publishing authoring CSS alone is simpler but retains request and cascade costs.
|
|
279
|
+
- Verification and delivery: Raw, gzip, Brotli, request-count, and source-map tests. Effort 1-2 engineer-months. Phase 2. Reference: GitLab and Ant generated CSS practice.
|
|
280
|
+
|
|
281
|
+
#### CDS-LEGACY-001 - Legacy loading can bind the wrong version or expose a partial API
|
|
282
|
+
|
|
283
|
+
- Classification and scope: Confirmed compatibility defect; High; P1; `_esm/cs.mjs:8-20`, `scripts/build-bundle.mjs:208-240`.
|
|
284
|
+
- Evidence and behavior: Existing scripts are not awaited, the first matching global is selected without version validation, and module initialization errors are collected while public assignment continues.
|
|
285
|
+
- Risk: Likelihood is medium; impact is cross-version or partial API failure; blast radius covers browser-only and microfrontend consumers; confidence is high. Related: CDS-PKG-001.
|
|
286
|
+
- Remediation: Bind exact namespace and version, share one load promise, fail on initialization errors, and split UI kits from the runtime. Removal is an alternative after usage data proves it unused.
|
|
287
|
+
- Verification and delivery: Two-version page, concurrent imports, CSP, offline, partial-module, and missing-export tests. Effort 1-2 engineer-months. Phases 2-3. Reference: versioned distribution lessons from Polaris and Lightning.
|
|
288
|
+
|
|
289
|
+
#### CDS-HOST-001 - Static deployment copies unknown workspace content
|
|
290
|
+
|
|
291
|
+
- Classification and scope: Confirmed host-packaging risk; High; P1; `scripts/vercel-static-output.mjs:12-54`.
|
|
292
|
+
- Evidence and behavior: A short denylist copies every other top-level path, including `.github`; a local untracked `dist/` can enter output. Vercel uses `npm install` while CI uses `npm ci`.
|
|
293
|
+
- Risk: Likelihood is medium; impact is unintended publication and non-reproducible deploys; blast radius is the public host; confidence is high. Related: CDS-SEC-002.
|
|
294
|
+
- Remediation: Build from a clean checkout with an explicit allowlist and output manifest. Expanding the denylist is rejected because unknown future paths remain unsafe.
|
|
295
|
+
- Verification and delivery: Clean-build file manifest, digest, and forbidden-path tests. Effort 1-2 weeks. Phase 1. Reference: SLSA artifact construction.
|
|
296
|
+
|
|
297
|
+
#### CDS-SUPPORT-001 - Runtime and browser support are implicit
|
|
298
|
+
|
|
299
|
+
- Classification and scope: Confirmed missing policy with probable compatibility risk; Medium; P1; `package.json`, workflows, CSS.
|
|
300
|
+
- Evidence and behavior: React 18 and 19 are peers; CI uses Node 22 and release uses Node 24; no engines, package-manager, TypeScript, framework, or browser matrix exists.
|
|
301
|
+
- Risk: Likelihood is high; impact is unplanned consumer breakage; blast radius covers all products; confidence is high for the missing contract. Related: CDS-PKG-001 and CDS-SSR-002.
|
|
302
|
+
- Remediation: Set Node 24 for tools, test React 18.3 and 19, support TypeScript 5.5 or later, emit ES2022 ESM, and support the latest two Chrome, Edge, Firefox, and Safari majors plus iOS Safari 17 or later. Revisit annually using consumer data.
|
|
303
|
+
- Verification and delivery: Matrix CI and documented fallback policy. Effort 3-6 weeks. Phases 0-2. Reference: React and browser compatibility guidance.
|
|
304
|
+
|
|
305
|
+
#### CDS-PERF-001 - Performance measurements have no release budgets
|
|
306
|
+
|
|
307
|
+
- Classification and scope: Confirmed process gap and opportunity; Medium; P2.
|
|
308
|
+
- Evidence and behavior: Button-only esbuild output is 3,731 minified bytes; full entry is 128,422 bytes; both parse 112 inputs. Legacy is 331.3 KB before minification; CSS is about 159 KB raw; the tarball is 10.69 MB.
|
|
309
|
+
- Risk: Likelihood is high; impact is gradual regression; blast radius varies by consumer path; confidence is high. Related: CDS-PKG-001 through CDS-PKG-003.
|
|
310
|
+
- Remediation: Track marginal component gzip, full React gzip, CSS gzip, fonts, legacy, file count, and tarball size. A single repository-total budget is rejected because it hides consumer cost.
|
|
311
|
+
- Verification and delivery: PR size reports and ratcheted limits with reviewed exceptions. Effort 3-6 weeks. Phases 2 and 6. Reference: Material bundle-size reporting and Primer package checks.
|
|
312
|
+
|
|
313
|
+
### Tokens, themes, CSS, responsiveness, and content
|
|
314
|
+
|
|
315
|
+
#### CDS-TOKEN-001 - Token authority is split across several mirrors
|
|
316
|
+
|
|
317
|
+
- Classification and scope: Confirmed architectural risk; High; P1; `tokens/tokens.dtcg.json`, `tokens/tokens.json`, `tokens/tokens.js`, CSS files, and `element-seeds.json`.
|
|
318
|
+
- Evidence and behavior: File headers imply CSS-to-JSON authority, native generation treats DTCG as source, and element generation patches existing mirrors. Current hashes match, but no full regeneration path exists.
|
|
319
|
+
- Risk: Likelihood is medium; impact is silent cross-platform drift; blast radius includes web, native, Figma, and docs; confidence is high. Related: CDS-REL-002.
|
|
320
|
+
- Remediation: Make DTCG 2025.10 the canonical source and generate every mirror without reading previous outputs. A typed TypeScript source is viable but adds an extra exchange conversion.
|
|
321
|
+
- Verification and delivery: Clean-room generation, graph-cycle checks, deterministic hashes, and release-tag parity. Effort 2-3 engineer-months. Phase 2. Reference: [DTCG 2025.10](https://www.designtokens.org/tr/2025.10/) and GitLab token authoring.
|
|
322
|
+
|
|
323
|
+
#### CDS-TOKEN-002 - Component and state token coverage is shallow
|
|
324
|
+
|
|
325
|
+
- Classification and scope: Confirmed maturity gap; High; P2; `tokens/component-tokens.css:1-46` and all CSS.
|
|
326
|
+
- Evidence and behavior: DTCG has 146 leaves, but component tokens cover mainly Button and TextField. Static CSS analysis found 378 raw-color declarations and 675 raw-dimension declarations without a CyberSkill variable.
|
|
327
|
+
- Risk: Likelihood is high; impact is inconsistent modes and fragile customization; blast radius covers all components; confidence is high. Related: CDS-THEME-001 and CDS-CSS-001.
|
|
328
|
+
- Remediation: Define reference, semantic, component, state, and motion tiers; generate typed contracts; add deprecation metadata and literal linting. Tokenizing every local value is rejected; only stable design decisions become tokens.
|
|
329
|
+
- Verification and delivery: Orphan, duplicate, cycle, alias, mode, contrast, and override tests. Effort 2-3 engineer-months. Phases 2-4. Reference: Carbon, Spectrum, Atlassian, Primer, GitLab, and Ant.
|
|
330
|
+
|
|
331
|
+
#### CDS-THEME-001 - System dark mode leaves component states in light colors
|
|
332
|
+
|
|
333
|
+
- Classification and scope: Confirmed visual and accessibility defect; High; P0; `tokens/colors.css:59-76` and several `base/*.css` files.
|
|
334
|
+
- Evidence and behavior: Dark component overrides target `[data-theme="dark"]` but omit system-resolved dark mode. A secondary button can produce about 1.23:1 contrast.
|
|
335
|
+
- Risk: Likelihood is high for system-theme users; impact is unreadable controls; blast radius covers many components; confidence is high. Related: CDS-A11Y-001 and CDS-TOKEN-002.
|
|
336
|
+
- Remediation: Resolve modes through semantic variables rather than duplicating component selectors. Generating paired selectors is a short-term patch.
|
|
337
|
+
- Verification and delivery: Computed styles, contrast, screenshots, and component-state matrix under light, dark, and system. Effort 2-4 weeks. Phase 1. Reference: Fluent and Primer contrast-mode systems.
|
|
338
|
+
|
|
339
|
+
#### CDS-THEME-002 - Corporate identity, element themes, and future brands are coupled
|
|
340
|
+
|
|
341
|
+
- Classification and scope: Confirmed scaling constraint and strategic opportunity; High; P2; `tokens/colors.css`, Logo, assets, and element packs.
|
|
342
|
+
- Evidence and behavior: Fixed Umber and Ochre values and Ngu Hanh element themes feed component states directly. There is no independent brand, density, contrast, or motion axis.
|
|
343
|
+
- Risk: Likelihood is high if white-label products are added; impact is forks and inaccessible custom themes; blast radius covers future products; confidence is high. Related: CDS-LIC-001 and CDS-TOKEN-002.
|
|
344
|
+
- Remediation: Introduce orthogonal brand, color-mode, contrast, density, and motion contracts. Keep locale and direction as content context. Provide validated theme packages and retain CyberSkill as the default.
|
|
345
|
+
- Verification and delivery: Alternate-brand fixtures, nested scopes, contrast validation, SSR, missing-token fallback, and combination testing. Effort 2-3 engineer-months. Phases 3-4. Reference: Fluent, Primer, Atlassian, and Ant.
|
|
346
|
+
|
|
347
|
+
#### CDS-CSS-001 - The primary stylesheet modifies the whole host document
|
|
348
|
+
|
|
349
|
+
- Classification and scope: Confirmed integration defect; High; P1; `base/reset.css`, `tokens/colors.css`, `base/responsive.css`, and `base/a11y.css`.
|
|
350
|
+
- Evidence and behavior: Global rules change body, headings, anchors, media, `main`, inline grids, focus, and motion. There are no cascade layers or package root scope.
|
|
351
|
+
- Risk: Likelihood is high; impact is CSS collision and microfrontend breakage; blast radius is the host page; confidence is high. Related: CDS-PKG-003 and CDS-RESP-001.
|
|
352
|
+
- Remediation: Publish tokens, optional reset, component CSS, utilities, and a deprecated compatibility entry. Use named layers and `[data-cs-root]` where scoping is required. Shadow DOM is rejected for the main React package because it complicates forms, theming, and composition.
|
|
353
|
+
- Verification and delivery: Host-isolation fixtures with Tailwind, CSS Modules, another design system, Shadow DOM, and two package versions. Effort 1-2 engineer-months. Phase 2. Reference: GitLab and Primer CSS organization.
|
|
354
|
+
|
|
355
|
+
#### CDS-RESP-001 - Responsive rules depend on serialized inline style text
|
|
356
|
+
|
|
357
|
+
- Classification and scope: Confirmed architectural defect; High; P2; `base/responsive.css:58-91,124-127`.
|
|
358
|
+
- Evidence and behavior: Selectors match substrings such as `style*="grid-template-columns: repeat(3"`, then apply `!important`. Output depends on serializer formatting.
|
|
359
|
+
- Risk: Likelihood is high; impact is missed or incorrect responsive behavior; blast radius includes templates and generated markup; confidence is high. Related: CDS-CSS-001.
|
|
360
|
+
- Remediation: Replace serialization selectors with generated layout classes and container-query component APIs. Retain old selectors only in compatibility CSS.
|
|
361
|
+
- Verification and delivery: Vite, SSR, minified, custom-renderer, zoom, viewport, and nested-container fixtures. Effort 1-2 engineer-months. Phase 3. Reference: Material adaptive layouts and Primer responsiveness.
|
|
362
|
+
|
|
363
|
+
#### CDS-RESP-002 - Breakpoint tokens do not drive actual media queries
|
|
364
|
+
|
|
365
|
+
- Classification and scope: Confirmed consistency gap; Medium; P2; `tokens/spacing.css:24-30` and `base/responsive.css`.
|
|
366
|
+
- Evidence and behavior: Published breakpoint values are 640, 768, 1024, 1280, and 1536 pixels, while shipped rules use 460, 600, 620, 760, 900, and 1120 pixels.
|
|
367
|
+
- Risk: Likelihood is high; impact is documentation and implementation mismatch; blast radius covers responsive consumers; confidence is high.
|
|
368
|
+
- Remediation: Generate media and container rules from one source. CSS breakpoint variables may remain descriptive but must not imply runtime control.
|
|
369
|
+
- Verification and delivery: Source-to-output breakpoint parity and screenshot matrix. Effort 2-4 weeks. Phase 3. Reference: Material and Ant grid systems.
|
|
370
|
+
|
|
371
|
+
#### CDS-CONTENT-001 - Fixed layouts fail long content, zoom, and constrained containers
|
|
372
|
+
|
|
373
|
+
- Classification and scope: Confirmed probable runtime failure; High; P2; Tooltip, Combobox, InputGroup, navigation panels, ColorPicker, HotKeys, Cascader, and Transfer CSS.
|
|
374
|
+
- Evidence and behavior: Fixed minimums, fixed panels, and no container queries or safe-area rules are common. Tooltip forces one line.
|
|
375
|
+
- Risk: Likelihood is high under translation or zoom; impact is clipped or unreachable content; blast radius includes forms and overlays; confidence is high. Related: CDS-I18N-001 and CDS-RESP-001.
|
|
376
|
+
- Remediation: Use content-driven sizing, wrapping, viewport clamps, container queries, logical safe-area spacing, and per-component overflow contracts.
|
|
377
|
+
- Verification and delivery: 200 and 400 percent zoom, text-spacing overrides, 320-pixel containers, long Vietnamese, German, CJK, RTL, URLs, and errors. Effort 1-2 engineer-months. Phase 3. Reference: WCAG 2.2 reflow and text spacing.
|
|
378
|
+
|
|
379
|
+
### Interaction, accessibility, localization, forms, and component reliability
|
|
380
|
+
|
|
381
|
+
#### CDS-ARCH-001 - There is no shared overlay, focus, or layer system
|
|
382
|
+
|
|
383
|
+
- Classification and scope: Confirmed systemic gap; High; P1; Dialog, AlertDialog, Drawer, CommandPalette, Image, Tour, Popconfirm, HoverCard, and Popover.
|
|
384
|
+
- Evidence and behavior: Components duplicate document listeners, traps, scroll locks, and restoration. No portal, stack, inert manager, shared positioning, or reference-counted lock exists.
|
|
385
|
+
- Risk: Likelihood is high; impact is clipped layers, wrong focus, double close, and unlocked scroll; blast radius covers every overlay consumer; confidence is high. Related: CDS-A11Y-003 and CDS-RUNTIME-001.
|
|
386
|
+
- Remediation: Build a portal-based layer provider with stack ordering, focus scope, inert background, dismissal, restoration, scroll lock, and Floating UI positioning. A fully custom positioning engine is rejected.
|
|
387
|
+
- Verification and delivery: Nested overlays, Escape ordering, outside click, animation unmount, transformed ancestors, RTL, zoom, and mobile viewport. Effort 2-3 engineer-months. Phases 2-3. Reference: Spectrum and React Aria behavior separation.
|
|
388
|
+
|
|
389
|
+
#### CDS-A11Y-001 - High contrast and system dark resolve to an invalid combination
|
|
390
|
+
|
|
391
|
+
- Classification and scope: Confirmed accessibility defect; High; P0; `base/a11y.css:54-57`.
|
|
392
|
+
- Evidence and behavior: High-contrast root values override system-dark tokens, while only explicit dark receives correction. Muted text can fall near 2.10:1.
|
|
393
|
+
- Risk: Likelihood is medium; impact is unreadable content for contrast-preference users; blast radius covers the themed page; confidence is high. Related: CDS-THEME-001.
|
|
394
|
+
- Remediation: Generate contrast values for every resolved mode and test combined preferences.
|
|
395
|
+
- Verification and delivery: `prefers-contrast: more`, system dark, forced-colors, screenshots, and computed contrast. Effort under 1 week. Phase 1. Reference: [WCAG 2.2](https://www.w3.org/TR/WCAG22/) and Fluent high-contrast modes.
|
|
396
|
+
|
|
397
|
+
#### CDS-A11Y-002 - FileUpload is pointer-only and claims validation it does not perform
|
|
398
|
+
|
|
399
|
+
- Classification and scope: Confirmed accessibility and reliability defect; High; P0; `components/forms/FileUpload.jsx:14-27`, strings file.
|
|
400
|
+
- Evidence and behavior: The input uses `display:none`, the visual dropzone is not keyboard-focusable, and text promises type and 10 MB limits that are not enforced for selection or drop.
|
|
401
|
+
- Risk: Likelihood is high; impact is keyboard exclusion and invalid uploads; blast radius covers file workflows; confidence is high.
|
|
402
|
+
- Remediation: Use a focusable input or button, shared validation, size and count limits, errors, disabled state, announcements, progress, cancellation, and retry.
|
|
403
|
+
- Verification and delivery: Keyboard, screen reader, invalid type, oversized file, mixed batch, drag-leave, and disabled-drop tests. Effort 2-3 engineer-weeks. Phase 1. Reference: WCAG 2.1.1, 3.3.1, and native file-input guidance.
|
|
404
|
+
|
|
405
|
+
#### CDS-A11Y-003 - Complex widgets declare patterns without their keyboard model
|
|
406
|
+
|
|
407
|
+
- Classification and scope: Confirmed systemic accessibility defect; High; P1; Tree, Menu, Menubar, Calendar, Rating, Tabs, SegmentedControl, Tooltip, CommandPalette, ContextMenu, Cascader, TreeSelect, DatePicker, Mentions, and ColorPicker.
|
|
408
|
+
- Evidence and behavior: Missing behavior includes roving focus, arrow keys, Home and End, typeahead, panel relationships, active-descendant state, focus restoration, and listbox or grid semantics.
|
|
409
|
+
- Risk: Likelihood is high; impact is keyboard and screen-reader exclusion; blast radius covers many core workflows; confidence is high. Related: CDS-ARCH-001 and CDS-QA-002.
|
|
410
|
+
- Remediation: Use native elements where possible, React Aria behavior primitives for complex widgets, and a CyberSkill style and state layer. Copying ARIA roles without behavior is rejected.
|
|
411
|
+
- Verification and delivery: Key-by-key interaction suites and manual VoiceOver, NVDA, TalkBack, and keyboard testing. Effort 3-5 engineer-months. Phases 2-4. References: [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria/) and [ARIA APG](https://www.w3.org/WAI/ARIA/apg/about/introduction/).
|
|
412
|
+
|
|
413
|
+
#### CDS-A11Y-004 - Target size and focus presentation policies are inconsistent
|
|
414
|
+
|
|
415
|
+
- Classification and scope: Confirmed systemic gap; High; P2; `base/a11y.css`, reset, controls, feedback, Splitter, and Editor.
|
|
416
|
+
- Evidence and behavior: A stated 44-pixel policy still permits 18, 32, 36, and 40-pixel targets. Focus recipes vary between 2 and 3 pixels and differ under forced colors.
|
|
417
|
+
- Risk: Likelihood is high; impact is motor and low-vision difficulty; blast radius covers interactive components; confidence is high.
|
|
418
|
+
- Remediation: Add hit-area primitives and one focus token contract with forced-colors behavior. Visual glyph size remains independent from pointer target.
|
|
419
|
+
- Verification and delivery: Computed hit-box scan, pointer-spacing checks, keyboard snapshots, and Windows High Contrast. Effort 1-2 engineer-months. Phase 3. Reference: WCAG 2.4.7, 2.4.11, and 2.5.8.
|
|
420
|
+
|
|
421
|
+
#### CDS-A11Y-005 - Image preview and Carousel create hidden-focus risks
|
|
422
|
+
|
|
423
|
+
- Classification and scope: Confirmed component defects; High; P2; `components/data/Image.jsx:18-34`, `Carousel.jsx:14-17`.
|
|
424
|
+
- Evidence and behavior: Image uses a non-focusable span as a button and an unmanaged lightbox. Inactive carousel slides are `aria-hidden` while descendants may remain focusable. Empty carousel behavior is invalid.
|
|
425
|
+
- Risk: Likelihood is high; impact is hidden keyboard focus and inaccessible preview; blast radius is bounded to two components; confidence is high.
|
|
426
|
+
- Remediation: Use a native trigger and shared Dialog; make inactive slides inert or unmount them; guard empty state and compose callbacks.
|
|
427
|
+
- Verification and delivery: Keyboard traversal, cached and failed images, source replacement, nested links, empty slides, restoration, and screen reader order. Effort 3-5 weeks. Phase 3. Reference: WCAG focus order and hidden-content rules.
|
|
428
|
+
|
|
429
|
+
#### CDS-A11Y-006 - Sortable has no keyboard or touch reorder path
|
|
430
|
+
|
|
431
|
+
- Classification and scope: Confirmed accessibility defect; High; P2; `components/data/Sortable.jsx:18-27`.
|
|
432
|
+
- Evidence and behavior: Reordering depends on HTML5 desktop drag events.
|
|
433
|
+
- Risk: Likelihood is certain for keyboard and touch users; impact is complete exclusion from reordering; blast radius is the Sortable component; confidence is high.
|
|
434
|
+
- Remediation: Add a focusable drag handle, keyboard move model, pointer or touch sensor, instructions, announcements, cancel, and stable DOM order.
|
|
435
|
+
- Verification and delivery: Keyboard, touch, cancellation, scrolling, announcements, and order tests. Effort 3-4 weeks. Phase 3. Reference: WCAG 2.5.7 and Spectrum drag-and-drop behavior.
|
|
436
|
+
|
|
437
|
+
#### CDS-A11Y-007 - Native semantics contain button, list, and accessible-name defects
|
|
438
|
+
|
|
439
|
+
- Classification and scope: Confirmed component defects; High; P2; Card, NavItem, ListItem, Avatar, and LumiAvatar.
|
|
440
|
+
- Evidence and behavior: Some buttons omit `type="button"`; ListItem renders `button role="listitem"`; avatar fallbacks lack an outer accessible name.
|
|
441
|
+
- Risk: Likelihood is high; impact includes accidental form submission and lost roles or names; blast radius is bounded but common; confidence is high.
|
|
442
|
+
- Remediation: Add semantic primitives and safe native defaults. Structural list roles contain controls rather than replacing their roles.
|
|
443
|
+
- Verification and delivery: Ancestor-form, accessibility-tree, and name tests. Effort 2-4 weeks. Phase 3. Reference: WCAG 4.1.2 and native HTML guidance.
|
|
444
|
+
|
|
445
|
+
#### CDS-I18N-001 - Locale, language, currency, and region are conflated
|
|
446
|
+
|
|
447
|
+
- Classification and scope: Confirmed architecture defect; High; P1; `components/_i18n/i18n.js:9-55`.
|
|
448
|
+
- Evidence and behavior: All non-Vietnamese locales become English; English uses USD and Vietnamese uses VND; only 46 message sections exist for 105 modules; hardcoded text remains.
|
|
449
|
+
- Risk: Likelihood is high for global use; impact is incorrect language or financial display; blast radius covers localized components; confidence is high. Related: CDS-TYPE-002 and CDS-CONTENT-001.
|
|
450
|
+
- Remediation: Add an i18n provider with BCP 47 locale, direction, catalog, time zone, currency, and formatter options. Use ECMA-402 and CLDR. Keep Vietnamese and English built in while allowing external catalogs.
|
|
451
|
+
- Verification and delivery: Regional variants, unsupported locales, plural forms, currency independence, runtime changes, SSR, and missing keys. Effort 2-3 engineer-months. Phases 2-4. References: [ECMA-402](https://tc39.es/ecma402/) and [Unicode CLDR](https://unicode.org/reports/tr35/).
|
|
452
|
+
|
|
453
|
+
#### CDS-I18N-002 - RTL behavior is absent
|
|
454
|
+
|
|
455
|
+
- Classification and scope: Confirmed platform gap; High; P1; all component and CSS sources.
|
|
456
|
+
- Evidence and behavior: No `dir`, RTL selector, direction provider, icon-mirror metadata, or direction-specific key policy exists.
|
|
457
|
+
- Risk: Likelihood is certain for Arabic or Hebrew; impact is incorrect layout and interaction; blast radius spans the library; confidence is high.
|
|
458
|
+
- Remediation: Add direction context, logical APIs, marked icon mirroring, direction-aware key behavior, and bidi-isolation guidance.
|
|
459
|
+
- Verification and delivery: Arabic and Hebrew screenshots, mixed identifiers, nested direction changes, keyboard tests, and logical-motion checks. Effort 1-2 engineer-months. Phases 2-4. Reference: HTML direction and CSS logical-property standards.
|
|
460
|
+
|
|
461
|
+
#### CDS-I18N-003 - IME composition can trigger commands early
|
|
462
|
+
|
|
463
|
+
- Classification and scope: Confirmed input defect; High; P1; PromptInput, TagInput, InlineEdit, and similar Enter-key handlers.
|
|
464
|
+
- Evidence and behavior: No component checks composition state, `isComposing`, or key code 229.
|
|
465
|
+
- Risk: Likelihood is high for Vietnamese and CJK IMEs; impact is premature submit or commit; blast radius covers text-command surfaces; confidence is high.
|
|
466
|
+
- Remediation: Add one composition-safe key helper and apply it to every text command surface.
|
|
467
|
+
- Verification and delivery: Composition start, update, and end sequences for Vietnamese, Japanese, Chinese, and Korean input. Effort under 1 week. Phase 1. Reference: browser composition-event guidance.
|
|
468
|
+
|
|
469
|
+
#### CDS-I18N-004 - Mention parsing rejects international names
|
|
470
|
+
|
|
471
|
+
- Classification and scope: Confirmed localization and accessibility defect; High; P2; `components/forms/Mentions.jsx:14-20`.
|
|
472
|
+
- Evidence and behavior: Parsing uses ASCII-oriented `\w`; matching uses basic lowercase; popup semantics and keyboard selection are incomplete.
|
|
473
|
+
- Risk: Likelihood is high for non-English names; impact is failed identity entry; blast radius is Mentions consumers; confidence is high.
|
|
474
|
+
- Remediation: Define identifier policy, use Unicode parsing, apply locale-aware matching, and implement a combobox pattern.
|
|
475
|
+
- Verification and delivery: Vietnamese diacritics, CJK, Arabic, combining marks, emoji policy, IME, and arrow selection. Effort 2-3 weeks. Phase 3. References: Unicode and ARIA combobox guidance.
|
|
476
|
+
|
|
477
|
+
#### CDS-I18N-005 - Font policy does not cover planned global scripts
|
|
478
|
+
|
|
479
|
+
- Classification and scope: Confirmed future constraint; Medium; P3; `tokens/fonts.css`.
|
|
480
|
+
- Evidence and behavior: UI and display faces cover Vietnamese and Latin extensions; no defined Arabic, Hebrew, CJK, Thai, or Indic UI fallback policy exists.
|
|
481
|
+
- Risk: Likelihood is high under global expansion; impact is missing glyphs and layout shift; blast radius is locale-dependent; confidence is high.
|
|
482
|
+
- Remediation: Define per-script fallback stacks and metric adjustments before adding shipped fonts. Shipping every script font is rejected because of package cost.
|
|
483
|
+
- Verification and delivery: Script specimen pages, fallback loading, truncation, line-height, and layout-shift measurement. Effort 3-6 weeks. Phase 4. Reference: Unicode and web-font metrics guidance.
|
|
484
|
+
|
|
485
|
+
#### CDS-FORM-001 - Form submission and field semantics are unsafe for production workflows
|
|
486
|
+
|
|
487
|
+
- Classification and scope: Confirmed reliability and security defects; High; P1; `components/forms/Form.jsx:25-41,98-155,261-269`.
|
|
488
|
+
- Evidence and behavior: Async `onSubmit` is not awaited; repeated FormData names are overwritten; field errors and hints lack stable relationships; required state is not propagated; unsafe path names such as `__proto__` are accepted.
|
|
489
|
+
- Risk: Likelihood is high; impact includes double submit, lost values, unhandled rejection, inaccessible errors, and prototype mutation; blast radius covers form consumers; confidence is high.
|
|
490
|
+
- Remediation: Define async submission, cancellation, repeated values, safe paths, field IDs, errors, summary focus, and validation ownership. Integrating a third-party form engine is optional but must preserve public contracts.
|
|
491
|
+
- Verification and delivery: Rapid submit, async reject, repeated fields, files, groups, stale validation, arrays, malicious paths, and screen-reader flow. Effort 1-2 engineer-months. Phases 1-3. Reference: WCAG input assistance and native FormData behavior.
|
|
492
|
+
|
|
493
|
+
#### CDS-DATA-001 - DataGrid virtualization and local-data behavior are under-specified
|
|
494
|
+
|
|
495
|
+
- Classification and scope: Confirmed algorithmic risk; High; P2; `components/datatable/DataGrid.jsx:34-142`.
|
|
496
|
+
- Evidence and behavior: Virtualization assumes fixed row height and auto-enables at 80 rows; wrapped content breaks spacer math; selection-all replaces state with filtered keys; sorting and filtering are not locale-aware; pin labels are hardcoded English.
|
|
497
|
+
- Risk: Likelihood is high with real data; impact is missing rows, wrong selection, and inaccessible content; blast radius covers data-heavy products; confidence is high.
|
|
498
|
+
- Remediation: Make fixed-row mode explicit or measure rows, validate dimensions, define selection policy, use typed accessors, and expose locale-aware operations. A full third-party grid is an option for product-specific advanced needs.
|
|
499
|
+
- Verification and delivery: 10,000 rows, dynamic height, images, invalid dimensions, filtered selection, persisted columns, locale sort, and assistive table use. Effort 1-2 engineer-months. Phase 3. Reference: Spectrum TableView and Ant Table patterns.
|
|
500
|
+
|
|
501
|
+
#### CDS-DATE-001 - Calendar and DatePicker lack a locale-safe date model
|
|
502
|
+
|
|
503
|
+
- Classification and scope: Confirmed architectural weakness; High; P2; `components/forms/Calendar.jsx`, DatePicker.
|
|
504
|
+
- Evidence and behavior: Monday is fixed as week start; view state does not reliably follow controlled value changes; JavaScript Date mixes calendar date, time zone, and instant; grid keyboard semantics are incomplete.
|
|
505
|
+
- Risk: Likelihood is high; impact is wrong dates or keyboard exclusion; blast radius covers scheduling flows; confidence is high.
|
|
506
|
+
- Remediation: Introduce a plain-date adapter, configurable calendar and week conventions, controlled view state, and APG grid behavior.
|
|
507
|
+
- Verification and delivery: DST, time-zone boundaries, external value changes, locale week starts, non-Gregorian policy, keyboard, and screen-reader labels. Effort 1-2 engineer-months. Phase 3. Reference: Spectrum date architecture and ECMA-402.
|
|
508
|
+
|
|
509
|
+
#### CDS-SSR-001 - Tour reads browser globals during render
|
|
510
|
+
|
|
511
|
+
- Classification and scope: Confirmed SSR failure; High; P0; `components/overlays/Tour.jsx:14,26-27`.
|
|
512
|
+
- Evidence and behavior: Open render reads `window.innerHeight` and `window.innerWidth`; invalid selectors may throw.
|
|
513
|
+
- Risk: Likelihood is high in SSR; impact is render failure; blast radius is Tour consumers; confidence is high.
|
|
514
|
+
- Remediation: Defer measurement to an isomorphic effect, guard selectors, observe target changes, and migrate to the shared overlay layer.
|
|
515
|
+
- Verification and delivery: SSR open state, hydration, missing target, invalid selector, resize, zoom, nested scroll, and target removal. Effort 1-2 weeks. Phase 1. Reference: React SSR guidance.
|
|
516
|
+
|
|
517
|
+
#### CDS-SSR-002 - IDs and persisted state can mismatch hydration
|
|
518
|
+
|
|
519
|
+
- Classification and scope: Confirmed SSR risk; High; P2; Combobox and DataGrid.
|
|
520
|
+
- Evidence and behavior: Combobox uses a module-level counter; DataGrid reads localStorage during state initialization, allowing server and first-client output to differ.
|
|
521
|
+
- Risk: Likelihood is medium; impact is hydration warning or reordered content; blast radius covers SSR products; confidence is high.
|
|
522
|
+
- Remediation: Use `useId` and load persistence after hydration or through an external store with a stable server snapshot.
|
|
523
|
+
- Verification and delivery: Concurrent requests, multiple roots, streaming, reordered trees, saved state, and hydration-warning assertions. Effort 1-2 weeks. Phase 2. Reference: [React useId](https://react.dev/reference/react/useId).
|
|
524
|
+
|
|
525
|
+
#### CDS-COMP-001 - TimePicker can enter an infinite render loop
|
|
526
|
+
|
|
527
|
+
- Classification and scope: Confirmed correctness defect; High; P0; `components/forms/TimePicker.jsx:7-13`.
|
|
528
|
+
- Evidence and behavior: Caller `step` controls a render-time loop; zero or negative values never terminate.
|
|
529
|
+
- Risk: Likelihood is medium; impact is page hang; blast radius is TimePicker consumers; confidence is high.
|
|
530
|
+
- Remediation: Require bounded finite positive integers, use a safe fallback, and cap option count.
|
|
531
|
+
- Verification and delivery: Zero, negative, NaN, Infinity, fraction, and values above a day in SSR and client renders. Effort under 1 week. Phase 1.
|
|
532
|
+
|
|
533
|
+
#### CDS-COMP-002 - Toolbar overflow can remove actions
|
|
534
|
+
|
|
535
|
+
- Classification and scope: Confirmed correctness defect; High; P0; `components/navigation/Toolbar.jsx:11-12`.
|
|
536
|
+
- Evidence and behavior: The component slices before removing separators, then slices a different array for overflow. Valid actions can disappear.
|
|
537
|
+
- Risk: Likelihood is medium; impact is lost commands; blast radius is Toolbar consumers; confidence is high.
|
|
538
|
+
- Remediation: Partition once and normalize separators inside each partition.
|
|
539
|
+
- Verification and delivery: Separator boundaries, empty input, and out-of-range cut tests. Effort under 1 week. Phase 1.
|
|
540
|
+
|
|
541
|
+
#### CDS-COMP-003 - Progress and confidence visuals disagree with assistive values
|
|
542
|
+
|
|
543
|
+
- Classification and scope: Confirmed correctness and AI-safety defect; High; P0; ProgressBar and ConfidenceMeter.
|
|
544
|
+
- Evidence and behavior: Visual width is clamped while `aria-valuenow` is not; invalid maximums create bad math; zero confidence still fills a segment; unknown levels can throw.
|
|
545
|
+
- Risk: Likelihood is medium; impact is misleading state, including AI confidence overstatement; blast radius covers feedback and AI surfaces; confidence is high.
|
|
546
|
+
- Remediation: Normalize values once for visual, text, and ARIA output; reject or safely map unknown levels.
|
|
547
|
+
- Verification and delivery: Invalid numbers, boundaries, levels, segment counts, and accessibility-tree values. Effort 1-2 weeks. Phase 1.
|
|
548
|
+
|
|
549
|
+
#### CDS-RUNTIME-001 - Global listeners and async browser APIs lack shared lifecycle controls
|
|
550
|
+
|
|
551
|
+
- Classification and scope: Confirmed reliability gap; Medium; P2; CommandPalette, Drawer, Menu, Popover, Splitter, and CodeBlock.
|
|
552
|
+
- Evidence and behavior: Effects capture callbacks without full dependencies; pointer listeners may outlive unmount; clipboard failure is not caught; timers are not consistently cleared.
|
|
553
|
+
- Risk: Likelihood is medium; impact is stale behavior, leaks, and unhandled rejection; blast radius covers interactive components; confidence is high.
|
|
554
|
+
- Remediation: Add stable event-callback, abortable-listener, and timer hooks; enforce React hook linting.
|
|
555
|
+
- Verification and delivery: Unmount mid-action, callback replacement, rejected permission, fake timers, and Strict Mode replay. Effort 2-4 weeks. Phase 3.
|
|
556
|
+
|
|
557
|
+
#### CDS-ICON-001 - Icons are split between a small registry and local glyphs
|
|
558
|
+
|
|
559
|
+
- Classification and scope: Confirmed consistency gap; Medium; P3; Icon and components containing SVG or Unicode symbols.
|
|
560
|
+
- Evidence and behavior: Invalid names silently fall back to sparkle; directional icons have no mirror metadata; many components embed local glyphs.
|
|
561
|
+
- Risk: Likelihood is high; impact is visual drift and incorrect RTL; blast radius is distributed; confidence is high.
|
|
562
|
+
- Remediation: Add direction, mirror, optical size, category, and deprecation metadata; warn in development; migrate duplicates.
|
|
563
|
+
- Verification and delivery: Registry uniqueness, invalid names, RTL, accessible naming, and size snapshots. Effort 3-6 weeks. Phase 4. Reference: Primer and Fluent icon governance.
|
|
564
|
+
|
|
565
|
+
#### CDS-ASSET-001 - Fonts and image assets lack a rights and delivery contract
|
|
566
|
+
|
|
567
|
+
- Classification and scope: Confirmed repository evidence gap; Medium; P2; `fonts/`, `assets/`, package metadata.
|
|
568
|
+
- Evidence and behavior: No third-party license or notice was found for packaged font families; images lack source, version, hash, or rights metadata; four PNGs are about 1.4-1.5 MB each.
|
|
569
|
+
- Risk: Likelihood is medium; impact is legal uncertainty and package cost; blast radius includes public distribution; confidence is high for missing repository evidence. Actual rights remain open.
|
|
570
|
+
- Remediation: Add asset manifest, hashes, source, license texts, ownership, optimized AVIF or WebP, responsive variants, and optional package paths.
|
|
571
|
+
- Verification and delivery: Legal checklist, package audit, decode tests, image budgets, dark-mode review, and cache checks. Effort 1-3 weeks plus legal review. Phases 1-2.
|
|
572
|
+
|
|
573
|
+
#### CDS-QR-001 - QRCode omits its own quiet zone
|
|
574
|
+
|
|
575
|
+
- Classification and scope: Confirmed reliability defect; Medium; P2; `components/data/QRCode.jsx:9-14`, `_audit/qr-scan-test.html:29-40`.
|
|
576
|
+
- Evidence and behavior: Modules reach the SVG edge. The test adds an external white border before decoding, so it does not prove the component itself.
|
|
577
|
+
- Risk: Likelihood is medium; impact is scan failure; blast radius is QR consumers; confidence is high.
|
|
578
|
+
- Remediation: Include the required module quiet zone in the viewBox and background contract.
|
|
579
|
+
- Verification and delivery: Decode without external margin across sizes, colors, themes, print, densities, and camera angles. Effort under 1 week. Phase 3.
|
|
580
|
+
|
|
581
|
+
### Quality, documentation, design integration, adoption, and coverage
|
|
582
|
+
|
|
583
|
+
#### CDS-QA-001 - Current checks favor presence and parity over behavior
|
|
584
|
+
|
|
585
|
+
- Classification and scope: Confirmed quality-system gap; High; P0.
|
|
586
|
+
- Evidence and behavior: The entry test passes 121 exports but never executes JSX or compiles declarations. Existing checks did not detect the confirmed system-dark, IME, SSR, overlay, invalid-step, or Editor defects.
|
|
587
|
+
- Risk: Likelihood is high; impact is false release confidence; blast radius covers the whole package; confidence is high. Related: most High findings.
|
|
588
|
+
- Remediation: Add risk-based contract suites for types, SSR, browser behavior, keyboard interaction, themes, locale, content stress, security payloads, and packed consumers.
|
|
589
|
+
- Verification and delivery: Every confirmed defect first receives a failing regression test. Effort 1-2 engineer-months for the initial matrix. Phases 1-3. Reference: [Storybook testing](https://storybook.js.org/docs/writing-tests/index).
|
|
590
|
+
|
|
591
|
+
#### CDS-QA-002 - Accessibility and visual coverage cannot establish WCAG conformance
|
|
592
|
+
|
|
593
|
+
- Classification and scope: Confirmed evidence gap; High; P1.
|
|
594
|
+
- Evidence and behavior: Axe uses Chromium and WCAG A or AA tags but fails only serious and critical findings. Manual screen-reader evidence is absent. Pixel baselines cover 15 templates and 12 components; whole-set overflow covers 84 templates at a narrow fixed configuration.
|
|
595
|
+
- Risk: Likelihood is high; impact is undetected exclusion or visual regression; blast radius covers the library; confidence is high.
|
|
596
|
+
- Remediation: Add Chromium, Firefox, and WebKit; keyboard and APG behavior; forced colors; 200 and 400 percent zoom; text spacing; reduced motion; real-browser story tests; and a manual assistive-technology matrix.
|
|
597
|
+
- Verification and delivery: Versioned evidence report by component and WCAG criterion. Effort 2-3 engineer-months. Phases 1-4. References: WCAG 2.2, ARIA APG, and Storybook accessibility testing.
|
|
598
|
+
|
|
599
|
+
#### CDS-QA-003 - There is no authoritative type, lint, coverage, or local verification gate
|
|
600
|
+
|
|
601
|
+
- Classification and scope: Confirmed tooling gap; High; P1; `package.json` and `scripts/verify-local.sh`.
|
|
602
|
+
- Evidence and behavior: No source typecheck, ESLint, Stylelint, hook-dependency enforcement, executable coverage metric, or single local command exists. `verify:local` prints manual instructions.
|
|
603
|
+
- Risk: Likelihood is high; impact is inconsistent contributor checks; blast radius covers all changes; confidence is high.
|
|
604
|
+
- Remediation: Add one read-only `verify` command that runs type, lint, generated parity, unit, browser, package, and documentation checks. Split fast and full profiles.
|
|
605
|
+
- Verification and delivery: Local-to-CI parity and clean-checkout run. Effort 1-2 engineer-months. Phase 2. Reference: Carbon, GitLab, Primer, and Ant contributor workflows.
|
|
606
|
+
|
|
607
|
+
#### CDS-DOC-001 - Release, migration, and status documentation are incomplete or stale
|
|
608
|
+
|
|
609
|
+
- Classification and scope: Confirmed documentation gap; Medium; P1; `docs/release-notes.md`, status data, task records.
|
|
610
|
+
- Evidence and behavior: Project policy forbids `CHANGELOG.md`; GitHub Releases are absent; status data is stale; completed task records contain unchecked acceptance boxes; migration and deprecation records are missing.
|
|
611
|
+
- Risk: Likelihood is high; impact is unsafe upgrades and weak traceability; blast radius includes maintainers and consumers; confidence is high.
|
|
612
|
+
- Remediation: Keep curated release notes, add machine-generated changesets, GitHub Releases, migration guides, deprecation pages, and signed release records. A hand-written changelog alone is insufficient.
|
|
613
|
+
- Verification and delivery: Every release links API diff, migration actions, digest, gates, and supported versions. Effort 1 engineer-month initially. Phases 1-3. Reference: Carbon, Spectrum, GitLab, and Ant migration records.
|
|
614
|
+
|
|
615
|
+
#### CDS-DX-001 - Consumer onboarding lacks tested recipes and migration tools
|
|
616
|
+
|
|
617
|
+
- Classification and scope: Confirmed developer-experience gap; Medium; P1; consuming docs and examples.
|
|
618
|
+
- Evidence and behavior: Consumers need special transpilation; examples do not prove all current entry paths; no codemods, lint rules, token scanner, compatibility checker, or real-product canary exists.
|
|
619
|
+
- Risk: Likelihood is high; impact is local wrappers and version pinning; blast radius includes every product team; confidence is high. Related: CDS-ADOPT-001.
|
|
620
|
+
- Remediation: Publish tested Next and Vite recipes, codemods, ESLint and Stylelint rules, upgrade diagnostics, and a conformance CLI.
|
|
621
|
+
- Verification and delivery: New-project setup under 30 minutes and automated migration of known consumer patterns. Effort 2 engineer-months. Phases 3-5. Reference: Atlassian migration rules and Spectrum codemods.
|
|
622
|
+
|
|
623
|
+
#### CDS-DESIGN-001 - Figma integration is represented as ready without live identity proof
|
|
624
|
+
|
|
625
|
+
- Classification and scope: Confirmed repository state with an open external-state question; Opportunity; P2; `code-connect/`, Figma workflows, and docs.
|
|
626
|
+
- Evidence and behavior: The 105 mapping files use synthetic `9999:*` node IDs. Live operations soft-skip without secrets or supported API access. The workflow label still says 99 mappings.
|
|
627
|
+
- Risk: Likelihood is high for drift; impact is false design-to-code confidence; blast radius includes designers and component owners; confidence is high for repository state.
|
|
628
|
+
- Remediation: Keep code-owned DTCG and produce idempotent Figma exports and drift reports. Add real component IDs only after file ownership and plan access are confirmed. Bidirectional sync remains out of scope until conflict rules exist.
|
|
629
|
+
- Verification and delivery: No synthetic mapping marked live; real-node validation; idempotent dry run; design-version record. Effort 1-2 engineer-months. Phases 2-4. Reference: Atlassian, Fluent, Carbon, Spectrum, and GitLab design-library processes.
|
|
630
|
+
|
|
631
|
+
#### CDS-ADOPT-001 - All known consumers lag the current release
|
|
632
|
+
|
|
633
|
+
- Classification and scope: Confirmed adoption risk; High; P0.
|
|
634
|
+
- Evidence and behavior: Finance and Landing Page use old Git commit dependencies; SachViet locks registry 1.0.0; Strategem deep-imports raw JSX. None is proven on 1.1.1.
|
|
635
|
+
- Risk: Likelihood is certain; impact is fragmented behavior and untested release assumptions; blast radius includes four known products; confidence is high.
|
|
636
|
+
- Remediation: Add a consumer matrix and canary builds before declaring releases adopted. Start with SachViet CSS and Finance React paths.
|
|
637
|
+
- Verification and delivery: Green build, type, visual, accessibility, and smoke checks for each exact consumer lock. Effort 1 engineer-month initial, then continuous. Phases 0-5.
|
|
638
|
+
|
|
639
|
+
#### CDS-ADOPT-002 - Local wrappers, copied classes, and unsupported tokens form product forks
|
|
640
|
+
|
|
641
|
+
- Classification and scope: Confirmed adoption and migration risk; High; P1.
|
|
642
|
+
- Evidence and behavior: Landing Page has five wrappers, 279 token references, and about 297 local `.cs-*` classes. Strategem has 15 imports, 125 token references, about 155 local classes, and source-file imports. Finance uses undefined `--cs-bg-base` and `--cs-fg-base`.
|
|
643
|
+
- Risk: Likelihood is high; impact is migration breakage and divergent UX; blast radius spans several products; confidence is high.
|
|
644
|
+
- Remediation: Inventory wrappers and raw values, classify valid product patterns, upstream shared needs, and supply adapters or codemods. Deleting local CSS without classification is rejected.
|
|
645
|
+
- Verification and delivery: Zero deep imports, zero undefined tokens, documented approved adapters, and visual parity. Effort 2-3 engineer-months. Phases 3-5. Reference: Atlassian adoption tooling and Primer contribution criteria.
|
|
646
|
+
|
|
647
|
+
#### CDS-ADOPT-003 - Adoption and deprecation are not measured
|
|
648
|
+
|
|
649
|
+
- Classification and scope: Strategic opportunity; P2.
|
|
650
|
+
- Evidence and behavior: There is no repository-wide import scanner, package-version dashboard, deprecation inventory, or privacy-defined runtime telemetry.
|
|
651
|
+
- Risk: Current impact is unknown migration cost; future blast radius includes every product; confidence is high for missing tooling.
|
|
652
|
+
- Remediation: Start with repository-only scans of package version, imports, component names, token usage, deep paths, and deprecated APIs. Runtime events remain opt-in, aggregate, and free of content or user identifiers.
|
|
653
|
+
- Verification and delivery: Dashboard agrees with lockfiles and static analysis; privacy review covers any future runtime event. Effort 1-2 engineer-months. Phases 4-6. Reference: Atlassian conformance tooling.
|
|
654
|
+
|
|
655
|
+
#### CDS-COV-001 - Breadth exceeds verified component maturity
|
|
656
|
+
|
|
657
|
+
- Classification and scope: Strategic opportunity built on confirmed evidence; P2.
|
|
658
|
+
- Evidence and behavior: There are 105 primary modules, but many high-risk widgets lack mature behavior, and no lifecycle state distinguishes stable, experimental, or deprecated work.
|
|
659
|
+
- Risk: Likelihood is high; impact is false completeness and support overload; blast radius spans all exports; confidence is high.
|
|
660
|
+
- Remediation: Classify all components, stabilize consumer-used foundations first, and keep advanced components beta until behavior, accessibility, docs, design, and consumer evidence pass. Component count must not be used as the success metric.
|
|
661
|
+
- Verification and delivery: Every public export has status, owner, contract, test evidence, and migration policy. Effort runs through Phases 0-4. Reference: Primer status and Carbon component checklist.
|
|
662
|
+
|
|
663
|
+
## 5. Cross-cutting root causes
|
|
664
|
+
|
|
665
|
+
| Root cause | Evidence | Findings |
|
|
666
|
+
|---|---|---|
|
|
667
|
+
| Repository files double as distribution artifacts | Raw JSX, authoring CSS, docs, templates, assets, and UI kits ship together | CDS-PKG-001 through CDS-PKG-003, CDS-HOST-001 |
|
|
668
|
+
| Convention replaces explicit authority | Uppercase exports define APIs; token mirrors imply different owners | CDS-API-001, CDS-TOKEN-001, CDS-GOV-002 |
|
|
669
|
+
| Components own behavior independently | Repeated overlay, event, form, state, and keyboard logic | CDS-ARCH-001, CDS-API-003, CDS-RUNTIME-001, CDS-A11Y-003 |
|
|
670
|
+
| Visual examples are treated as behavioral proof | Story and presence checks pass while runtime defects remain | CDS-QA-001, CDS-QA-002, CDS-COV-001 |
|
|
671
|
+
| Global assumptions are embedded in APIs | Vietnamese or English, VND or USD, left-to-right, short content, client browser | CDS-I18N-001 through CDS-I18N-005, CDS-CONTENT-001, CDS-SSR-001 |
|
|
672
|
+
| Release evidence is assembled from mutable state | Stale status, soft publish exits, mutable Actions, direct generated pushes | CDS-REL-001 through CDS-REL-003, CDS-META-001, CDS-SEC-003 |
|
|
673
|
+
| Product content and platform code share ownership | Templates, legal documents, brand assets, runtime components, and compiler code coexist | CDS-LIC-001, CDS-PKG-002, CDS-SEC-002, CDS-ASSET-001 |
|
|
674
|
+
| Consumer feedback is informal | Known products pin old builds and create wrappers without a conformance loop | CDS-ADOPT-001 through CDS-ADOPT-003 |
|
|
675
|
+
|
|
676
|
+
## 6. Risk register
|
|
677
|
+
|
|
678
|
+
| Risk | Probability | Impact | Trigger | Owner | Mitigation | Contingency |
|
|
679
|
+
|---|---|---|---|---|---|---|
|
|
680
|
+
| Untrusted Editor HTML executes | Medium until usage scan | Critical | Consumer passes stored or remote HTML | Security and components | Sanitize default and audit consumers | Disable rich HTML path and patch v1 |
|
|
681
|
+
| Release reports success without artifact | Medium | High | Auth, conflict, wrong tag, registry issue | Platform | Fail-closed exact-SHA release | Restore previous dist-tag and publish tested tarball |
|
|
682
|
+
| Type consumers cannot upgrade | High | High | Strict TypeScript or NodeNext | Platform and API | Packed declaration matrix | Hold release and retain prior compatible version |
|
|
683
|
+
| Accessibility exclusion remains hidden | High | High | Keyboard, AT, zoom, or contrast use | Accessibility | Contract and manual matrices | Mark affected component beta and provide native fallback |
|
|
684
|
+
| CSS collides with a host product | High | High | Mixed CSS stacks or microfrontends | Foundations | Layered scoped entries | Keep compatibility CSS opt-in and roll back import |
|
|
685
|
+
| Token authority migration changes appearance | Medium | High | Canonical DTCG cutover | Foundations | Golden output and visual parity | Dual-generate and retain old token package |
|
|
686
|
+
| Consumer forks block v2 migration | High | High | Local wrappers and copied CSS | Adoption | Scanner, adapters, codemods | Extend compatibility package and migrate by product |
|
|
687
|
+
| Open-core rights are incomplete | Medium | High | External distribution or partner review | Founder and legal | Apache-2.0 code plus asset exclusions | Delay public v2 package while internal testing continues |
|
|
688
|
+
| Scope exceeds 120 engineer-months | Medium | High | Too many production renderers or rewrites | Program lead | Web-first renderer and maturity gates | Keep low-demand components beta; defer year-two options |
|
|
689
|
+
| Manual accessibility review capacity is missing | Medium | High | No specialist availability | Accessibility lead | Reserve specialist schedule in Q1 | Contract external review before GA |
|
|
690
|
+
| Figma tooling implies live sync without proof | High | Medium | Synthetic IDs or API soft skips | Design systems | Code-owned export and drift reporting | Publish status as offline-only |
|
|
691
|
+
| Organization security settings differ from repo view | Medium | Medium | Advanced Security or policy unavailable | Platform | Phase 0 settings audit | Add repository-level controls where possible |
|
|
692
|
+
|
|
693
|
+
## 7. Accessibility conformance assessment
|
|
694
|
+
|
|
695
|
+
Current status: conformance is not established.
|
|
696
|
+
|
|
697
|
+
The current automated checks are useful regression controls, but they cannot support a WCAG 2.2 AA claim. Confirmed concerns map to semantic relationships, keyboard access, focus order, focus appearance, reflow, contrast, target size, dragging alternatives, error identification, status messages, and name-role-value behavior.
|
|
698
|
+
|
|
699
|
+
Target evidence for every Stable interactive component:
|
|
700
|
+
|
|
701
|
+
- Automated accessibility checks in Chromium, Firefox, and WebKit.
|
|
702
|
+
- Keyboard contract tests based on native HTML or the applicable ARIA pattern.
|
|
703
|
+
- 200 percent zoom, 400 percent zoom, browser text spacing, and 320 CSS-pixel reflow.
|
|
704
|
+
- Forced colors, increased contrast, reduced motion, system dark, and combined preference modes.
|
|
705
|
+
- VoiceOver with Safari on macOS and iOS.
|
|
706
|
+
- NVDA with Chrome and Firefox on Windows.
|
|
707
|
+
- TalkBack with Chrome on Android.
|
|
708
|
+
- Touch, pointer, keyboard, and drag alternatives.
|
|
709
|
+
- Accessible names, descriptions, errors, live regions, and focus restoration.
|
|
710
|
+
- Manual evidence date, browser, AT version, tester, result, and open exception.
|
|
711
|
+
|
|
712
|
+
AA is the release target. Practical AAA opportunities include 7:1 text contrast for selected high-risk content, 44-pixel targets, clearer error prevention, reduced cognitive load, and user-controlled motion. WCAG 3.0 and ARIA 1.3 remain research inputs rather than release targets.
|
|
713
|
+
|
|
714
|
+
## 8. Token and theming maturity assessment
|
|
715
|
+
|
|
716
|
+
Current strengths:
|
|
717
|
+
|
|
718
|
+
- DTCG-shaped data and typed token categories exist.
|
|
719
|
+
- Native Swift, Kotlin, and Dart outputs are generated.
|
|
720
|
+
- Current provenance checks pass.
|
|
721
|
+
- Light, dark, system, element, language, and one style setting are represented.
|
|
722
|
+
- Contrast and element generation tooling exists.
|
|
723
|
+
|
|
724
|
+
Current limits:
|
|
725
|
+
|
|
726
|
+
- DTCG is a generated mirror rather than the clear authority.
|
|
727
|
+
- Only 29 color leaves and a small component-token layer serve 105 modules.
|
|
728
|
+
- Raw CSS values remain common.
|
|
729
|
+
- Brand and corporate identity are coupled to semantic UI color.
|
|
730
|
+
- Contrast, density, motion, and brand are not independent modes.
|
|
731
|
+
- System dark and increased contrast contain confirmed failures.
|
|
732
|
+
- No token lifecycle, owner, deprecation, or consumer-diff policy exists.
|
|
733
|
+
|
|
734
|
+
Target token model:
|
|
735
|
+
|
|
736
|
+
```text
|
|
737
|
+
reference
|
|
738
|
+
-> semantic
|
|
739
|
+
-> component and state
|
|
740
|
+
-> platform output
|
|
741
|
+
```
|
|
742
|
+
|
|
743
|
+
Orthogonal axes:
|
|
744
|
+
|
|
745
|
+
```text
|
|
746
|
+
brand
|
|
747
|
+
color mode
|
|
748
|
+
contrast
|
|
749
|
+
density
|
|
750
|
+
motion
|
|
751
|
+
```
|
|
752
|
+
|
|
753
|
+
Locale, direction, time zone, and currency remain content context rather than color-token axes.
|
|
754
|
+
|
|
755
|
+
DTCG 2025.10 becomes the canonical exchange format, with a CyberSkill extension namespace for ownership, lifecycle, platform hints, and design-tool identity. DTCG is a Design Tokens Community Group final report, not a W3C Recommendation.
|
|
756
|
+
|
|
757
|
+
## 9. Component and pattern coverage matrix
|
|
758
|
+
|
|
759
|
+
| Area | Current position | Target disposition |
|
|
760
|
+
|---|---|---|
|
|
761
|
+
| Actions and basic inputs | Broad coverage; API and state contracts vary | Stabilize first through native semantics, refs, slots, and shared state |
|
|
762
|
+
| Forms | Broad component count; submission, errors, async state, paths, and IME are weak | Shared field, validation, submission, and composition primitives |
|
|
763
|
+
| Navigation | Broad coverage; several menu and tab patterns lack full keyboard behavior | Migrate through collection and roving-focus primitives |
|
|
764
|
+
| Overlays | Many named components; no common portal, stack, focus, or positioning layer | One layer system used by all popup and modal components |
|
|
765
|
+
| Feedback | Broad visual coverage; progress and status normalization need work | Shared numeric, live-region, pending, retry, offline, and stale states |
|
|
766
|
+
| Tables and grids | Three table components; advanced behavior is compact and under-specified | Stable basic table; advanced grid stays beta until data, keyboard, and virtualization contracts pass |
|
|
767
|
+
| Date and time | Calendar, DatePicker, TimePicker exist | Plain-date model, locale calendar rules, date ranges, time zones, and keyboard grids |
|
|
768
|
+
| File and media | FileUpload, Image, Carousel, QRCode exist | Accessible upload lifecycle, managed preview, media state, and scan-safe QR |
|
|
769
|
+
| Rich content | Editor and CodeBlock exist | Schema-based safe editor; clipboard and code semantics |
|
|
770
|
+
| Data visualization | Chart exists as a basic component | Treat advanced visualization as a separate package or pattern family |
|
|
771
|
+
| Application shell | Sidebar, Dock, Toolbar, navigation, and templates exist | Stable shell primitives; product shells stay outside core |
|
|
772
|
+
| Collaboration | Comment and AI messaging exist | Add activity, presence, attribution, and moderation only after product demand |
|
|
773
|
+
| AI | Eight AI modules exist | Add provenance, uncertainty, human review, streaming, errors, and policy metadata before Stable status |
|
|
774
|
+
| Authentication and permissions | Mostly template-level | Keep product workflows outside core; expose reusable fields, dialogs, statuses, and permission patterns |
|
|
775
|
+
| Billing and administration | Mostly templates or absent | Pattern packages after consumer evidence, not core primitives |
|
|
776
|
+
| Content design | Bilingual labels exist; no governed message model | Typed catalogs, tone guidance, error recipes, and localization review |
|
|
777
|
+
| Mobile-native UI | Token mirrors only | Keep token output in year one; no production native component library |
|
|
778
|
+
| Web Components | No supported renderer | One proof for a primitive and form control; production support remains a year-two decision |
|
|
779
|
+
|
|
780
|
+
## 10. API consistency assessment
|
|
781
|
+
|
|
782
|
+
Target API rules:
|
|
783
|
+
|
|
784
|
+
- Every export is declared in one public registry.
|
|
785
|
+
- Every component has a rendered-element contract, ref target, native prop inheritance, and slot list.
|
|
786
|
+
- Native events remain native; value callbacks use `onValueChange`.
|
|
787
|
+
- Controlled and uncontrolled behavior uses one shared state primitive.
|
|
788
|
+
- IDs use `useId` or an injected stable-ID service.
|
|
789
|
+
- Boolean combinations that permit invalid states become discriminated unions or compound APIs.
|
|
790
|
+
- Stable components expose documented loading, error, disabled, read-only, required, invalid, pending, and empty behavior where relevant.
|
|
791
|
+
- Polymorphism is limited to components whose semantics remain valid.
|
|
792
|
+
- Component metadata records status, owner, browser boundary, client or server classification, tokens, accessibility behavior, and migration links.
|
|
793
|
+
- React 18-compatible ref behavior remains supported through the v2 migration.
|
|
794
|
+
- Touched code moves incrementally to TSX. A big-bang source conversion is excluded.
|
|
795
|
+
|
|
796
|
+
## 11. Testing and quality-gate assessment
|
|
797
|
+
|
|
798
|
+
Current positive evidence:
|
|
799
|
+
|
|
800
|
+
- Current unit and parity commands passed on the audited commit.
|
|
801
|
+
- Token provenance, bundle freshness, design-document parity, React entry export parity, element packs, and whole-set checks are active.
|
|
802
|
+
- Every public primary has Storybook coverage.
|
|
803
|
+
- npm artifact integrity and provenance are valid.
|
|
804
|
+
|
|
805
|
+
Required quality layers:
|
|
806
|
+
|
|
807
|
+
| Layer | Pull request | Release | Scheduled |
|
|
808
|
+
|---|---|---|---|
|
|
809
|
+
| Formatting, lint, hooks, types | Required | Required | Required |
|
|
810
|
+
| Token and generated parity | Required | Required | Required |
|
|
811
|
+
| API diff and declaration consumers | Required | Required | Required |
|
|
812
|
+
| Unit and interaction tests | Required | Required | Required |
|
|
813
|
+
| SSR and hydration consumers | Required for affected paths | Required | Required |
|
|
814
|
+
| Browser matrix | Risk-based | Required | Full matrix |
|
|
815
|
+
| Automated accessibility | Required | Required | Full matrix |
|
|
816
|
+
| Manual accessibility | Evidence required for Stable changes | Evidence manifest | Quarterly sampling |
|
|
817
|
+
| Visual diffs | Affected stories | Stable matrix | Whole-set rotation |
|
|
818
|
+
| Package and bundle budgets | Required | Required | Trend report |
|
|
819
|
+
| Security and dependency review | Required | Required | Full scan |
|
|
820
|
+
| Real consumer canaries | Changed integration paths | All four known consumers | Nightly or weekly |
|
|
821
|
+
| Release integrity | Not applicable | Exact SHA, tag, tarball, registry | Audit |
|
|
822
|
+
|
|
823
|
+
The authoritative local command becomes `npm run verify`, with `verify:fast` and `verify:full` profiles. It must be read-only with respect to tracked files.
|
|
824
|
+
|
|
825
|
+
## 12. Documentation and developer-experience assessment
|
|
826
|
+
|
|
827
|
+
The target documentation site must separate:
|
|
828
|
+
|
|
829
|
+
- User-facing component guidance.
|
|
830
|
+
- API references generated from source contracts.
|
|
831
|
+
- Accessibility behavior and test evidence.
|
|
832
|
+
- Content and localization guidance.
|
|
833
|
+
- Token and theming reference.
|
|
834
|
+
- Migration and deprecation guides.
|
|
835
|
+
- Release records with API diffs and artifact identity.
|
|
836
|
+
- Maintainer-only gate and generator details.
|
|
837
|
+
|
|
838
|
+
Every Stable component page must include anatomy, states, content limits, keyboard behavior, screen-reader notes, tokens, examples, do and do-not guidance, SSR classification, migration history, and design-tool status.
|
|
839
|
+
|
|
840
|
+
Storybook remains the public web documentation surface. Template tooling moves to its separate product surface and security boundary.
|
|
841
|
+
|
|
842
|
+
## 13. Distribution, versioning, and security assessment
|
|
843
|
+
|
|
844
|
+
Recommended package topology:
|
|
845
|
+
|
|
846
|
+
```text
|
|
847
|
+
@cyberskill/tokens
|
|
848
|
+
@cyberskill/css
|
|
849
|
+
@cyberskill/icons
|
|
850
|
+
@cyberskill/react
|
|
851
|
+
@cyberskill/theme-cyberskill
|
|
852
|
+
@cyberskill/design compatibility meta-package
|
|
853
|
+
```
|
|
854
|
+
|
|
855
|
+
Private repository applications:
|
|
856
|
+
|
|
857
|
+
```text
|
|
858
|
+
apps/docs
|
|
859
|
+
apps/conformance
|
|
860
|
+
tools/release
|
|
861
|
+
tools/migrations
|
|
862
|
+
```
|
|
863
|
+
|
|
864
|
+
Separate products:
|
|
865
|
+
|
|
866
|
+
```text
|
|
867
|
+
template and document product
|
|
868
|
+
brand and marketing asset product
|
|
869
|
+
legal content product
|
|
870
|
+
template compiler and preview product
|
|
871
|
+
```
|
|
872
|
+
|
|
873
|
+
Version policy:
|
|
874
|
+
|
|
875
|
+
- Build v2 through `2.0.0-alpha.*`, then `next`, release candidates, and GA.
|
|
876
|
+
- Breaking public changes occur only in a major release.
|
|
877
|
+
- Deprecations remain for at least two stable minor cycles and six months.
|
|
878
|
+
- v1 receives security-only fixes for 12 months after v2 GA.
|
|
879
|
+
- Every deprecation has a warning, migration page, replacement, and codemod where practical.
|
|
880
|
+
- Releases publish GitHub Release notes, API diff, SBOM, provenance, package digest, support matrix, and rollback instructions.
|
|
881
|
+
- The tested tarball is the published tarball.
|
|
882
|
+
|
|
883
|
+
## 14. Enterprise benchmark
|
|
884
|
+
|
|
885
|
+
### Scoring rubric
|
|
886
|
+
|
|
887
|
+
| Score | Meaning |
|
|
888
|
+
|---:|---|
|
|
889
|
+
| 0 | No public capability or usable evidence |
|
|
890
|
+
| 1 | Isolated proof or manual-only behavior |
|
|
891
|
+
| 2 | Basic capability with major gaps or migration risk |
|
|
892
|
+
| 3 | Production-usable core with docs and some enforcement |
|
|
893
|
+
| 4 | Integrated lifecycle, governance, migration, and consumer evidence |
|
|
894
|
+
| 5 | Reference-level execution with automated proof or proven cross-platform scale |
|
|
895
|
+
|
|
896
|
+
Missing authoritative public proof caps a dimension at 2. Security and analytics are scored conservatively because vendors expose limited internal evidence.
|
|
897
|
+
|
|
898
|
+
### Benchmark matrix
|
|
899
|
+
|
|
900
|
+
| System | Architecture | Tokens | Coverage | API | A11y | I18n | Theme |
|
|
901
|
+
|---|---:|---:|---:|---:|---:|---:|---:|
|
|
902
|
+
| Material Design 3 | 4 | 5 | 5 | 4 | 4 | 4 | 5 |
|
|
903
|
+
| IBM Carbon | 4 | 5 | 5 | 4 | 4 | 3 | 4 |
|
|
904
|
+
| Microsoft Fluent 2 | 5 | 5 | 5 | 4 | 4 | 4 | 5 |
|
|
905
|
+
| Adobe Spectrum 2 | 5 | 5 | 4 | 5 | 5 | 5 | 4 |
|
|
906
|
+
| Atlassian | 4 | 5 | 5 | 4 | 4 | 3 | 5 |
|
|
907
|
+
| Shopify Polaris | 3 | 3 | 4 | 4 | 4 | 4 | 3 |
|
|
908
|
+
| Salesforce Lightning | 4 | 2 | 5 | 3 | 4 | 3 | 4 |
|
|
909
|
+
| GitHub Primer | 5 | 5 | 4 | 4 | 5 | 3 | 5 |
|
|
910
|
+
| GitLab Pajamas | 4 | 5 | 4 | 4 | 4 | 4 | 4 |
|
|
911
|
+
| Ant Design | 4 | 5 | 5 | 4 | 3 | 5 | 5 |
|
|
912
|
+
| CyberSkill | 2 | 3 | 3 | 2 | 2 | 2 | 3 |
|
|
913
|
+
|
|
914
|
+
| System | Responsive | Performance | Testing | Docs | DX | Distribution | Versioning |
|
|
915
|
+
|---|---:|---:|---:|---:|---:|---:|---:|
|
|
916
|
+
| Material Design 3 | 5 | 4 | 4 | 5 | 4 | 3 | 3 |
|
|
917
|
+
| IBM Carbon | 4 | 3 | 4 | 5 | 4 | 4 | 5 |
|
|
918
|
+
| Microsoft Fluent 2 | 4 | 3 | 4 | 4 | 4 | 4 | 3 |
|
|
919
|
+
| Adobe Spectrum 2 | 4 | 4 | 4 | 5 | 4 | 4 | 4 |
|
|
920
|
+
| Atlassian | 4 | 3 | 4 | 5 | 5 | 4 | 4 |
|
|
921
|
+
| Shopify Polaris | 5 | 4 | 3 | 4 | 4 | 2 | 2 |
|
|
922
|
+
| Salesforce Lightning | 4 | 4 | 3 | 4 | 4 | 2 | 2 |
|
|
923
|
+
| GitHub Primer | 5 | 4 | 5 | 5 | 4 | 5 | 4 |
|
|
924
|
+
| GitLab Pajamas | 4 | 3 | 4 | 4 | 4 | 4 | 4 |
|
|
925
|
+
| Ant Design | 5 | 4 | 4 | 5 | 5 | 5 | 5 |
|
|
926
|
+
| CyberSkill | 2 | 1 | 2 | 3 | 2 | 2 | 2 |
|
|
927
|
+
|
|
928
|
+
| System | Governance | Security | Adoption | Design tools | Analytics | Multi-brand | Future | Mean |
|
|
929
|
+
|---|---:|---:|---:|---:|---:|---:|---:|---:|
|
|
930
|
+
| Material Design 3 | 4 | 3 | 4 | 5 | 2 | 4 | 4 | 4.05 |
|
|
931
|
+
| IBM Carbon | 5 | 3 | 4 | 5 | 2 | 4 | 4 | 4.05 |
|
|
932
|
+
| Microsoft Fluent 2 | 4 | 3 | 4 | 5 | 2 | 4 | 4 | 4.00 |
|
|
933
|
+
| Adobe Spectrum 2 | 4 | 3 | 4 | 5 | 2 | 3 | 5 | 4.19 |
|
|
934
|
+
| Atlassian | 4 | 3 | 5 | 5 | 2 | 4 | 5 | 4.14 |
|
|
935
|
+
| Shopify Polaris | 4 | 3 | 5 | 3 | 3 | 3 | 4 | 3.52 |
|
|
936
|
+
| Salesforce Lightning | 4 | 3 | 5 | 4 | 3 | 4 | 4 | 3.57 |
|
|
937
|
+
| GitHub Primer | 5 | 3 | 4 | 4 | 3 | 3 | 4 | 4.24 |
|
|
938
|
+
| GitLab Pajamas | 5 | 3 | 4 | 5 | 3 | 4 | 4 | 4.00 |
|
|
939
|
+
| Ant Design | 4 | 3 | 5 | 4 | 2 | 4 | 5 | 4.33 |
|
|
940
|
+
| CyberSkill | 2 | 2 | 2 | 2 | 0 | 3 | 2 | 2.10 |
|
|
941
|
+
|
|
942
|
+
Ant's high unweighted mean comes from breadth, tokens, localization, distribution, and migration support. It is not the recommended architecture to copy. Spectrum, Primer, Carbon, Atlassian, GitLab, and Fluent provide stronger references for CyberSkill's highest-risk gaps.
|
|
943
|
+
|
|
944
|
+
### Dimension-level guidance
|
|
945
|
+
|
|
946
|
+
| Dimension | CyberSkill gap | Adopt or adapt | Avoid |
|
|
947
|
+
|---|---|---|---|
|
|
948
|
+
| Architecture | One package mixes runtime and products | Spectrum behavior separation; Primer package families | Full rewrite or unmeasured Web Components switch |
|
|
949
|
+
| Tokens | Several implied authorities | GitLab DTCG and Carbon semantic layers | Bidirectional token ownership |
|
|
950
|
+
| Coverage | Count exceeds verified maturity | Primer lifecycle states | Calling every export Stable |
|
|
951
|
+
| API | Inferred exports and inconsistent composition | Spectrum slots and Atlassian enforcement | Unbounded polymorphism |
|
|
952
|
+
| Accessibility | Roles exceed behavior | Spectrum and Primer review models | Treating axe as conformance |
|
|
953
|
+
| Internationalization | Binary language and currency coupling | Spectrum and Ant locale models | Locale-specific business defaults |
|
|
954
|
+
| Theming | Brand and element themes are coupled | Fluent contrast modes and Primer themes | Hand-authoring every axis combination |
|
|
955
|
+
| Responsive | Global viewport rules and serialized selectors | Material adaptive patterns and container queries | New CSS features without fallbacks |
|
|
956
|
+
| Performance | No budgets | Material bundle reporting and Primer package checks | One repository-total metric |
|
|
957
|
+
| Testing | Presence-heavy checks | Storybook browser tests and Primer review gates | Snapshot-only confidence |
|
|
958
|
+
| Documentation | Good breadth, weak migration record | Carbon, Spectrum, and GitLab release guidance | Static status claims |
|
|
959
|
+
| Developer experience | No codemods or conformance tools | Atlassian lint and migration tooling | Consumer-specific setup as the default |
|
|
960
|
+
| Distribution | Raw JSX and large tarball | Primer and Spectrum subpaths | Unpinned hosted `latest` delivery |
|
|
961
|
+
| Versioning | No machine change record | Carbon and Ant migration policy | Non-versioned platform components |
|
|
962
|
+
| Governance | No required review or ownership | Carbon, Primer, and GitLab ownership | One undifferentiated backlog |
|
|
963
|
+
| Security | Provenance exists; source and CI gaps remain | npm OIDC, SLSA, SBOM, OpenSSF | Soft success for terminal release steps |
|
|
964
|
+
| Adoption | Consumers lag and fork | Atlassian scanner and codemod model | Runtime tracking of user content |
|
|
965
|
+
| Design tools | Synthetic mappings and soft skips | Code-owned DTCG export | Uncontrolled two-way sync |
|
|
966
|
+
| Analytics | No evidence | Repository-only aggregate metrics | Personal or content telemetry |
|
|
967
|
+
| Multi-brand | Strong theme identity but no brand boundary | Fluent and Primer mode axes | Forking packages per tenant |
|
|
968
|
+
| Future readiness | Native tokens exist; renderer policy absent | Small measured proofs | Production commitments without demand |
|
|
969
|
+
|
|
970
|
+
### Current official source notes
|
|
971
|
+
|
|
972
|
+
All sources were accessed on 2026-07-28.
|
|
973
|
+
|
|
974
|
+
- [Material Design 3](https://m3.material.io/) remains the design reference, while [Material Web](https://github.com/material-components/material-web) states that it is in maintenance mode pending new maintainers.
|
|
975
|
+
- [Carbon themes](https://carbondesignsystem.com/elements/themes/overview/), [component checklist](https://carbondesignsystem.com/contributing/component-checklist/), and [v11 migration](https://carbondesignsystem.com/migrating/guide/overview/) provide strong lifecycle examples.
|
|
976
|
+
- [Fluent tokens](https://fluent2.microsoft.design/design-tokens), [development paths](https://fluent2.microsoft.design/get-started/develop), and [accessibility](https://fluent2.microsoft.design/accessibility) show cross-platform families and contrast modes.
|
|
977
|
+
- [Spectrum 2 releases](https://react-spectrum.adobe.com/releases/index.html) show stable 1.0 in December 2025 and 1.5 in June 2026; [inclusive design](https://spectrum.adobe.com/page/inclusive-design/) and [tokens](https://spectrum.adobe.com/page/design-tokens/) support the accessibility and token scores.
|
|
978
|
+
- [Atlassian components](https://atlassian.design/components/), [tools](https://atlassian.design/tools/), and [token migration](https://atlassian.design/tokens/migrate-to-tokens) support its adoption-tooling score.
|
|
979
|
+
- [Polaris React](https://github.com/Shopify/polaris-react) was archived on 2026-01-06 and directs new development to [Polaris Web Components](https://shopify.dev/docs/api/polaris/using-polaris-web-components).
|
|
980
|
+
- [Salesforce SLDS 1 and 2 guidance](https://developer.salesforce.com/docs/platform/lwc/guide/create-components-css-slds1-slds2.html) documents incomplete SLDS 2 token and hook support.
|
|
981
|
+
- [Primer component status](https://primer.style/product/getting-started/component-status/), [primitives](https://primer.style/product/primitives/), and [component contribution](https://primer.style/product/contribute/adding-new-components/) support its lifecycle and governance scores.
|
|
982
|
+
- [GitLab token authoring](https://design.gitlab.com/product-foundations/design-tokens-authoring/), [technical implementation](https://design.gitlab.com/product-foundations/design-tokens-technical-implementation/), and [Figma setup](https://design.gitlab.com/get-started/design/) support its token and design-tool scores.
|
|
983
|
+
- [Ant Design changelog](https://ant.design/components/changelog/), [theme model](https://ant.design/docs/react/customize-theme/), [v6 migration](https://ant.design/docs/react/migration-v6/), and [internationalization](https://ant.design/docs/react/i18n/) support its breadth, versioning, theme, and locale scores.
|
|
984
|
+
|
|
985
|
+
## 15. External research conclusions
|
|
986
|
+
|
|
987
|
+
| Question | Consensus and disagreement | CyberSkill decision | Compatibility and proof | Confidence |
|
|
988
|
+
|---|---|---|---|---|
|
|
989
|
+
| Accessibility target | WCAG 2.2 is a W3C Recommendation; APG is informative behavior guidance | Release against WCAG 2.2 AA and ARIA 1.2 | Manual AT and real-browser evidence required | High |
|
|
990
|
+
| Token exchange | DTCG 2025.10 is a stable Community Group report; vendors differ on algorithmic generation | Canonical DTCG with explicit semantic contracts | Clean-room generation proof | High |
|
|
991
|
+
| Modern CSS | Layers, logical properties, container queries, reduced motion, and forced colors are ready; anchor positioning and view transitions need fallbacks | Use stable features directly and experimental features only as enhancements | Overlay and responsive proofs | High |
|
|
992
|
+
| SSR and RSC | Server-safe imports, deterministic markup, and narrow client boundaries are established; framework integration still changes | Compiled ESM with explicit client modules | Next App Router and Vite SSR fixtures | High |
|
|
993
|
+
| Internationalization | ECMA-402, CLDR, HTML direction, and logical CSS are established | Locale provider with independent currency, time zone, and direction | Vietnamese, English, Arabic, and pseudo-locale proof | High |
|
|
994
|
+
| Testing | Browser stories, interaction tests, axe, visual diffs, and manual checks serve different purposes | Layered evidence model | Promote representative stories into contracts | High |
|
|
995
|
+
| Design sync | Code-owned export is safer than ungoverned two-way sync | One-way DTCG export and drift reporting | Idempotent Figma-compatible output | Medium-high |
|
|
996
|
+
| Package security | OIDC, provenance, least privilege, SBOM, and immutable workflow inputs are established | Retain npm OIDC and add missing controls | Exact-tarball release proof | High |
|
|
997
|
+
| Framework neutrality | Web Components reduce framework coupling, but Material Web and Polaris React show ownership risk | React-first production; one Web Components proof only | Primitive and form-control experiment | Medium |
|
|
998
|
+
| AI support | Machine-readable component metadata can improve search and migration; generated output cannot establish correctness | Read-only component and migration assistant after metadata exists | Validate answers against versioned registry | Medium |
|
|
999
|
+
|
|
1000
|
+
## 16. Recommended target-state architecture
|
|
1001
|
+
|
|
1002
|
+
```mermaid
|
|
1003
|
+
flowchart LR
|
|
1004
|
+
DTCG["Canonical DTCG source"] --> GEN["Deterministic generators"]
|
|
1005
|
+
GEN --> TOKENS["@cyberskill/tokens"]
|
|
1006
|
+
GEN --> CSS["@cyberskill/css"]
|
|
1007
|
+
GEN --> THEME["@cyberskill/theme-cyberskill"]
|
|
1008
|
+
GEN --> NATIVE["Native token outputs"]
|
|
1009
|
+
GEN --> FIGMA["Figma export and drift report"]
|
|
1010
|
+
BEHAVIOR["Native HTML, React Aria behavior, Floating UI"] --> REACT["@cyberskill/react"]
|
|
1011
|
+
TOKENS --> CSS
|
|
1012
|
+
TOKENS --> THEME
|
|
1013
|
+
CSS --> REACT
|
|
1014
|
+
THEME --> REACT
|
|
1015
|
+
ICONS["@cyberskill/icons"] --> REACT
|
|
1016
|
+
REACT --> COMPAT["@cyberskill/design compatibility"]
|
|
1017
|
+
COMPAT --> PRODUCTS["CyberSkill products"]
|
|
1018
|
+
REACT --> PRODUCTS
|
|
1019
|
+
REGISTRY["Public API and component registry"] --> REACT
|
|
1020
|
+
REGISTRY --> DOCS["Storybook docs and conformance"]
|
|
1021
|
+
REGISTRY --> MIGRATE["Lint rules and codemods"]
|
|
1022
|
+
```
|
|
1023
|
+
|
|
1024
|
+
Locked architecture choices:
|
|
1025
|
+
|
|
1026
|
+
- Open-core distribution.
|
|
1027
|
+
- Apache-2.0 default for reusable code and generic tokens, subject to legal approval.
|
|
1028
|
+
- CyberSkill marks, logos, photography, legal content, and proprietary products remain outside the open license.
|
|
1029
|
+
- React, CSS, and tokens are the year-one production platforms.
|
|
1030
|
+
- Native output remains token-only.
|
|
1031
|
+
- Web Components receive a proof, without a production support promise.
|
|
1032
|
+
- Templates and large brand or legal assets move to separate products.
|
|
1033
|
+
- DTCG is the token authority.
|
|
1034
|
+
- Native HTML handles simple controls.
|
|
1035
|
+
- React Aria behavior primitives cover complex collections and widgets where their contracts fit.
|
|
1036
|
+
- Floating UI supplies popup positioning.
|
|
1037
|
+
- CSS uses named layers and optional root scoping rather than Shadow DOM.
|
|
1038
|
+
- Storybook remains the public documentation site.
|
|
1039
|
+
- Figma receives one-way code-owned exports until ownership and conflict rules support more.
|
|
1040
|
+
|
|
1041
|
+
## 17. Prioritized remediation backlog
|
|
1042
|
+
|
|
1043
|
+
| Workstream | Findings | Rough capacity | Outcome |
|
|
1044
|
+
|---|---|---:|---|
|
|
1045
|
+
| Platform, release, and security | SEC, REL, GOV-001, META, LIC, HOST | 18 engineer-months | Safe source, CI, release, license, and host boundaries |
|
|
1046
|
+
| Tokens, CSS, themes, and brand | TOKEN, THEME, CSS, RESP, CONTENT | 22 engineer-months | One token authority, layered CSS, validated brands and modes |
|
|
1047
|
+
| Behavior, APIs, forms, and data | ARCH, API, FORM, DATA, DATE, COMP, RUNTIME, QR | 34 engineer-months | Shared behavior primitives and corrected component contracts |
|
|
1048
|
+
| Accessibility, locale, and quality | A11Y, I18N, SSR, TYPE, QA | 18 engineer-months | WCAG evidence, global text support, SSR, and enforced quality |
|
|
1049
|
+
| Documentation, design tools, and DX | DOC, DX, DESIGN, ICON, ASSET | 10 engineer-months | Versioned guidance, migration help, asset governance, design exports |
|
|
1050
|
+
| Consumer adoption | ADOPT and compatibility package | 12 engineer-months | Four known consumers migrated without big-bang changes |
|
|
1051
|
+
| Measured future proofs | COV and year-two experiments | 6 engineer-months | Evidence for Web Components, native UI, analytics, and AI tooling |
|
|
1052
|
+
| Total | All work | 120 engineer-months | One year for 10 engineers |
|
|
1053
|
+
|
|
1054
|
+
## 18. Multiphase 12-month roadmap
|
|
1055
|
+
|
|
1056
|
+
### Phase 0 - Verification, baselines, and decisions
|
|
1057
|
+
|
|
1058
|
+
Timing: weeks 1-4. Capacity: 8 engineer-months.
|
|
1059
|
+
|
|
1060
|
+
Objective:
|
|
1061
|
+
|
|
1062
|
+
- Turn this audit into live, machine-readable baselines before structural changes begin.
|
|
1063
|
+
|
|
1064
|
+
Tasks:
|
|
1065
|
+
|
|
1066
|
+
1. Create the component and API registry snapshot.
|
|
1067
|
+
2. Record all four consumer locks, imports, wrappers, tokens, and local classes.
|
|
1068
|
+
3. Confirm Editor data provenance in every consumer.
|
|
1069
|
+
4. Record GitHub organization security settings.
|
|
1070
|
+
5. Complete legal review for Apache-2.0 and the asset exclusions.
|
|
1071
|
+
6. Lock the browser, Node, TypeScript, React, and framework support matrix.
|
|
1072
|
+
7. Run the first manual AT sample on the ten highest-risk widgets.
|
|
1073
|
+
8. Record current package, CSS, JS, font, visual, and release metrics.
|
|
1074
|
+
9. Write decision records for DTCG authority, package topology, behavior libraries, CSS layers, Figma direction, and v1 support.
|
|
1075
|
+
|
|
1076
|
+
Artifacts:
|
|
1077
|
+
|
|
1078
|
+
- Baseline report, API registry, consumer matrix, risk owners, support policy, legal decision, and decision records.
|
|
1079
|
+
|
|
1080
|
+
Acceptance:
|
|
1081
|
+
|
|
1082
|
+
- Every finding has an owner and verification path.
|
|
1083
|
+
- No external-state question is presented as confirmed.
|
|
1084
|
+
- Current metrics can be reproduced from a clean checkout.
|
|
1085
|
+
|
|
1086
|
+
Rollback:
|
|
1087
|
+
|
|
1088
|
+
- Phase 0 changes only metadata and tooling; no consumer behavior changes.
|
|
1089
|
+
|
|
1090
|
+
### Phase 1 - Immediate risk and release remediation
|
|
1091
|
+
|
|
1092
|
+
Timing: months 1-3. Capacity: 16 engineer-months.
|
|
1093
|
+
|
|
1094
|
+
Objective:
|
|
1095
|
+
|
|
1096
|
+
- Remove known security, release, type, mode, SSR, and component blockers.
|
|
1097
|
+
|
|
1098
|
+
Tasks:
|
|
1099
|
+
|
|
1100
|
+
1. Contain Editor HTML and publish a security migration note.
|
|
1101
|
+
2. Fix declarations and add packed consumer type tests.
|
|
1102
|
+
3. Make publish fail closed and bind tag, SHA, version, gates, tarball, and registry digest.
|
|
1103
|
+
4. Remove direct generated pushes and `[skip ci]`.
|
|
1104
|
+
5. Require independent review and release-significant checks.
|
|
1105
|
+
6. Fix lockfile and status metadata.
|
|
1106
|
+
7. Correct system dark and high-contrast combinations.
|
|
1107
|
+
8. Guard TimePicker, Tour, Toolbar, ProgressBar, and ConfidenceMeter.
|
|
1108
|
+
9. Repair FileUpload access and validation.
|
|
1109
|
+
10. Harden Form paths and async submission.
|
|
1110
|
+
11. Add asset rights records and isolate unsafe host execution.
|
|
1111
|
+
12. Publish a v1 security and reliability patch.
|
|
1112
|
+
|
|
1113
|
+
Acceptance:
|
|
1114
|
+
|
|
1115
|
+
- Zero open P0 regressions.
|
|
1116
|
+
- Strict declarations compile under the support matrix.
|
|
1117
|
+
- Failed publishing cannot produce a green release.
|
|
1118
|
+
- System dark and increased contrast pass the component matrix.
|
|
1119
|
+
- Editor untrusted-input tests fail safely.
|
|
1120
|
+
- Required GitHub checks match policy.
|
|
1121
|
+
|
|
1122
|
+
Migration and rollback:
|
|
1123
|
+
|
|
1124
|
+
- Preserve current names and aliases.
|
|
1125
|
+
- Security behavior changes receive explicit notes.
|
|
1126
|
+
- Roll back by pinning the prior v1 package while keeping the patched release available.
|
|
1127
|
+
|
|
1128
|
+
### Phase 2 - Foundations, package boundaries, and quality infrastructure
|
|
1129
|
+
|
|
1130
|
+
Timing: months 2-5. Capacity: 22 engineer-months.
|
|
1131
|
+
|
|
1132
|
+
Objective:
|
|
1133
|
+
|
|
1134
|
+
- Create the target package and source boundaries before broad component changes.
|
|
1135
|
+
|
|
1136
|
+
Tasks:
|
|
1137
|
+
|
|
1138
|
+
1. Introduce workspaces and target public packages.
|
|
1139
|
+
2. Make DTCG authoritative and generate every mirror.
|
|
1140
|
+
3. Build layered CSS entries and retain a deprecated compatibility stylesheet.
|
|
1141
|
+
4. Compile React ESM and declarations with per-component subpaths.
|
|
1142
|
+
5. Add the explicit public API registry.
|
|
1143
|
+
6. Add client and server classification.
|
|
1144
|
+
7. Build shared controllable-state, stable-event, ID, field, focus, and layer primitives.
|
|
1145
|
+
8. Add lint, type, API diff, package, browser, SSR, accessibility, and size gates.
|
|
1146
|
+
9. Move template execution behind its separate product boundary.
|
|
1147
|
+
10. Publish `2.0.0-alpha.*` and the compatibility meta-package.
|
|
1148
|
+
|
|
1149
|
+
Acceptance:
|
|
1150
|
+
|
|
1151
|
+
- Clean-room token generation is byte-deterministic.
|
|
1152
|
+
- Package imports need no consumer JSX transpilation.
|
|
1153
|
+
- Host CSS isolation fixture passes.
|
|
1154
|
+
- Every public export has status and owner.
|
|
1155
|
+
- Alpha can install in Next and Vite without private configuration.
|
|
1156
|
+
|
|
1157
|
+
Migration and rollback:
|
|
1158
|
+
|
|
1159
|
+
- v1 and v2 packages coexist.
|
|
1160
|
+
- `@cyberskill/design` maps old imports to compatible v2 exports.
|
|
1161
|
+
- Consumers can pin back to v1 without data migration.
|
|
1162
|
+
|
|
1163
|
+
### Phase 3 - Core component remediation
|
|
1164
|
+
|
|
1165
|
+
Timing: months 4-8. Capacity: 28 engineer-months.
|
|
1166
|
+
|
|
1167
|
+
Objective:
|
|
1168
|
+
|
|
1169
|
+
- Migrate consumer-used components onto the new behavior and API foundations.
|
|
1170
|
+
|
|
1171
|
+
Execution order:
|
|
1172
|
+
|
|
1173
|
+
1. Buttons, links, inputs, text fields, labels, errors, and selection controls.
|
|
1174
|
+
2. Dialog, AlertDialog, Drawer, Tooltip, Popover, Menu, and related triggers.
|
|
1175
|
+
3. Tabs, Accordion, Breadcrumb, Pagination, Sidebar, Toolbar, and command surfaces.
|
|
1176
|
+
4. Form, FileUpload, InputOTP, TagInput, Mentions, and InlineEdit.
|
|
1177
|
+
5. Feedback, status, progress, toast, empty, loading, offline, stale, and retry states.
|
|
1178
|
+
6. Table, basic DataTable, Image, Carousel, Sortable, Splitter, and QRCode.
|
|
1179
|
+
7. AI components with normalized confidence, attribution, pending, refusal, and human-review states.
|
|
1180
|
+
8. Component documentation and Figma metadata updated in the same change.
|
|
1181
|
+
|
|
1182
|
+
Acceptance:
|
|
1183
|
+
|
|
1184
|
+
- Every consumer-used component is Stable or has a documented compatibility replacement.
|
|
1185
|
+
- Stable components pass ref, prop, controlled-state, SSR, accessibility, content, theme, and locale contracts.
|
|
1186
|
+
- No component uses private document behavior when a shared primitive exists.
|
|
1187
|
+
|
|
1188
|
+
Migration and rollback:
|
|
1189
|
+
|
|
1190
|
+
- Component-level codemods and deprecated aliases.
|
|
1191
|
+
- Compatibility CSS remains available.
|
|
1192
|
+
- Each migration can be reverted independently.
|
|
1193
|
+
|
|
1194
|
+
### Phase 4 - Advanced components, global support, and multi-brand
|
|
1195
|
+
|
|
1196
|
+
Timing: months 7-10. Capacity: 20 engineer-months.
|
|
1197
|
+
|
|
1198
|
+
Objective:
|
|
1199
|
+
|
|
1200
|
+
- Finish complex behavior and prove global and multi-brand operation.
|
|
1201
|
+
|
|
1202
|
+
Tasks:
|
|
1203
|
+
|
|
1204
|
+
1. Rebuild Tree, Menubar, CommandPalette, Cascader, TreeSelect, Calendar, DatePicker, Rating, advanced grid, and Tour.
|
|
1205
|
+
2. Add full RTL, Arabic reference fixtures, pseudo-locales, script fallback policy, and IME coverage.
|
|
1206
|
+
3. Add brand, contrast, density, and motion axes.
|
|
1207
|
+
4. Add validated CyberSkill and neutral reference themes.
|
|
1208
|
+
5. Define advanced form, data, shell, permission, and administration patterns without placing product logic in core.
|
|
1209
|
+
6. Run the Web Components proof for one primitive and one form control.
|
|
1210
|
+
7. Run the native-component feasibility study while retaining token-only support.
|
|
1211
|
+
8. Complete manual AT evidence for every Stable high-risk component.
|
|
1212
|
+
|
|
1213
|
+
Acceptance:
|
|
1214
|
+
|
|
1215
|
+
- No unclassified public export remains.
|
|
1216
|
+
- Advanced components that miss the bar remain Beta rather than being called Stable.
|
|
1217
|
+
- Two brands, both directions, three contrast or color modes, and two densities pass validation.
|
|
1218
|
+
- Web Components and native studies end with measured go or no-go evidence.
|
|
1219
|
+
|
|
1220
|
+
### Phase 5 - Consumer migration, enforcement, and deprecation
|
|
1221
|
+
|
|
1222
|
+
Timing: months 9-12. Capacity: 18 engineer-months.
|
|
1223
|
+
|
|
1224
|
+
Objective:
|
|
1225
|
+
|
|
1226
|
+
- Move known products to v2 with controlled compatibility and rollback.
|
|
1227
|
+
|
|
1228
|
+
Order:
|
|
1229
|
+
|
|
1230
|
+
1. SachViet CSS canary.
|
|
1231
|
+
2. Finance React and Next canary.
|
|
1232
|
+
3. Strategem deep-import removal.
|
|
1233
|
+
4. Landing Page wrapper and local-class migration.
|
|
1234
|
+
5. Shared lint and conformance enforcement.
|
|
1235
|
+
6. `2.0.0-rc.*`, then GA after all consumer gates.
|
|
1236
|
+
7. Begin six-month deprecation windows and v1 security-only support.
|
|
1237
|
+
|
|
1238
|
+
Acceptance:
|
|
1239
|
+
|
|
1240
|
+
- All four known consumers use exact supported package versions.
|
|
1241
|
+
- Zero deep source imports and zero undefined design tokens remain.
|
|
1242
|
+
- Every retained wrapper has an owner and product-specific reason.
|
|
1243
|
+
- Product visual, type, accessibility, and smoke checks pass.
|
|
1244
|
+
- Rollback to the last v1 or v2 release is documented and tested.
|
|
1245
|
+
|
|
1246
|
+
### Phase 6 - Optimization, analytics, and operating maturity
|
|
1247
|
+
|
|
1248
|
+
Timing: months 11-12. Capacity: 8 engineer-months.
|
|
1249
|
+
|
|
1250
|
+
Objective:
|
|
1251
|
+
|
|
1252
|
+
- Ratchet performance, adoption, security, and governance after v2 is in use.
|
|
1253
|
+
|
|
1254
|
+
Tasks:
|
|
1255
|
+
|
|
1256
|
+
1. Enforce final package and runtime budgets.
|
|
1257
|
+
2. Publish the repository-only adoption dashboard.
|
|
1258
|
+
3. Add quarterly maturity and accessibility reviews.
|
|
1259
|
+
4. Add SBOM, OpenSSF, provenance, and policy reporting.
|
|
1260
|
+
5. Publish the read-only component and migration assistant from versioned metadata.
|
|
1261
|
+
6. Review Web Components, native, Figma, and advanced-pattern evidence for year two.
|
|
1262
|
+
7. Set next-year investment based on real usage and support load.
|
|
1263
|
+
|
|
1264
|
+
Acceptance:
|
|
1265
|
+
|
|
1266
|
+
- Metrics are generated automatically.
|
|
1267
|
+
- No exception lacks an owner, expiry, and linked issue.
|
|
1268
|
+
- Quarterly review and incident processes are operating.
|
|
1269
|
+
- Year-two proposals contain consumer evidence and cost estimates.
|
|
1270
|
+
|
|
1271
|
+
### Quarterly milestones
|
|
1272
|
+
|
|
1273
|
+
| Quarter | Capacity | Milestone |
|
|
1274
|
+
|---|---:|---|
|
|
1275
|
+
| Q1 | 30 engineer-months | Baselines complete, P0 issues contained, release and type gates safe |
|
|
1276
|
+
| Q2 | 30 engineer-months | Canonical tokens, compiled packages, CSS layers, and alpha consumers |
|
|
1277
|
+
| Q3 | 30 engineer-months | Core component contracts migrated and global or brand foundations proven |
|
|
1278
|
+
| Q4 | 30 engineer-months | Four consumers migrated, v2 GA, budgets and governance operating |
|
|
1279
|
+
|
|
1280
|
+
Critical path:
|
|
1281
|
+
|
|
1282
|
+
```text
|
|
1283
|
+
license and support decisions
|
|
1284
|
+
-> API and token authority
|
|
1285
|
+
-> compiled packages and CSS layers
|
|
1286
|
+
-> shared behavior primitives
|
|
1287
|
+
-> component migration
|
|
1288
|
+
-> consumer migration
|
|
1289
|
+
-> v2 GA and compatibility retirement
|
|
1290
|
+
```
|
|
1291
|
+
|
|
1292
|
+
Major decision gates:
|
|
1293
|
+
|
|
1294
|
+
- Gate A, week 2: legal, platform support, and package topology.
|
|
1295
|
+
- Gate B, week 4: DTCG round trip, compiled React, and overlay proof.
|
|
1296
|
+
- Gate C, end of Q1: release safety and v1 patch accepted.
|
|
1297
|
+
- Gate D, end of Q2: v2 alpha accepted in Finance and SachViet fixtures.
|
|
1298
|
+
- Gate E, end of Q3: Stable component bar and multi-brand proof accepted.
|
|
1299
|
+
- Gate F, Q4: four-consumer migration and v2 GA approval.
|
|
1300
|
+
|
|
1301
|
+
## 19. Staffing and ownership for 10 engineers
|
|
1302
|
+
|
|
1303
|
+
| Team | Engineers | Durable ownership |
|
|
1304
|
+
|---|---:|---|
|
|
1305
|
+
| Foundations | 2 | DTCG, CSS, themes, brand, icons, fonts, asset contracts |
|
|
1306
|
+
| Components | 3 | Behavior primitives, APIs, forms, overlays, navigation, data |
|
|
1307
|
+
| Platform and quality | 2 | Build, package, release, security, test infrastructure, performance |
|
|
1308
|
+
| Adoption and documentation | 2 | Docs, codemods, lint rules, consumer migrations, design-tool metadata |
|
|
1309
|
+
| Accessibility and localization | 1 | WCAG contracts, AT evidence, RTL, locale, IME, content stress |
|
|
1310
|
+
|
|
1311
|
+
Part-time partners outside the 10-engineer count:
|
|
1312
|
+
|
|
1313
|
+
- Product design owner.
|
|
1314
|
+
- Content and localization reviewer.
|
|
1315
|
+
- Security reviewer.
|
|
1316
|
+
- Legal counsel.
|
|
1317
|
+
- Consumer-team representatives.
|
|
1318
|
+
|
|
1319
|
+
Decision rights:
|
|
1320
|
+
|
|
1321
|
+
- Public API changes require component, platform, and adoption approval.
|
|
1322
|
+
- High-risk interactive changes require accessibility approval.
|
|
1323
|
+
- Token changes require foundations and design approval.
|
|
1324
|
+
- Release changes require platform and one independent maintainer.
|
|
1325
|
+
- Security exceptions require an owner, expiry, and founder-visible record.
|
|
1326
|
+
|
|
1327
|
+
Service levels:
|
|
1328
|
+
|
|
1329
|
+
- Security or release P0: triage within one business day.
|
|
1330
|
+
- Consumer-blocking defect: triage within two business days.
|
|
1331
|
+
- General request: classification within five business days.
|
|
1332
|
+
- Deprecation questions: response within five business days.
|
|
1333
|
+
- Stable component regression: patch target within one release cycle.
|
|
1334
|
+
|
|
1335
|
+
## 20. Migration and adoption strategy
|
|
1336
|
+
|
|
1337
|
+
Consumer starting points:
|
|
1338
|
+
|
|
1339
|
+
| Consumer | Current evidence | Migration route |
|
|
1340
|
+
|---|---|---|
|
|
1341
|
+
| SachViet | Registry `^1.0.0`, lock at 1.0.0, CSS-only use | First CSS and token canary |
|
|
1342
|
+
| Finance | Old Git commit, Next 16, React 19, nine imports, unsupported token names | First React and SSR canary |
|
|
1343
|
+
| Strategem | Raw JSX deep imports, 15 imports, local classes and tokens | Codemod plus compatibility adapter |
|
|
1344
|
+
| Landing Page | Pinned commit, five wrappers, hundreds of token and class references | Pattern classification and staged visual migration |
|
|
1345
|
+
|
|
1346
|
+
Migration controls:
|
|
1347
|
+
|
|
1348
|
+
- Lock exact package versions during each canary.
|
|
1349
|
+
- Run a static scanner before modifying a consumer.
|
|
1350
|
+
- Preserve product-specific wrappers that express real product behavior.
|
|
1351
|
+
- Upstream shared patterns only after evidence from more than one consumer.
|
|
1352
|
+
- Provide import, prop, event, token, and CSS codemods.
|
|
1353
|
+
- Keep v1 compatibility and old CSS available during the migration window.
|
|
1354
|
+
- Test rollback before each production adoption.
|
|
1355
|
+
- Track unsupported tokens and deep imports as failing conformance checks.
|
|
1356
|
+
- Do not collect user content, personal data, payment data, or application state.
|
|
1357
|
+
|
|
1358
|
+
## 21. Metrics, budgets, and definitions of success
|
|
1359
|
+
|
|
1360
|
+
### Quality and API
|
|
1361
|
+
|
|
1362
|
+
- 100 percent of published declarations compile under the support matrix.
|
|
1363
|
+
- 100 percent of exports have owner, status, package path, client or server classification, and migration metadata.
|
|
1364
|
+
- Zero unresolved Critical defects at release.
|
|
1365
|
+
- Zero unresolved High defects without an approved exception under 30 days.
|
|
1366
|
+
- Zero accidental API additions.
|
|
1367
|
+
|
|
1368
|
+
### Accessibility and localization
|
|
1369
|
+
|
|
1370
|
+
- 100 percent of Stable interactive components pass keyboard contracts.
|
|
1371
|
+
- 100 percent of high-risk Stable components have current manual AT evidence.
|
|
1372
|
+
- Every Stable component passes required mode, direction, zoom, reflow, and text-spacing tests.
|
|
1373
|
+
- Vietnamese, English, Arabic reference, and pseudo-locales pass content fixtures.
|
|
1374
|
+
- Currency, time zone, and region never derive implicitly from UI language.
|
|
1375
|
+
|
|
1376
|
+
### Distribution and performance
|
|
1377
|
+
|
|
1378
|
+
Initial GA budgets:
|
|
1379
|
+
|
|
1380
|
+
- `@cyberskill/react` compressed tarball below 2 MB.
|
|
1381
|
+
- Full React entry below 45 KB gzip.
|
|
1382
|
+
- Typical single-component marginal JS below 8 KB gzip.
|
|
1383
|
+
- Core component CSS below 35 KB gzip.
|
|
1384
|
+
- Token CSS below 10 KB gzip.
|
|
1385
|
+
- Default first-view font transfer below 200 KB.
|
|
1386
|
+
- No unknown files in deploy output.
|
|
1387
|
+
- One tested tarball digest from build through registry.
|
|
1388
|
+
|
|
1389
|
+
Budgets are ratcheted after package splitting. Exceptions need measurement, owner, expiry, and product reason.
|
|
1390
|
+
|
|
1391
|
+
### Release and security
|
|
1392
|
+
|
|
1393
|
+
- 100 percent of releases bind tag, version, commit, gates, tarball digest, registry integrity, SBOM, and provenance.
|
|
1394
|
+
- Zero high production vulnerabilities.
|
|
1395
|
+
- High development vulnerabilities require isolation, owner, and time-bounded exception.
|
|
1396
|
+
- All Actions and release tools use immutable versions.
|
|
1397
|
+
- No terminal release action uses soft success.
|
|
1398
|
+
|
|
1399
|
+
### Adoption and documentation
|
|
1400
|
+
|
|
1401
|
+
- All four known consumers on supported v2 versions by year end.
|
|
1402
|
+
- Zero raw source imports and zero undefined tokens.
|
|
1403
|
+
- Every Stable component has complete guidance and compiled examples.
|
|
1404
|
+
- Every breaking or deprecated API has migration help.
|
|
1405
|
+
- Median new-project setup under 30 minutes.
|
|
1406
|
+
- Median supported-version upgrade under one engineer-day for a conforming consumer.
|
|
1407
|
+
|
|
1408
|
+
## 22. Open questions and required investigations
|
|
1409
|
+
|
|
1410
|
+
| Open question | Missing evidence | Verification owner and method |
|
|
1411
|
+
|---|---|---|
|
|
1412
|
+
| Does any product pass untrusted HTML to Editor? | Runtime data provenance | Security scans all imports and data paths in week 1 |
|
|
1413
|
+
| Are more private consumers present? | Organization-wide repository search | Adoption runs GitHub and workspace dependency census |
|
|
1414
|
+
| Which organization security controls are enabled? | GitHub organization settings | Platform records Advanced Security, secret scanning, and rulesets |
|
|
1415
|
+
| Are font and image rights complete? | License files and acquisition records | Legal and foundations build asset manifest |
|
|
1416
|
+
| Is the Figma file real and maintained? | File access and actual node IDs | Design owner validates file, plan, IDs, and ownership |
|
|
1417
|
+
| Which components are used at runtime? | Import and route-level use | Static scanner plus consumer-team review |
|
|
1418
|
+
| Which browser versions are contractually required? | Client or partner obligations | Product owner validates Phase 0 default matrix |
|
|
1419
|
+
| Which sub-brands are planned? | Brand roadmap | Founder and design provide named reference brands |
|
|
1420
|
+
| What are real package and render costs in products? | Production build measurements | Platform collects canary bundle and runtime traces |
|
|
1421
|
+
| Which manual AT resources are available? | Tester availability and devices | Accessibility lead books internal or external review |
|
|
1422
|
+
| Does legacy browser loading have active consumers? | Runtime or source usage | Adoption scans imports and hosted pages |
|
|
1423
|
+
| Which advanced components deserve Stable status? | Product usage and support demand | Component council applies maturity criteria |
|
|
1424
|
+
|
|
1425
|
+
## 23. Quick wins that preserve the target architecture
|
|
1426
|
+
|
|
1427
|
+
1. Fix the lockfile root version and gate it.
|
|
1428
|
+
2. Change the Code Connect label from 99 to 105 only after confirming current inventory.
|
|
1429
|
+
3. Add a strict packed declaration test.
|
|
1430
|
+
4. Make release errors fail closed.
|
|
1431
|
+
5. Require exact version-tag matching.
|
|
1432
|
+
6. Remove direct generated pushes.
|
|
1433
|
+
7. Fix system-dark and increased-contrast selectors.
|
|
1434
|
+
8. Guard invalid TimePicker steps.
|
|
1435
|
+
9. Make Tour SSR-safe.
|
|
1436
|
+
10. Correct Toolbar overflow partitioning.
|
|
1437
|
+
11. Normalize ProgressBar and ConfidenceMeter.
|
|
1438
|
+
12. Add IME composition guards.
|
|
1439
|
+
13. Add button `type="button"` defaults.
|
|
1440
|
+
14. Add QRCode quiet zone.
|
|
1441
|
+
15. Mark synthetic Figma mappings as offline placeholders.
|
|
1442
|
+
16. Add `sideEffects` metadata for CSS.
|
|
1443
|
+
17. Add a host CSS-isolation fixture.
|
|
1444
|
+
18. Publish a current consumer-version matrix.
|
|
1445
|
+
|
|
1446
|
+
## 24. Ambitious opportunities for year two and beyond
|
|
1447
|
+
|
|
1448
|
+
| Opportunity | Value | Dependency | Main risk | Recommendation |
|
|
1449
|
+
|---|---|---|---|---|
|
|
1450
|
+
| Production Web Components | Framework-neutral delivery | Year-one proof and owner capacity | Second renderer doubles test and support work | Proceed only with measured demand |
|
|
1451
|
+
| Native iOS and Android UI | Shared brand and behavior across products | Stable tokens and native product roadmap | Platform divergence | Start with a small foundation set |
|
|
1452
|
+
| Advanced data visualization | Shared charts and accessibility | Data grammar, tokens, product requirements | Product-specific complexity | Separate package |
|
|
1453
|
+
| Enterprise grid | Large data workflows | Stable collection, virtualization, and keyboard primitives | Large maintenance burden | Partner or wrap a proven engine |
|
|
1454
|
+
| Form builder | Faster administration products | Stable fields, schemas, validation, and i18n | Product logic entering core | Separate product layer |
|
|
1455
|
+
| White-label self-service | Faster tenant branding | Validated brand contracts | Inaccessible custom themes | Add guarded theme compiler |
|
|
1456
|
+
| Design conformance tooling | Detect drift in products | API and token registry | False positives | Begin with static lint |
|
|
1457
|
+
| Privacy-safe adoption analytics | Better investment decisions | Repository scanner and privacy policy | Content or user-data capture | Keep runtime telemetry opt-in |
|
|
1458
|
+
| AI component assistant | Faster discovery and migration | Versioned machine-readable metadata | Incorrect generated advice | Read-only answers with source links |
|
|
1459
|
+
| Visual-diff intelligence | Faster review | Stable baselines and deterministic rendering | Hidden false negatives | Human-reviewed assistance |
|
|
1460
|
+
| Bidirectional design sync | Faster design handoff | Clear value ownership and conflict rules | Silent overwrite and drift | Remain deferred |
|
|
1461
|
+
| Pattern libraries | Shared admin, billing, permission, and shell flows | Consumer evidence and product ownership | Core package bloat | Separate pattern packages |
|
|
1462
|
+
|
|
1463
|
+
## 25. Final traceability matrix
|
|
1464
|
+
|
|
1465
|
+
| Initiative | Findings | Phase | Acceptance condition | Verification |
|
|
1466
|
+
|---|---|---:|---|---|
|
|
1467
|
+
| Security containment | CDS-SEC-001, CDS-SEC-002, CDS-FORM-001 | 1-2 | Untrusted content fails safely; compiler isolated | Payload, CSP, Trusted Types, form security |
|
|
1468
|
+
| Release safety | CDS-SEC-003, CDS-REL-001, CDS-REL-002, CDS-REL-003, CDS-GOV-001, CDS-META-001, CDS-LIC-001 | 0-2 | Exact-SHA fail-closed releases under approved rights | GitHub policy, negative release tests, SBOM, registry digest |
|
|
1469
|
+
| Public API and distribution | CDS-TYPE-001, CDS-TYPE-002, CDS-TYPE-003, CDS-API-001, CDS-PKG-001, CDS-PKG-002, CDS-PKG-003, CDS-LEGACY-001, CDS-HOST-001, CDS-SUPPORT-001, CDS-PERF-001 | 1-3 | Compiled typed packages, explicit exports, bounded artifacts | Packed consumers, SSR, bundlers, size reports |
|
|
1470
|
+
| API behavior foundations | CDS-API-002, CDS-API-003, CDS-ARCH-001, CDS-RUNTIME-001 | 2-3 | Shared ref, state, event, focus, layer, and lifecycle contracts | Type, interaction, nested-overlay, Strict Mode tests |
|
|
1471
|
+
| Token and CSS architecture | CDS-TOKEN-001, CDS-TOKEN-002, CDS-THEME-001, CDS-THEME-002, CDS-CSS-001, CDS-RESP-001, CDS-RESP-002, CDS-CONTENT-001 | 1-4 | Canonical DTCG, layered CSS, validated brands and modes | Clean generation, host isolation, visual and contrast matrices |
|
|
1472
|
+
| Accessibility remediation | CDS-A11Y-001, CDS-A11Y-002, CDS-A11Y-003, CDS-A11Y-004, CDS-A11Y-005, CDS-A11Y-006, CDS-A11Y-007 | 1-4 | Stable components meet WCAG 2.2 AA evidence bar | Browser automation and manual AT records |
|
|
1473
|
+
| Global text and locale | CDS-I18N-001, CDS-I18N-002, CDS-I18N-003, CDS-I18N-004, CDS-I18N-005 | 1-4 | Locale-independent formatting, RTL, IME, and global script policy | Locale, direction, composition, SSR, and content tests |
|
|
1474
|
+
| Component reliability | CDS-DATA-001, CDS-DATE-001, CDS-SSR-001, CDS-SSR-002, CDS-COMP-001, CDS-COMP-002, CDS-COMP-003, CDS-QR-001 | 1-4 | Invalid inputs fail safely and complex state is specified | Boundary, SSR, hydration, data, date, and scan tests |
|
|
1475
|
+
| Quality and documentation | CDS-QA-001, CDS-QA-002, CDS-QA-003, CDS-DOC-001, CDS-DX-001, CDS-DESIGN-001, CDS-GOV-002 | 0-6 | One enforceable evidence system and current guidance | Clean-checkout verify, docs compilation, policy and mapping checks |
|
|
1476
|
+
| Assets and icons | CDS-ICON-001, CDS-ASSET-001 | 1-4 | Governed, licensed, optimized, directional assets | Manifest, legal, size, RTL, and visual checks |
|
|
1477
|
+
| Consumer adoption | CDS-ADOPT-001, CDS-ADOPT-002, CDS-ADOPT-003, CDS-COV-001 | 0-6 | Four consumers migrated and every export classified | Consumer CI, scanners, dashboards, maturity reviews |
|
|
1478
|
+
|
|
1479
|
+
## Assumptions and fixed defaults
|
|
1480
|
+
|
|
1481
|
+
- The plan uses the user's selected open-core model.
|
|
1482
|
+
- The year-one production commitment is React web, CSS, and tokens.
|
|
1483
|
+
- Templates and large brand or legal assets become separate products.
|
|
1484
|
+
- Apache-2.0 is the default code license pending legal approval.
|
|
1485
|
+
- CyberSkill trademarks and proprietary content remain excluded.
|
|
1486
|
+
- React 18 and 19 remain supported through the migration.
|
|
1487
|
+
- Web Components and native UI remain reversible experiments.
|
|
1488
|
+
- WCAG 2.2 AA is the release target.
|
|
1489
|
+
- The known consumer set is Finance, SachViet, Landing Page, and Strategem until the Phase 0 census finds more.
|
|
1490
|
+
- No implementation begins before the CyberOS task author, audit, backlog, and HITL gates convert this plan into executable work.
|