{ "account_id": "public", "areas": [ { "area": "foundations", "coverage_pct": 100.0, "criteria": [ { "assessor_contradiction_warnings": [], "assessor_rationale": "The Figma 2.0.3 file (full-file variable coverage, 703 resolved variables, 447 alias references) and the pinned style-dictionary source both show a layered raw -> alias/reference -> semantic/component token architecture. palette-values.ts holds raw hex primitives (colorGrey50 etc.); token-names.ts defines a ReferenceTokenName alias layer (colorPrimary/colorNeutral/colorError/etc. scales); one-theme/colors.ts and core token categories build semantic/component tokens that reference those aliases (e.g. colorBackgroundButtonPrimaryDefault: '{colorPrimary600}'); core/index.ts and one-theme/index.ts operationally assemble all ten token categories (color-palette, color-charts, color-severity, colors, typography, borders, motion, sizes, spacing, shadows) plus eight component-scoped contexts into an exported, built theme. The design-tokens documentation confirms the same CTI (Category>Type>Item>State) taxonomy is normatively documented with a themeable/light/dark matrix for 407 color tokens. A snapshot test (design-tokens.test.ts) operationally validates that the generated classic and visual-refresh token JSON (and its generated JSON schema) matches expectation, confirming the graph is actually built and shape-checked, not just described.", "binding_mappings": [], "citation_conflict": false, "citations": [ { "evidence_authority": "observed", "locator": "lines 4-90", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 99-121", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 5-25", "path": "files/style-dictionary/core/palette-values.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/core/palette-values.ts" }, { "evidence_authority": "observed", "locator": "lines 4-15", "path": "files/style-dictionary/utils/token-names.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/utils/token-names.ts" }, { "evidence_authority": "observed", "locator": "lines 62-68", "path": "files/style-dictionary/one-theme/colors.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/one-theme/colors.ts" }, { "evidence_authority": "observed", "locator": "lines 24-35", "path": "files/style-dictionary/core/index.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/core/index.ts" }, { "evidence_authority": "normative", "locator": "lines 15-36", "path": "content.txt", "snapshot_id": "d0941996c36f90b26d7d", "source_id": "cloudscape-design-tokens-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/design-tokens/index.html.md" }, { "evidence_authority": "observed", "locator": "lines 7-16", "path": "files/src/__tests__/snapshot-tests/design-tokens.test.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/__tests__/snapshot-tests/design-tokens.test.ts" } ], "contradiction_warnings": [], "criterion_id": "token_taxonomy", "critical": true, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 10, "declared": 10 }, "exact_agreement_count": 3, "finding": { "impact": "Teams can rely on a stable, documented CTI naming/alias structure for building and theming products, but cannot yet cite an automated cross-consumer measurement of token graph health (e.g. drift or unused-alias detection across downstream packages).", "what_broke": "No confirmed break.", "what_to_change": "Publish or surface evidence of cross-consumer token validation (e.g. a token-graph linter run against downstream theming-build/theming-runtime consumers, or adoption telemetry) to support a score of 4.", "why": "Evidence shows the layered token architecture is built and shape-tested within this repository, but no evidence packet source demonstrates measurement or maintenance of the graph across multiple external consumers." }, "generalizability": "system-wide", "label": "Token taxonomy and semantics", "median_score": 3.0, "next_anchor": "The token graph is validated, measured, and maintained across consumers", "next_anchor_gap": "Score 4 requires the token graph to be validated, measured, and maintained across consumers; the only automated check observed is a same-repo snapshot test comparing two internal themes (classic, visual-refresh) to a stored snapshot \u2014 there is no evidence of cross-consumer measurement, drift detection, or maintained ownership metrics for the token graph itself.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "The Figma 2.0.3 file (full-file variable coverage, 703 resolved variables, 447 alias references) and the pinned style-dictionary source both show a layered raw -> alias/reference -> semantic/component token architecture. palette-values.ts holds raw hex primitives (colorGrey50 etc.); token-names.ts defines a ReferenceTokenName alias layer (colorPrimary/colorNeutral/colorError/etc. scales); one-theme/colors.ts and core token categories build semantic/component tokens that reference those aliases (e.g. colorBackgroundButtonPrimaryDefault: '{colorPrimary600}'); core/index.ts and one-theme/index.ts operationally assemble all ten token categories (color-palette, color-charts, color-severity, colors, typography, borders, motion, sizes, spacing, shadows) plus eight component-scoped contexts into an exported, built theme. The design-tokens documentation confirms the same CTI (Category>Type>Item>State) taxonomy is normatively documented with a themeable/light/dark matrix for 407 color tokens. A snapshot test (design-tokens.test.ts) operationally validates that the generated classic and visual-refresh token JSON (and its generated JSON schema) matches expectation, confirming the graph is actually built and shape-checked, not just described.", "raw_scores": [ 3, 3, 3 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "foundation", "generalizability": "system-wide", "limitations": "Evidence covers the foundation/token-generation layer and a full-file Figma variable export; it does not verify how individual component source files consume these tokens, nor does it cover internal test results referenced in governance.", "subjects": [ "style-dictionary token pipeline (core, one-theme)", "Figma 2.0.3 color-palette/color-variable/typography/borders/spacing/sizes/color-charts-palette collections", "design tokens documentation" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Semantic layers and aliases are comprehensive and operational", "verification_depth": "test-defined", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": true } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Core low-level primitives \u2014 spacing (4px base unit, 10 Figma variables plus a documented scale), borders/radius (40 Figma variables spanning alert, badge, button, focus-ring, code-editor), shadows (14 variables), sizes (11 variables), icon sizing (5 variables), motion, and responsive breakpoints (breakpoints.scss defines an 8-step scale with up/down mixins) \u2014 are documented in normative docs and implemented as discrete, reusable style-dictionary modules (borders.ts, sizes.ts, spacing.ts, shadows.ts, motion.ts) that are consumed through a single shared builder loop (core/index.ts tokenCategories) rather than duplicated per component. The spacing documentation directly cites consistent reuse of the same primitive scale across many unrelated component types (button, form field, container, tabs, grid, select, app layout, split panel, popover, cards, tutorial panel), and the sampled deep components (Toggle, Cards, Flashbar, Form field, Modal, Table) each bind to primitive variables from the same borders/sizes/spacing collections in Figma. This is direct, non-prose evidence of both comprehensiveness and consistent consumption via a cited shared mechanism, meeting anchor 3.", "binding_mappings": [], "citation_conflict": false, "citations": [ { "evidence_authority": "observed", "locator": "lines 31-63", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 144-165", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 188-198", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 24-35", "path": "files/style-dictionary/core/index.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/core/index.ts" }, { "evidence_authority": "observed", "locator": "lines 6-18", "path": "files/src/internal/styles/foundation/breakpoints.scss", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/internal/styles/foundation/breakpoints.scss" }, { "evidence_authority": "normative", "locator": "lines 29-45", "path": "content.txt", "snapshot_id": "3bf3ad465032403cabc9", "source_id": "cloudscape-spacing-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/spacing/index.html.md" } ], "contradiction_warnings": [], "criterion_id": "primitives", "critical": false, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 10, "declared": 10 }, "exact_agreement_count": 3, "finding": { "impact": "Product and component authors have a documented, reusable primitive layer rather than ad hoc values, reducing visual drift risk across surfaces, but there is no public signal of whether adoption is enforced or measured.", "what_broke": "No confirmed break", "what_to_change": "Surface public evidence of primitive-adoption enforcement (e.g., stylelint rules against raw px/hex values, or a published usage audit) to support anchor 4.", "why": "Evidence shows the primitive set is centrally defined and imported once for the whole token build, and normative docs plus bound-variable data confirm reuse across varied component types." }, "generalizability": "system-wide", "label": "Primitive completeness", "median_score": 3.0, "next_anchor": "Primitive coverage and adoption are measured and governed", "next_anchor_gap": "Anchor 4 requires measured and governed primitive coverage/adoption (e.g., lint rules enforcing token-only styling, or a published adoption metric). No such measurement or governance artifact is present in the evidence packet.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Core low-level primitives \u2014 spacing (4px base unit, 10 Figma variables plus a documented scale), borders/radius (40 Figma variables spanning alert, badge, button, focus-ring, code-editor), shadows (14 variables), sizes (11 variables), icon sizing (5 variables), motion, and responsive breakpoints (breakpoints.scss defines an 8-step scale with up/down mixins) \u2014 are documented in normative docs and implemented as discrete, reusable style-dictionary modules (borders.ts, sizes.ts, spacing.ts, shadows.ts, motion.ts) that are consumed through a single shared builder loop (core/index.ts tokenCategories) rather than duplicated per component. The spacing documentation directly cites consistent reuse of the same primitive scale across many unrelated component types (button, form field, container, tabs, grid, select, app layout, split panel, popover, cards, tutorial panel), and the sampled deep components (Toggle, Cards, Flashbar, Form field, Modal, Table) each bind to primitive variables from the same borders/sizes/spacing collections in Figma. This is direct, non-prose evidence of both comprehensiveness and consistent consumption via a cited shared mechanism, meeting anchor 3.", "raw_scores": [ 3, 3, 3 ], "requires_review": false, "review_status": "approve", "scope": { "basis": "foundation", "generalizability": "system-wide", "limitations": "Cross-component consumption is directly observed only for the 10 resolved deep-component samples and the components explicitly named in normative spacing/breakpoint documentation; consumption by the remainder of the ~150+ catalog components is not individually verified in this packet.", "subjects": [ "Spacing, border/radius, shadow, size, motion, and breakpoint primitives in the pinned Figma 2.0.3 file and @cloudscape-design/components style-dictionary" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Primitives are comprehensive and consistently consumed", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Color mode (light/dark), density mode (comfortable/compact), and motion mode (default/disabled) are implemented as first-class, systematic dimensions in the style-dictionary architecture: utils/modes.ts defines createColorMode/createDensityMode/createMotionMode, and core/index.ts and one-theme/index.ts apply this shared `modes` array uniformly to every token category (color-palette, colors, typography, borders, motion, sizes, spacing, shadows) and to every visual context (compact-table, top-navigation, header, flashbar, alert, app-layout-toolbar) via addTokens/addContext calls in a single loop, not per-component special-casing. The Figma file independently confirms a Light/Dark mode dimension on the color-variable and color-charts-palette collections. Density is concretely evidenced in code (one-theme/spacing.ts: spaceFieldVertical comfortable/compact values). Responsive adaptation is documented as a systematic element-query mechanism tied to a defined breakpoint scale (breakpoints.scss), and theming/visual-context overrides are documented with a working code example (theming-docs). Accessibility guidance is extensive and cites concrete per-component practices (Table row-header semantics, Form field labeling, App layout heading order, Tabs focus styling). This constitutes direct, non-prose evidence that modes are systematically threaded through the token architecture and components, meeting anchor 3.", "binding_mappings": [], "citation_conflict": false, "citations": [ { "evidence_authority": "observed", "locator": "lines 3-25", "path": "files/style-dictionary/utils/modes.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/utils/modes.ts" }, { "evidence_authority": "observed", "locator": "lines 18-22", "path": "files/style-dictionary/core/index.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/core/index.ts" }, { "evidence_authority": "observed", "locator": "lines 9-17", "path": "files/style-dictionary/one-theme/spacing.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/one-theme/spacing.ts" }, { "evidence_authority": "observed", "locator": "lines 16-30", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "normative", "locator": "lines 41-54", "path": "content.txt", "snapshot_id": "ae35a7bd403e54a14bcb", "source_id": "cloudscape-theming-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/theming/index.html.md" }, { "evidence_authority": "normative", "locator": "lines 7-18", "path": "content.txt", "snapshot_id": "ec87dab9e2768f5dba72", "source_id": "cloudscape-visual-modes-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/visual-modes/index.html.md" }, { "evidence_authority": "normative", "locator": "lines 7-10", "path": "content.txt", "snapshot_id": "d6ffc1c5decf6c9a61b4", "source_id": "cloudscape-responsive-docs", "source_url": "https://cloudscape.design/get-started/dev-guides/responsive-development/index.html.md" }, { "evidence_authority": "normative", "locator": "lines 61-69", "path": "content.txt", "snapshot_id": "61084b9599fcd2c92b19", "source_id": "cloudscape-accessibility-docs", "source_url": "https://cloudscape.design/foundation/core-principles/accessibility/Building-accessible-experiences/index.html.md" } ], "contradiction_warnings": [], "criterion_id": "modes", "critical": true, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 10, "declared": 10 }, "exact_agreement_count": 3, "finding": { "impact": "Applications get systematic, low-effort support for dark mode, density, reduced motion, responsive layout, and accessible interaction patterns because these are wired into the shared token build rather than reimplemented per component.", "what_broke": "No confirmed break", "what_to_change": "Publish evidence of automated, continuous validation of mode combinations (e.g., visual regression across dark/compact/RTL permutations) across the packages that consume these tokens to support anchor 4.", "why": "The mode dimensions are implemented once in utils/modes.ts and consumed uniformly by both open-source theme builders, and are corroborated by the Figma file's own Light/Dark variable modes." }, "generalizability": "system-wide", "label": "Modes and adaptation", "median_score": 3.0, "next_anchor": "Mode compatibility is continuously validated across supported consumers", "next_anchor_gap": "Anchor 4 requires mode compatibility to be continuously validated across supported consumers. The only automated artifact observed is a two-theme snapshot test for token JSON output (design-tokens.test.ts); there is no evidence of automated cross-mode (e.g., dark+compact+RTL) regression testing or validation across multiple downstream consumer packages.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Color mode (light/dark), density mode (comfortable/compact), and motion mode (default/disabled) are implemented as first-class, systematic dimensions in the style-dictionary architecture: utils/modes.ts defines createColorMode/createDensityMode/createMotionMode, and core/index.ts and one-theme/index.ts apply this shared `modes` array uniformly to every token category (color-palette, colors, typography, borders, motion, sizes, spacing, shadows) and to every visual context (compact-table, top-navigation, header, flashbar, alert, app-layout-toolbar) via addTokens/addContext calls in a single loop, not per-component special-casing. The Figma file independently confirms a Light/Dark mode dimension on the color-variable and color-charts-palette collections. Density is concretely evidenced in code (one-theme/spacing.ts: spaceFieldVertical comfortable/compact values). Responsive adaptation is documented as a systematic element-query mechanism tied to a defined breakpoint scale (breakpoints.scss), and theming/visual-context overrides are documented with a working code example (theming-docs). Accessibility guidance is extensive and cites concrete per-component practices (Table row-header semantics, Form field labeling, App layout heading order, Tabs focus styling). This constitutes direct, non-prose evidence that modes are systematically threaded through the token architecture and components, meeting anchor 3.", "raw_scores": [ 3, 3, 3 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "mixed", "generalizability": "system-wide", "limitations": "Platform/bidirectionality (RTL) mode is referenced only as a documentation title in the llms.txt index and is not evidenced in this packet, so its systematic status is unknown; per-component automated accessibility test execution (vs. documented guidance) is likewise not directly observed.", "subjects": [ "Color (light/dark) mode, density mode, motion mode, responsive breakpoints, theming/visual contexts, and accessibility guidance across the pinned Figma file, components repository, and normative documentation" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Modes are systematic across tokens and components", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Cloudscape ships foundations as versioned, machine-consumable artifacts to more than one consumer type: the npm package @cloudscape-design/components (peerDependency react >=16.8.0, with an explicit build:react18 script and react18-aliased devDependencies for a second React major-version consumer), companion published packages consumed as dependencies (@cloudscape-design/theming-runtime, @cloudscape-design/component-toolkit, and theming-build used by the style-dictionary pipeline), a generated JSON design-tokens artifact plus its JSON schema (validated by a snapshot test), and a separately versioned Figma Community design library (2.0.3) explicitly documented as independent from the daily-published React package. Build-time theming additionally generates a themed component + design-token package via buildThemedComponents, showing artifact generation is a real, invokable mechanism, not just a description.", "binding_mappings": [], "citation_conflict": true, "citations": [ { "evidence_authority": "observed", "locator": "lines 1-9", "path": "files/package.json", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/package.json" }, { "evidence_authority": "observed", "locator": "lines 21-27", "path": "files/package.json", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/package.json" }, { "evidence_authority": "observed", "locator": "lines 50-52", "path": "files/package.json", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/package.json" }, { "evidence_authority": "normative", "locator": "lines 144-171", "path": "content.txt", "snapshot_id": "ae35a7bd403e54a14bcb", "source_id": "cloudscape-theming-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/theming/index.html.md" }, { "evidence_authority": "observed", "locator": "lines 7-16", "path": "files/src/__tests__/snapshot-tests/design-tokens.test.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/__tests__/snapshot-tests/design-tokens.test.ts" }, { "evidence_authority": "normative", "locator": "lines 11-15", "path": "content.txt", "snapshot_id": "25b3525c021ca3ca39bc", "source_id": "cloudscape-design-resources", "source_url": "https://cloudscape.design/get-started/for-designers/design-resources/index.html.md" } ], "contradiction_warnings": [], "criterion_id": "delivery", "critical": false, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 10, "declared": 10 }, "exact_agreement_count": 3, "finding": { "impact": "This is a traceability gap rather than a capability failure: it does not undermine the observed delivery mechanism (versioned multi-consumer artifacts), but it means the exact published-version artifact contents were not independently confirmed against the pinned repository source in this evidence set.", "what_broke": "The pinned repository snapshot's package.json declares version 3.0.0, while the assignment's evaluated npm version is 3.0.1348; the evidence packet does not contain the corresponding published package.json to directly confirm artifact contents at that exact published version.", "what_to_change": "Include the published npm package.json (or registry metadata) for the exact evaluated version alongside repository source, and add migration-impact evidence (e.g. semver-diff or changelog-linked breaking-change reports) to support a score of 4.", "why": "Cloudscape's own governance evidence states additional internal testing occurs before npm publication, consistent with the main-branch package.json (3.0.0) differing from a later auto-incremented published patch version (3.0.1348); the repository and npm registry are versioned independently by design." }, "generalizability": "system-wide", "label": "Consumable delivery and versioning", "median_score": 3.0, "next_anchor": "Delivery contracts are validated and migration impact is measured", "next_anchor_gap": "Score 4 requires delivery contracts to be validated and migration impact measured; no changelog/semver-diff tooling, consumer-impact measurement, or breaking-change gate was evidenced \u2014 only shape-level snapshot validation of generated token JSON.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Cloudscape ships foundations as versioned, machine-consumable artifacts to more than one consumer type: the npm package @cloudscape-design/components (peerDependency react >=16.8.0, with an explicit build:react18 script and react18-aliased devDependencies for a second React major-version consumer), companion published packages consumed as dependencies (@cloudscape-design/theming-runtime, @cloudscape-design/component-toolkit, and theming-build used by the style-dictionary pipeline), a generated JSON design-tokens artifact plus its JSON schema (validated by a snapshot test), and a separately versioned Figma Community design library (2.0.3) explicitly documented as independent from the daily-published React package. Build-time theming additionally generates a themed component + design-token package via buildThemedComponents, showing artifact generation is a real, invokable mechanism, not just a description.", "raw_scores": [ 3, 3, 3 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "foundation", "generalizability": "system-wide", "limitations": "Evidence confirms the delivery mechanism and versioning scheme structurally, but does not include registry-level confirmation of the exact evaluated npm version's contents, nor any migration-impact measurement across consumer upgrades.", "subjects": [ "@cloudscape-design/components npm package", "companion theming-runtime/theming-build packages", "generated design-tokens JSON + schema artifact", "Figma Community design library (2.0.3)" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Multiple consumers receive consistent versioned artifacts", "verification_depth": "test-defined", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": true } } ], "critical_unresolved": false, "detail": "tokens and primitives", "label": "Foundations", "provisional_score": 75.0, "provisional_state": "continue", "publishable": true, "review_coverage_pct": 100.0, "score": 75.0, "state": "continue", "unresolved_disagreement": false }, { "area": "bindings", "coverage_pct": 100.0, "criteria": [ { "assessor_contradiction_warnings": [], "assessor_rationale": "Every sampled Figma component-set name maps through a consistent, predictable transform onto its code component identifier (Title Case with optional '(Atom)' suffix for atomic components \u2194 PascalCase TypeScript component name), and the one structural divergence (Button) decomposes into four Figma sets whose names match the code's Variant enum values one-for-one, with an explicit system-authored 'compound' disposition and rationale in the coverage profile. Spinner's absence from the Figma file is likewise explicitly recorded as a design-evidence boundary, not left as an unexplained naming gap. No automated naming-parity checking or drift measurement was found, which excludes the top anchor.", "binding_mappings": [], "citation_conflict": false, "citations": [ { "evidence_authority": "observed", "locator": "lines 79-101", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 1311-1334", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 279-288", "path": "figma-sample-resolution.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 224-225", "path": "files/src/button/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/button/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 9-33", "path": "files/src/spinner/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/spinner/interfaces.ts" } ], "contradiction_warnings": [], "criterion_id": "naming_parity", "critical": false, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 24, "declared": 24 }, "exact_agreement_count": 2, "finding": { "impact": "Practitioners can reliably locate the Figma asset for a given code component (or vice versa) using a predictable naming convention, without needing a manual lookup table.", "what_broke": "No confirmed break: sampled component names in Figma follow a consistent, predictable transform (Title Case plus an '(Atom)' suffix for atomic components) that maps cleanly onto each component's PascalCase code identifier and, for Button, onto its variant enum values.", "what_to_change": "None required for the sampled set; extend the same explicit disposition/rationale metadata already used for Button and Spinner to the remaining catalog components so naming decisions are documented system-wide rather than inferred by a reviewer.", "why": "Cross-referencing figma-sample-details.json component-set names (e.g., 'Toggle (Atom)', 'Modal', 'Primary button (Atom)') against the corresponding TypeScript component/prop names in cloudscape-component-implementation (e.g., ToggleProps, ModalProps, ButtonProps.Variant='primary') shows a one-to-one, predictable name transform for every sampled component, and the figma-sample-resolution.json disposition fields explicitly document the two structural exceptions (Button compound, Spinner not-observable)." }, "generalizability": "sample-only", "label": "Naming parity", "median_score": 3.0, "next_anchor": "Parity is automatically checked and drift is measured", "next_anchor_gap": "No evidence of an automated naming-parity check (e.g., a lint rule, Code Connect script, or CI job) that measures or reports naming drift between the Figma library and the npm package \u2014 required for the automated-validation anchor.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Every sampled Figma component-set name maps through a consistent, predictable transform onto its code component identifier (Title Case with optional '(Atom)' suffix for atomic components \u2194 PascalCase TypeScript component name), and the one structural divergence (Button) decomposes into four Figma sets whose names match the code's Variant enum values one-for-one, with an explicit system-authored 'compound' disposition and rationale in the coverage profile. Spinner's absence from the Figma file is likewise explicitly recorded as a design-evidence boundary, not left as an unexplained naming gap. No automated naming-parity checking or drift measurement was found, which excludes the top anchor.", "raw_scores": [ 3, 2, 3 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "deep-component", "generalizability": "sample-only", "limitations": "Only the declared deep-component sample was checked against name transforms; the remaining component sets in the 154-set Figma catalog were not individually verified, so this finding cannot be generalized to the full catalog without further sampling.", "subjects": [ "button", "toggle", "modal", "flashbar", "form-field", "input", "cards", "side-navigation", "app-layout", "table", "spinner" ] }, "score": 3.0, "score_range": 1.0, "selected_anchor": "Names are systematically aligned across surfaces", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Core consumer-controlled choices correspond well across the sample: Toggle's Selected variant maps to the checked state, Flashbar's Content/Type combination maps to the loading prop, Button's compound atom structure maps to the variant enum, and hover/hidden runtime concerns are justifiably excluded via derived_mapping and runtime_only classifications. However, two concrete surface-specific controls in the sample are neither supported on the counterpart surface nor explicitly classified as design-only or runtime-only in the evidence: Figma's Button Type variant includes 'Dropdown'/'Dropdown+Main' options absent from ButtonProps.Variant, and Figma's Modal Size variant (Small/Medium/Large/Max) omits the x-large/xx-large values ModalProps.Size supports. Because these gaps are unexplained rather than justified exclusions, the sample does not meet anchor 3's requirement that 'surface-specific controls are explicitly classified.'", "binding_mappings": [ { "code_expression": "ButtonProps.variant: 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link'", "design_expression": "Four separate Figma component sets: Primary button (Atom), Normal button (Atom), Link button (Atom), Icon button (Atom)", "disposition": "shared_contract", "rationale": "The evaluation's declared design disposition classifies this as compound: the four independently-confirmed Figma sets collectively represent the single code variant enum, so the consumer-controlled 'variant' choice is honored across surfaces even though it is not modeled as one Figma component set.", "subject": "Button variant (Primary/Normal/Link/Icon)" }, { "code_expression": "ButtonProps.Variant has no 'dropdown' value; dropdown-trigger behavior is not exposed on the Button component in the supplied interfaces.ts", "design_expression": "Type variant option list includes 'Dropdown' and 'Dropdown+Main' alongside 'Text only', 'Text + icon', 'External link'", "disposition": "genuine_gap", "rationale": "No design disposition or rationale in the evidence packet explains why the Button Figma atoms include dropdown-trigger Type options with no counterpart in ButtonProps.Variant; this is an unclassified, unexplained gap rather than a justified authoring-only or runtime-only control.", "subject": "Button Type='Dropdown'/'Dropdown+Main' (Normal/Primary/Icon button atoms)" }, { "code_expression": "ToggleProps.ChangeDetail.checked: boolean (event payload for the controlled checked state)", "design_expression": "Toggle (Atom) 'Selected' variant: Off/On", "disposition": "shared_contract", "rationale": "Figma's binary Selected variant corresponds directly to the boolean checked state that Toggle's onChange event and controlled usage pattern manage in code.", "subject": "Toggle checked/Selected state" }, { "code_expression": "FlashbarProps.MessageDefinition.loading?: boolean, which replaces the status icon with a spinner and forces the type to info", "design_expression": "Flashbar component set: Content variant ('Progress'/'Text') combined with Type='Info in loading state'", "disposition": "derived_mapping", "rationale": "The design models loading as a combination of two variant dimensions while code exposes it as a single loading boolean that forces type; the same meaning (a loading flashbar) is expressed through different but equivalent mechanisms.", "subject": "Flashbar loading indicator" }, { "code_expression": "ModalProps.Size: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max'", "design_expression": "Modal component set 'Size' variant: Small (320px), Medium (600px), Large (820px), Max", "disposition": "genuine_gap", "rationale": "Code supports two additional fixed sizes (x-large, xx-large) with no corresponding Figma variant option, and the evidence packet contains no rationale explaining the omission.", "subject": "Modal size options" }, { "code_expression": "No hover prop on ButtonProps; hover is implemented via a CSS pseudo-state driven by design tokens such as colorBackgroundButtonNormalHover", "design_expression": "Normal/Primary/Icon/Link button atoms' 'State' variant includes 'Hover' alongside 'Default'/'Disabled'", "disposition": "derived_mapping", "rationale": "Figma models hover as an explicit static variant frame for design review, while code achieves the same visual state through a :hover-driven token rather than a settable prop; this is a legitimate derived mapping between a design-time state variant and a runtime pseudo-state.", "subject": "Button hover state" }, { "code_expression": "Not applicable -- TableProps has no desktop/small content-swap property; responsive rendering is handled automatically by the component at runtime", "design_expression": "Table component set exposes 'Content (D)#683:0' and 'Content (S)#683:3' INSTANCE_SWAP properties to preview desktop vs. small-viewport table content in Figma", "disposition": "design_only", "rationale": "This is an authoring-time preview mechanism letting designers swap in different mock content per breakpoint frame; it has no necessary code prop counterpart because the shipped Table component determines its responsive layout automatically rather than through an author-supplied breakpoint variant.", "subject": "Table responsive content preview (Content (D)/Content (S))" }, { "code_expression": "ModalProps.onDismiss: NonCancelableEventHandler, fired on close-button click, overlay click, or Escape key", "design_expression": "Not applicable -- the Modal component set's property definitions (Content, Size) do not model a dismiss event", "disposition": "runtime_only", "rationale": "onDismiss is an event handler wired to application routing/state and has no necessary static Figma property; this is a justified runtime-only control excluded from parity comparison.", "subject": "Modal onDismiss" } ], "citation_conflict": true, "citations": [ { "evidence_authority": "observed", "locator": "lines 1303-1310", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "line 225", "path": "files/src/button/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/button/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 531-541", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "line 110", "path": "files/src/modal/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/modal/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 55-62", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 53-55", "path": "files/src/toggle/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/toggle/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 288-300", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 16-17", "path": "files/src/flashbar/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/flashbar/interfaces.ts" }, { "evidence_authority": "observed", "locator": "line 91", "path": "files/src/modal/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/modal/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 637-664", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" } ], "contradiction_warnings": [], "criterion_id": "contract_correspondence", "critical": true, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 24, "declared": 24 }, "exact_agreement_count": 2, "finding": { "impact": "A designer selecting a Dropdown-type Button atom in Figma cannot produce that exact configuration with the shipped Button component (dropdown-trigger behavior lives on a different component), and a designer authoring an x-large or xx-large modal spec has no matching Figma size option to reference, creating unexplained handoff friction for those specific configurations.", "what_broke": "Figma's Button atoms (Normal/Primary/Icon) expose Type options 'Dropdown' and 'Dropdown+Main' with no corresponding ButtonProps.variant value, and Figma's Modal Size variant set (Small/Medium/Large/Max) omits the x-large and xx-large values present in ModalProps.Size, with neither gap explained by a documented disposition in the evidence packet.", "what_to_change": "Classify the Dropdown/Dropdown+Main Button Type options as design_only (representing the trigger portion of the separate ButtonDropdown component) or add matching code support; extend the Modal Figma component set's Size variant to include x-large/xx-large, or publish a rationale for their exclusion from the design library.", "why": "figma-sample-details.json lists 'Dropdown' and 'Dropdown+Main' among the five Type variant options for the Normal button (Atom) set (node 12669:4938), while ButtonProps.Variant in button/interfaces.ts enumerates only normal/primary/link/icon/inline-icon/inline-link; similarly the Modal (Atom) Size variant (node 12669:37215) lists only four options while ModalProps.Size in modal/interfaces.ts adds 'x-large' and 'xx-large'." }, "generalizability": "sample-only", "label": "Design-to-code contract correspondence", "median_score": 2.0, "next_anchor": "Supported choices, derived states, slots, and composition map coherently, and surface-specific controls are explicitly classified", "next_anchor_gap": "Reaching anchor 3 requires that every surface-specific control in the sample be explicitly classified; the Button Dropdown/Dropdown+Main Type options and the Modal x-large/xx-large size values are unexplained gaps with no documented disposition in the evidence packet, so they remain genuine_gap rather than justified exclusions.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Core consumer-controlled choices correspond well across the sample: Toggle's Selected variant maps to the checked state, Flashbar's Content/Type combination maps to the loading prop, Button's compound atom structure maps to the variant enum, and hover/hidden runtime concerns are justifiably excluded via derived_mapping and runtime_only classifications. However, two concrete surface-specific controls in the sample are neither supported on the counterpart surface nor explicitly classified as design-only or runtime-only in the evidence: Figma's Button Type variant includes 'Dropdown'/'Dropdown+Main' options absent from ButtonProps.Variant, and Figma's Modal Size variant (Small/Medium/Large/Max) omits the x-large/xx-large values ModalProps.Size supports. Because these gaps are unexplained rather than justified exclusions, the sample does not meet anchor 3's requirement that 'surface-specific controls are explicitly classified.'", "raw_scores": [ 1, 2, 2 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "deep-component", "generalizability": "sample-only", "limitations": "Property-by-property correspondence was directly checked for button, modal, toggle, flashbar, and table; app-layout, cards, form-field, input, side-navigation, and spinner were not individually mapped property-by-property in this analysis and may exhibit different correspondence quality.", "subjects": [ "button", "modal", "toggle", "flashbar", "table" ] }, "score": 2.0, "score_range": 1.0, "selected_anchor": "Core consumer choices correspond through documented APIs or runtime mechanisms, with justified surface-specific controls excluded", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Foundation variable coverage is full-file (not sampled), giving broad visibility into the Figma token model. Color tokens show strong identity and mode parity: the Figma color-variable collection (283 variables, Light/Dark modes) matches code's paired light/dark token objects (e.g., colorGreyOpaque70) and the normative token docs' CTI-style semantic naming (e.g., $color-background-button-normal-hover). However, the Figma spacing collection exposes only a single mode ('Value', 10 variables) while the implementation applies a distinct comfortable/compact density mode to spacing tokens (confirmed by createDensityMode() and one-theme spacing overrides with different comfortable/compact values, and documented on the public tokens page with separate Comfortable/Compact columns). Additionally, the raw Figma variable count for colors (615) is not reconciled against the 407 colors documented on the public design-tokens page. These are documented, evidence-based gaps rather than a full identity-and-mode match, placing the sample at anchor 2 rather than anchor 3.", "binding_mappings": [], "citation_conflict": false, "citations": [ { "evidence_authority": "observed", "locator": "lines 31-41", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "lines 11-17", "path": "files/style-dictionary/utils/modes.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/utils/modes.ts" }, { "evidence_authority": "observed", "locator": "lines 9-17", "path": "files/style-dictionary/one-theme/spacing.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/one-theme/spacing.ts" }, { "evidence_authority": "normative", "locator": "line 520", "path": "content.txt", "snapshot_id": "d0941996c36f90b26d7d", "source_id": "cloudscape-design-tokens-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/design-tokens/index.html.md" }, { "evidence_authority": "observed", "locator": "lines 16-30", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "observed", "locator": "line 12", "path": "files/style-dictionary/visual-refresh/colors.ts", "snapshot_id": "9a0f2e03bdbcc9cdf76b", "source_id": "cloudscape-foundation-code", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/style-dictionary/visual-refresh/colors.ts" }, { "evidence_authority": "observed", "locator": "lines 589-594", "path": "figma-variable-summary.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" }, { "evidence_authority": "normative", "locator": "line 39", "path": "content.txt", "snapshot_id": "d0941996c36f90b26d7d", "source_id": "cloudscape-design-tokens-docs", "source_url": "https://cloudscape.design/foundation/visual-foundation/design-tokens/index.html.md" } ], "contradiction_warnings": [], "criterion_id": "token_parity", "critical": true, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 24, "declared": 24 }, "exact_agreement_count": 3, "finding": { "impact": "Designers working from the Figma spacing variables cannot see or select the compact-density spacing values the shipped component library applies in compact mode, so density-mode layouts may drift from the design source unless manually cross-referenced against the separate token documentation table.", "what_broke": "The Figma 'spacing' variable collection models only a single mode ('Value', 10 variables), while implementation spacing tokens branch into comfortable/compact density modes (confirmed by createDensityMode() and by one-theme/spacing.ts overriding several spacing tokens with distinct comfortable/compact values, and documented publicly with separate Comfortable/Compact columns for spacing tokens such as $space-alert-vertical: 8px/4px).", "what_to_change": "Extend the Figma spacing variable collection with a density mode dimension mirroring the code's comfortable/compact modes, or explicitly document that spacing density is intentionally an implementation-only concern not modeled in the design source.", "why": "figma-variable-summary.json lists the spacing collection with a single mode object named 'Value' covering all 10 spacing variables, while style-dictionary/utils/modes.ts defines a 'density' mode with comfortable/compact states, and one-theme/spacing.ts sets spaceFieldVertical to { comfortable: '4px', compact: '2px' } -- a distinction the design-tokens documentation also surfaces via separate Comfortable/Compact mode columns." }, "generalizability": "system-wide", "label": "Token parity", "median_score": 2.0, "next_anchor": "Token identity and modes align across design and code", "next_anchor_gap": "Reaching anchor 3 would require the Figma spacing collection to model a comfortable/compact density mode matching the code's createDensityMode dimension, and a reconciliation of the raw Figma variable count (703 total / 615 color) against the number of tokens documented on the public design-tokens page (407 colors), since this gap is currently unexplained in the evidence.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Foundation variable coverage is full-file (not sampled), giving broad visibility into the Figma token model. Color tokens show strong identity and mode parity: the Figma color-variable collection (283 variables, Light/Dark modes) matches code's paired light/dark token objects (e.g., colorGreyOpaque70) and the normative token docs' CTI-style semantic naming (e.g., $color-background-button-normal-hover). However, the Figma spacing collection exposes only a single mode ('Value', 10 variables) while the implementation applies a distinct comfortable/compact density mode to spacing tokens (confirmed by createDensityMode() and one-theme spacing overrides with different comfortable/compact values, and documented on the public tokens page with separate Comfortable/Compact columns). Additionally, the raw Figma variable count for colors (615) is not reconciled against the 407 colors documented on the public design-tokens page. These are documented, evidence-based gaps rather than a full identity-and-mode match, placing the sample at anchor 2 rather than anchor 3.", "raw_scores": [ 2, 2, 2 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "foundation", "generalizability": "system-wide", "limitations": "Foundation variable coverage is stated as full-file rather than a sample, supporting a system-wide claim about the token model; however, the unexplained 615-vs-407 color-count discrepancy between the raw Figma variable export and the publicly documented token table was not reconciled within the evidence packet, and data-visualization-specific colors are covered on a separate documentation page not included here.", "subjects": [ "color tokens", "spacing tokens", "typography tokens", "border tokens" ] }, "score": 2.0, "score_range": 0.0, "selected_anchor": "Core semantic tokens align with documented gaps", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Every sampled component's documentation page carries maintained, component-scoped 'Get design library' and 'Browse code' links, and the versioned, revision-hashed component-api manifest documents supported props/events per component while marking several superseded props as deprecated in-line (Table's visibleColumns, AppLayout's contentHeader/disableContentHeaderOverlap, Flashbar's buttonText/onButtonClick). This satisfies 'core assets have maintained references.' However, no evidence shows a published, versioned mapping that links specific Figma node or component-set identifiers directly to code component/prop identifiers (e.g., a Code Connect manifest or equivalent), and the release-governance workflows contain no traceability or drift-enforcement step, so the next anchor's cross-surface versioned mapping is not established.", "binding_mappings": [], "citation_conflict": true, "citations": [ { "evidence_authority": "normative", "locator": "line 5", "path": "content.txt", "snapshot_id": "e273bdf592e031a7dd7b", "source_id": "cloudscape-button-docs", "source_url": "https://cloudscape.design/components/button/index.html.md" }, { "evidence_authority": "normative", "locator": "line 5", "path": "content.txt", "snapshot_id": "228b6d8d6230ed435338", "source_id": "cloudscape-table-docs", "source_url": "https://cloudscape.design/components/table/index.html.md" }, { "evidence_authority": "observed", "locator": "line 345", "path": "files/src/table/interfaces.tsx", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/table/interfaces.tsx" }, { "evidence_authority": "observed", "locator": "lines 182-192", "path": "files/src/app-layout/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/app-layout/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 175-182", "path": "files/src/flashbar/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/flashbar/interfaces.ts" }, { "evidence_authority": "normative", "locator": "line 1", "path": "content.txt", "snapshot_id": "b34144cf3ef4b623c2d1", "source_id": "cloudscape-component-api", "source_url": "https://cloudscape.design/components/index.html.json" } ], "contradiction_warnings": [], "criterion_id": "traceability", "critical": false, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "reviewer", "evidence_source_coverage": { "captured": 24, "declared": 24 }, "exact_agreement_count": 2, "finding": { "impact": "Consumers can find the right doc/code/design entry point per component via maintained links, and can discover deprecated code props from the manifest, but nothing currently flags a Figma asset as stale relative to a specific code API change, so drift between design and code deprecations would go undetected until manually reviewed.", "what_broke": "No unexplained failure was found in the maintained per-component references, but no versioned design-to-code identifier mapping (e.g., Code Connect) exists to expose deprecated design assets alongside deprecated code props the same way the component-api manifest does for code alone.", "what_to_change": "Publish a versioned Figma-to-code identifier mapping (or adopt Code Connect) so deprecated or renamed design assets can be traced to their code equivalents the same way deprecated code props already are traced within the component-api manifest.", "why": "Every sampled component's documentation page (Button, Table, App layout, Flashbar, Form field, Modal, Toggle, Side navigation, Cards, Input) carries dated, component-scoped 'Browse code' and 'Get design library' links, and the versioned component-api.json documents deprecated props such as Table's visibleColumns and AppLayout's contentHeader/disableContentHeaderOverlap; no Code Connect dependency, workflow step, or Figma-node-to-code-identifier manifest appears in the release-governance workflows or package.json dependencies." }, "generalizability": "sample-only", "label": "Traceability and deprecation", "median_score": 2.0, "next_anchor": "Versioned mappings expose supported and deprecated APIs", "next_anchor_gap": "A publisher-maintained, versioned Figma-to-code mapping\u2014such as Code Connect or an equivalent manifest\u2014covering current and deprecated design-side assets is needed to establish cross-surface traceability.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Each sampled component documentation page provides maintained, component-scoped links to the design library, source code, and API properties. The collected component API and implementation interfaces document supported properties and events while marking superseded APIs as deprecated, including Table\u2019s visibleColumns, AppLayout\u2019s contentHeader and disableContentHeaderOverlap, and Flashbar\u2019s buttonText and onButtonClick. This supports the anchor that core assets have maintained references. However, no public evidence shows a maintained cross-surface mapping from specific Figma components and properties to corresponding code components and properties, or an automated mechanism detecting drift between them.", "raw_scores": [ 2, 2, 3 ], "requires_review": true, "review_status": "revise", "scope": { "basis": "mixed", "generalizability": "sample-only", "limitations": "Only the sampled components' interface files and doc pages, plus the public release workflows, were inspected; internal design-review or governance processes that might strengthen traceability are outside this public evaluation's declared governance scope, per the governance known_limitations.", "subjects": [ "button", "flashbar", "table", "app-layout", "form-field", "toggle", "modal", "cards", "side-navigation", "input", "component-api manifest", "release/governance workflows" ] }, "score": 2.0, "score_range": 1.0, "selected_anchor": "Core assets have maintained references", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } } ], "critical_unresolved": false, "detail": "how design maps to code", "label": "Bindings", "provisional_score": 56.25, "provisional_state": "partial", "publishable": true, "review_coverage_pct": 100.0, "score": 56.25, "state": "partial", "unresolved_disagreement": false }, { "area": "components", "coverage_pct": 100.0, "criteria": [ { "assessor_contradiction_warnings": [], "assessor_rationale": "The public catalog (cloudscape-llms-index, cloudscape-component-api) documents over 100 components spanning layout, navigation, forms, data display, feedback, and charts \u2014 comprehensive breadth for a general enterprise console product scope. The Figma library independently maps matching component sets for the declared deep-component sample (Toggle, Cards, Flashbar, Form field, Modal, Button variants, Table, App layout, Side navigation), corroborating that catalog breadth extends into the design surface, not just code. This satisfies the anchor's single clause (comprehensive coverage for stated scope) without reaching the measurement anchor.", "binding_mappings": [], "citation_conflict": false, "citations": [ { "evidence_authority": "normative", "locator": "lines 28-121", "path": "content.txt", "snapshot_id": "58abc1f907e6f691c0eb", "source_id": "cloudscape-llms-index", "source_url": "https://cloudscape.design/llms.txt" }, { "evidence_authority": "normative", "locator": "line 1", "path": "content.txt", "snapshot_id": "b34144cf3ef4b623c2d1", "source_id": "cloudscape-component-api", "source_url": "https://cloudscape.design/components/index.html.json" }, { "evidence_authority": "observed", "locator": "lines 79-101", "path": "figma-sample-details.json", "snapshot_id": "925fe002c91a290304d7", "source_id": "cloudscape-figma", "source_url": "https://www.figma.com/community/file/1585292872561164967/cds-component-library-2-0-3" } ], "contradiction_warnings": [], "criterion_id": "core_coverage", "critical": false, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 23, "declared": 23 }, "exact_agreement_count": 3, "finding": { "impact": "Teams building common enterprise-console product surfaces (forms, tables, cards, navigation, feedback, charts) can rely on a documented, first-party component for most needs rather than building custom one-offs", "what_broke": "No confirmed break", "what_to_change": "Publish a public catalog gap-analysis, adoption, or component-health dashboard to support a higher (4) score in future evaluations", "why": "cloudscape-llms-index and cloudscape-component-api jointly enumerate over 100 documented components with full API declarations, and cloudscape-figma independently confirms matching component sets for the sampled deep components" }, "generalizability": "system-wide", "label": "Core component coverage", "median_score": 3.0, "next_anchor": "Gaps, adoption, and component health are measured", "next_anchor_gap": "No public evidence of measured adoption, gap tracking, or component health metrics (required for score 4); cloudscape-governance known_limitations explicitly states adoption dashboards and internal test results are outside this public evaluation.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "The public catalog (cloudscape-llms-index, cloudscape-component-api) documents over 100 components spanning layout, navigation, forms, data display, feedback, and charts \u2014 comprehensive breadth for a general enterprise console product scope. The Figma library independently maps matching component sets for the declared deep-component sample (Toggle, Cards, Flashbar, Form field, Modal, Button variants, Table, App layout, Side navigation), corroborating that catalog breadth extends into the design surface, not just code. This satisfies the anchor's single clause (comprehensive coverage for stated scope) without reaching the measurement anchor.", "raw_scores": [ 3, 3, 3 ], "requires_review": false, "review_status": "approve", "scope": { "basis": "catalog", "generalizability": "system-wide", "limitations": "Catalog presence proves breadth and inventory only; it does not by itself prove deep state, accessibility, or responsive quality for every listed component \u2014 only the declared deep-component sample was inspected in depth for this evaluation.", "subjects": [ "cloudscape-llms-index component catalog", "cloudscape-component-api", "cloudscape-figma component library" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Coverage is comprehensive for the stated scope", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Within the declared sample, several components have both a rich state model in code and direct test evidence: Button's disabled/loading/disabledReason behavior is exhaustively tested (tooltip open/close on focus, blur, hover, and Esc; aria-disabled vs disabled; tab-order skip); FormField's error/warning text and debounced live-region character count are tested; Flashbar's type/loading states and alert-vs-status focus behavior on add/dismiss are tested; Table's interfaces define a four-state loader (pending/loading/finished/error) plus skeleton and empty slots. System-authored pattern docs (validation, loading-and-refreshing, empty-states) give explicit, component-referenced guidance tying these states together across the declared flow and patterns. This satisfies 'comprehensive ownership and guidance' for the well-evidenced subset, but permission-specific behavior is not directly evidenced (only disabledReason as an analog), and input/toggle/side-navigation/cards/spinner state transitions are only supported by interface declarations rather than visible test excerpts in this packet, so the anchor is met unevenly across the full declared sample.", "binding_mappings": [], "citation_conflict": true, "citations": [ { "evidence_authority": "observed", "locator": "lines 153-153", "path": "files/src/flashbar/interfaces.ts", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/flashbar/interfaces.ts" }, { "evidence_authority": "observed", "locator": "lines 481-511", "path": "files/src/table/interfaces.tsx", "snapshot_id": "5ac75e6e6b3f117f6eb1", "source_id": "cloudscape-component-implementation", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/table/interfaces.tsx" }, { "evidence_authority": "normative", "locator": "lines 56-78", "path": "content.txt", "snapshot_id": "2601b913b69dcea6b4ee", "source_id": "cloudscape-validation-pattern", "source_url": "https://cloudscape.design/patterns/general/errors/validation/index.html.md" }, { "evidence_authority": "normative", "locator": "lines 14-21", "path": "content.txt", "snapshot_id": "52e4c7492e153c75ccff", "source_id": "cloudscape-loading-pattern", "source_url": "https://cloudscape.design/patterns/general/loading-and-refreshing/index.html.md" }, { "evidence_authority": "normative", "locator": "lines 7-38", "path": "content.txt", "snapshot_id": "eded4765c42d7ec57cd7", "source_id": "cloudscape-empty-state-pattern", "source_url": "https://cloudscape.design/patterns/general/empty-states/index.html.md" } ], "contradiction_warnings": [], "criterion_id": "state_coverage", "critical": true, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "assessor", "evidence_source_coverage": { "captured": 23, "declared": 23 }, "exact_agreement_count": 3, "finding": { "impact": "Consumers can rely on documented/tested state contracts for button, form-field, flashbar, and table's loader model, but should independently verify state behavior for input, toggle, side-navigation, cards, and spinner, and should not assume permission-denied handling matches disabledReason's tested pattern without checking", "what_broke": "No confirmed break at the comprehensive-guidance level, but permission-state evidence and cross-sample automated-test evidence are thin", "what_to_change": "Provide direct unit/integration test evidence for input, toggle, side-navigation, cards, and spinner state transitions, and for permission-denied scenarios, to substantiate a higher score", "why": "Evidence favors deep coverage on a subset of the declared sample (button, form-field, flashbar, table interfaces) while other declared components/compositions show only design-level or documentation-level support in this packet" }, "generalizability": "sample-only", "label": "Normal, recovery, and permission states", "median_score": 3.0, "next_anchor": "State contracts are executable, tested, and measured", "next_anchor_gap": "No execution/measurement evidence (CI pass/fail results, coverage dashboards) ties these state contracts to continuous testing; permission-specific state behavior and state-transition tests for input, toggle, side-navigation, cards, and spinner are not directly shown in this packet, so a score of 4 is unsupported.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Within the declared sample, several components have both a rich state model in code and direct test evidence: Button's disabled/loading/disabledReason behavior is exhaustively tested (tooltip open/close on focus, blur, hover, and Esc; aria-disabled vs disabled; tab-order skip); FormField's error/warning text and debounced live-region character count are tested; Flashbar's type/loading states and alert-vs-status focus behavior on add/dismiss are tested; Table's interfaces define a four-state loader (pending/loading/finished/error) plus skeleton and empty slots. System-authored pattern docs (validation, loading-and-refreshing, empty-states) give explicit, component-referenced guidance tying these states together across the declared flow and patterns. This satisfies 'comprehensive ownership and guidance' for the well-evidenced subset, but permission-specific behavior is not directly evidenced (only disabledReason as an analog), and input/toggle/side-navigation/cards/spinner state transitions are only supported by interface declarations rather than visible test excerpts in this packet, so the anchor is met unevenly across the full declared sample.", "raw_scores": [ 3, 3, 3 ], "requires_review": true, "review_status": "approve", "scope": { "basis": "mixed", "generalizability": "sample-only", "limitations": "Findings apply to the declared deep-component and composition sample and do not establish state behavior for catalog components outside this sample.", "subjects": [ "button", "form-field", "flashbar", "table", "modal", "app-layout", "create-configure-save flow", "loading-recovery pattern", "empty-state-recovery pattern" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Normal and recovery states have comprehensive ownership and guidance", "verification_depth": "implemented", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": false } }, { "assessor_contradiction_warnings": [ { "code": "test-execution-overclaim", "message": "Rationale describes tests as executed or passing, but its citations show test definitions or automation wiring without a current result." } ], "assessor_rationale": "cloudscape-responsive-docs describes a system-wide mechanism: components respond to container/element width via predefined breakpoints rather than viewport size, which is a cited mechanism applicable beyond the sampled components. Executed tests confirm consistent adaptation for multiple sampled components at specific conditions: cards responsive.test.ts asserts exact cardsPerRow values at six container widths (300-2000px) and after preference changes; app-layout mobile.test.tsx and focus-delegation tests exercise nav/tools/drawers/split-panel behavior across mobile vs desktop and two visual-refresh themes; table keyboard-scroll.test.ts verifies scroll/focus behavior differs correctly between 375px and 800px viewports. This satisfies 'adapt consistently across supported conditions' but no continuous/CI visual-regression execution results were reviewed.", "binding_mappings": [], "citation_conflict": true, "citations": [ { "evidence_authority": "normative", "locator": "lines 5-9", "path": "content.txt", "snapshot_id": "d6ffc1c5decf6c9a61b4", "source_id": "cloudscape-responsive-docs", "source_url": "https://cloudscape.design/get-started/dev-guides/responsive-development/index.html.md" }, { "evidence_authority": "observed", "locator": "lines 44-79", "path": "files/src/cards/__integ__/responsive.test.ts", "snapshot_id": "e0316b5e191225869ac3", "source_id": "cloudscape-component-quality", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/cards/__integ__/responsive.test.ts" }, { "evidence_authority": "observed", "locator": "lines 49-92", "path": "files/src/app-layout/__tests__/mobile.test.tsx", "snapshot_id": "e0316b5e191225869ac3", "source_id": "cloudscape-component-quality", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/app-layout/__tests__/mobile.test.tsx" }, { "evidence_authority": "observed", "locator": "lines 10-44", "path": "files/src/table/__integ__/keyboard-scroll.test.ts", "snapshot_id": "e0316b5e191225869ac3", "source_id": "cloudscape-component-quality", "source_url": "https://github.com/cloudscape-design/components/blob/0ebe4971c559023ff5f9147242478d94083058c7/src/table/__integ__/keyboard-scroll.test.ts" }, { "evidence_authority": "normative", "locator": "lines 267-278", "path": "content.txt", "snapshot_id": "6706222a7bf445fe2764", "source_id": "cloudscape-app-layout-docs", "source_url": "https://cloudscape.design/components/app-layout/index.html.md" } ], "contradiction_warnings": [], "criterion_id": "responsive_behavior", "critical": false, "evidence_ceiling_is_capability_score": false, "evidence_completeness": "complete", "evidence_decision_source": "reviewer", "evidence_source_coverage": { "captured": 23, "declared": 23 }, "exact_agreement_count": 3, "finding": { "impact": "Consumers assembling the create-configure-save flow (small/medium/large viewports) and loading/empty-state patterns can rely on tested, viewport-appropriate behavior for app-layout, cards, and table, reducing risk of layout breakage on resize.", "what_broke": "No confirmed break \u2014 responsive adaptation is documented via a system-wide element-query mechanism and directly exercised by tests across several sampled components and viewports.", "what_to_change": "Surface visual-regression/CI run results (e.g., from the referenced visual-regression workflow) so responsive behavior can be confirmed as continuously validated rather than validated only at the point these test files were authored.", "why": "Executed tests assert concrete pixel-based behavior (breakpoint thresholds, mobile-forced states, scroll behavior) rather than only describing intent in prose." }, "generalizability": "system-wide", "label": "Responsive behavior", "median_score": 3.0, "next_anchor": "Responsive behavior is continuously tested across the matrix", "next_anchor_gap": "Current automated execution results covering the supported viewport, container, theme, density, and content matrix\u2014along with tracked responsive regressions\u2014are needed to establish continuous validation.", "not_applicable": false, "plausible_evidence_ceiling": 4, "rationale": "Cloudscape\u2019s responsive-development guidance defines a system-wide mechanism in which components adapt to the width of their containing element using predefined breakpoints rather than relying only on viewport width. Collected test source encodes specific expected adaptations across the declared sample: Cards defines exact column counts at multiple container widths and after preference changes; AppLayout defines mobile behavior across supported visual themes; and Table defines different focus and horizontal-scroll behavior at narrow and wide viewports. Together, the normative mechanism and executable test definitions support consistent adaptation across the sampled conditions. Score 4 is not supported because no current CI or visual-regression execution results were observed across the complete supported condition matrix.", "raw_scores": [ 3, 3, 3 ], "requires_review": true, "review_status": "revise", "scope": { "basis": "mixed", "generalizability": "system-wide", "limitations": "The element-query mechanism is cited as applying system-wide, but only cards, app-layout, and table have direct executed test evidence in this packet; other catalog/deep components' responsive behavior is not independently confirmed here.", "subjects": [ "element-query responsive mechanism", "cards", "app-layout", "table", "create-configure-save flow viewports (small/medium/large)" ] }, "score": 3.0, "score_range": 0.0, "selected_anchor": "Components adapt consistently across supported conditions", "verification_depth": "test-defined", "verification_signals": { "automation_wiring": false, "current_results": false, "test_definition": true } }, { "assessor_contradiction_warnings": [], "assessor_rationale": "Within the declared sample, accessible behavior is comprehensively implemented and tested for several components: Button tests aria-disabled vs disabled, aria-describedby/hidden-text for disabledReason with focus/blur/hover/Esc-driven tooltip visibility, aria-expanded/aria-haspopup/aria-controls, and keyboard tab-order skipping of disabled buttons. Modal tests initial focus delegation, focus restoration, avoidance of stray focus capture, and keeping focused elements visible above a sticky footer. Flashbar tests ARIA role (alert vs status) selection and focus movement on add/dismiss, including debounced multi-item announcements. App layout tests aria-label/aria-expanded/aria-controls/role semantics for drawer, tools, and navigation triggers across themes and mobile. FormField associates a semantic