Material Design Web Components
This report summarizes scanner evidence for material-components/material-web, a SCSS project with 11,327 GitHub stars. SynthScan examined 159,192 lines of code across 1428 source files, recording 984 pattern matches distributed across 5 syntactic categories. The legacy adjusted pattern signal is 6.4 (Moderate pattern signal); it is not an authorship estimate.
Use the findings to ask whether maintainers can explain intent, verify dependencies, simplify unnecessary scaffolding, and focus review effort. Risk Payload v1 adds ownership, supply-chain, over-engineering, and review-effort vectors when available. These are prompts for human verification, not probabilities, security findings, or measured maintenance costs.
Use each vector to guide manual verification of the underlying findings.
Can maintainers explain intent, assumptions, and trade-offs? 972 finding(s).
Are imports declared and package/API names verified? 12 finding(s).
Are wrappers, guards, and repeated structures necessary? 33 finding(s).
Which changes need focused human review? 984 finding(s).
This chart tracks the legacy adjusted pattern score across scan runs. Changes can reflect source changes, scan coverage, or detector/scoring versions; they do not measure AI adoption or prove that a team refactored code. Compare runs only when their scoring versions are compatible. The dashed line tracks the raw pattern-hit count.
Groups findings by configured severity weight. Severity is not a confidence estimate, security rating, or proof that a package is missing. Verify imports against the project's manifests and inspect each finding in its local design context.
This horizontal bar chart shows where configured pattern scores accumulate across directories. Treat the bars as locations to inspect, not as evidence of authorship or code quality. Use the file-level findings to decide whether a directory needs a focused ownership, dependency, complexity, or review check.
The scanner identified 984 distinct pattern matches across 5 syntactic categories. Each entry below represents a discrete location in the source code where the engine recorded a detector match to inspect in context. Expand any category row to inspect the individual file paths, line numbers, code snippets, and the lexical context (CODE, COMMENT, or STRING) in which each match was detected.
Reading the findings table: The Severity column indicates the configured finding weight (CRITICAL / HIGH / MEDIUM / LOW). The Context column identifies whether the match occurred inside executable code, an inline comment, or a string literal — legacy comment-context matches receive a ×1.5 score weight. The ⚡ bolt icon marks clustered matches: three or more patterns within a 10-line window, each receiving an additional ×1.5 density multiplier under the legacy scoring model.
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | tabs/_secondary-tab.scss | 1 | // | COMMENT |
| LOW | tabs/_primary-tab.scss | 1 | // | COMMENT |
| LOW | tabs/internal/primary-tab-styles.scss | 1 | // | COMMENT |
| LOW | tabs/internal/tab-styles.scss | 1 | // | COMMENT |
| LOW | tabs/internal/tabs-styles.scss | 1 | // | COMMENT |
| LOW | tabs/internal/secondary-tab-styles.scss | 1 | // | COMMENT |
| LOW | tabs/internal/tabs.ts | 81 | // binding. | COMMENT |
| LOW | labs/card/_outlined-card.scss | 1 | // | COMMENT |
| LOW | labs/card/_filled-card.scss | 1 | // | COMMENT |
| LOW | labs/card/_elevated-card.scss | 1 | // | COMMENT |
| LOW | labs/card/internal/elevated-styles.scss | 1 | // | COMMENT |
| LOW | labs/card/internal/shared-styles.scss | 1 | // | COMMENT |
| LOW | labs/card/internal/outlined-styles.scss | 1 | // | COMMENT |
| LOW | labs/card/internal/filled-styles.scss | 1 | // | COMMENT |
| LOW | labs/navigationdrawer/_navigation-drawer-modal.scss | 1 | // | COMMENT |
| LOW | labs/navigationdrawer/_navigation-drawer.scss | 1 | // | COMMENT |
| LOW | …avigationdrawer/internal/navigation-drawer-styles.scss | 1 | // | COMMENT |
| LOW | labs/navigationdrawer/internal/shared-styles.scss | 1 | // | COMMENT |
| LOW | …iondrawer/internal/navigation-drawer-modal-styles.scss | 1 | // | COMMENT |
| LOW | labs/navigationbar/_navigation-bar.scss | 1 | // | COMMENT |
| LOW | labs/navigationbar/internal/_navigation-bar.scss | 1 | // | COMMENT |
| LOW | labs/navigationbar/internal/navigation-bar-styles.scss | 1 | // | COMMENT |
| LOW | labs/aria/tabs/tablist.ts | 81 | if (tab) { | COMMENT |
| LOW | labs/behaviors/form-associated.ts | 221 | // Coerce `disabled` in `Boolean()` to ensure that setting to `null` or | COMMENT |
| LOW | labs/behaviors/constraint-validation.ts | 201 | oldValue?: unknown, | COMMENT |
| LOW | labs/behaviors/on-report-validity.ts | 341 | */ | COMMENT |
| LOW | labs/behaviors/validators/text-field-validator.ts | 181 | // Use -1 to represent no minlength and maxlength, which is what the | COMMENT |
| LOW | labs/item/internal/_item.scss | 1 | // | COMMENT |
| LOW | labs/item/internal/item-styles.scss | 1 | // | COMMENT |
| LOW | labs/gb/components/tabs/_tabs-tokens.scss | 1 | // | COMMENT |
| LOW | labs/gb/components/tabs/_tabs-tokens.scss | 21 | // md.comp.primary-navigation-tab.active-indicator.shape | COMMENT |
| LOW | labs/gb/components/tabs/_tabs-tokens.scss | 61 | // md.comp.primary-navigation-tab.with-icon.icon.size | COMMENT |
| LOW | labs/gb/components/tabs/_tabs-tokens.scss | 121 | --active-indicator-height: 2px; | COMMENT |
| LOW | labs/gb/components/tabs/tabs.scss | 1 | /*! | COMMENT |
| LOW | labs/gb/components/tabs/tabs.scss | 41 | // difference, so there is deliberately no `[orientation='vertical']` | COMMENT |
| LOW | labs/gb/components/tabs/tabs.scss | 141 | } | COMMENT |
| LOW | labs/gb/components/tabs/tabs.scss | 181 | @include tabs-tokens.pressed; | COMMENT |
| LOW | labs/gb/components/appbar/_app-bar-tokens.scss | 1 | // | COMMENT |
| LOW | labs/gb/components/snackbar/_snackbar-tokens.scss | 1 | // | COMMENT |
| LOW | labs/gb/components/snackbar/_snackbar-tokens.scss | 21 | // ├ md.comp.snackbar.action.label-text.weight | COMMENT |
| LOW | labs/gb/components/chip/_chip-tokens.scss | 1 | // | COMMENT |
| LOW | labs/gb/components/chip/_chip-tokens.scss | 21 | // md.comp.chip.container.elevation | COMMENT |
| LOW | labs/gb/components/chip/_chip-tokens.scss | 41 | --leading-icon-size: 18px; | COMMENT |
| LOW | labs/segmentedbuttonset/internal/shared-styles.scss | 1 | // | COMMENT |
| LOW | labs/segmentedbuttonset/internal/outlined-styles.scss | 1 | // | COMMENT |
| LOW | …gmentedbutton/internal/_outlined-segmented-button.scss | 1 | // | COMMENT |
| LOW | labs/segmentedbutton/internal/shared-styles.scss | 1 | // | COMMENT |
| LOW | labs/segmentedbutton/internal/outlined-styles.scss | 1 | // | COMMENT |
| LOW | labs/segmentedbutton/internal/_shared.scss | 81 | font-size: var(--_icon-size); | COMMENT |
| LOW | labs/navigationtab/_navigation-tab.scss | 1 | // | COMMENT |
| LOW | labs/navigationtab/internal/navigation-tab-styles.scss | 1 | // | COMMENT |
| LOW | labs/badge/_badge.scss | 1 | // | COMMENT |
| LOW | labs/badge/internal/_badge.scss | 1 | // | COMMENT |
| LOW | labs/badge/internal/badge-styles.scss | 1 | // | COMMENT |
| LOW | radio/_radio.scss | 1 | // | COMMENT |
| LOW | radio/internal/radio-styles.scss | 1 | // | COMMENT |
| LOW | progress/_linear-progress.scss | 1 | // | COMMENT |
| LOW | progress/_circular-progress.scss | 1 | // | COMMENT |
| LOW | chips/_input-chip.scss | 1 | // | COMMENT |
| LOW | chips/_suggestion-chip.scss | 1 | // | COMMENT |
| 878 more matches not shown… | ||||
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | labs/aria/command.ts | 84 | function getPopoverTargetActionState( | CODE |
| LOW | labs/aria/command.ts | 109 | export function sharedCommandInvokerActivationSteps( | CODE |
| LOW | labs/aria/command.ts | 227 | function popoverTargetAttributeActivationBehavior( | CODE |
| LOW | labs/aria/buttons/keyboard_click_handler.ts | 33 | export function setupKeyboardClickHandler( | CODE |
| LOW | labs/aria/menu/fieldset_test.ts | 194 | async function setUpMultipleCheckableTest() { | CODE |
| LOW | labs/behaviors/on-report-validity.ts | 251 | function addFormReportValidListener( | CODE |
| LOW | labs/behaviors/on-report-validity.ts | 384 | function isFirstInvalidControlInForm( | CODE |
| LOW | labs/gb/components/slider/slider.ts | 577 | export function formatValueIndicatorLabel(value?: number): string { | CODE |
| LOW | catalog/src/utils/theme.ts | 108 | export function getLastSavedAutoColorMode() { | CODE |
| LOW | catalog/src/utils/theme.ts | 121 | export function saveLastSavedAutoColorMode(mode: 'light' | 'dark') { | CODE |
| LOW | catalog/src/pages/components.ts | 22 | async function updateMessageTargetOnIframeLoad( | CODE |
| LOW | catalog/src/pages/components.ts | 38 | async function syncPlaygroundThemeWithPage() { | CODE |
| LOW | catalog/src/pages/global.ts | 74 | function determinePageNavigationAutoMode() { | CODE |
| LOW | internal/aria/delegate.ts | 145 | function setupDelegatesAriaProperties(ctor: typeof ReactiveElement) { | CODE |
| LOW | internal/aria/delegate.ts | 196 | function ariaAttributeToDataAttribute(ariaAttribute: string) { | CODE |
| LOW | internal/aria/delegate.ts | 201 | function ariaAttributeToDataProperty(ariaAttribute: string) { | CODE |
| LOW | internal/events/form-label-activation.ts | 93 | async function squelchEventsForMicrotask() { | CODE |
| LOW | ripple/demo/demo.ts | 25 | function cssCustomPropertyAsNumber( | CODE |
| LOW | testing/transform-pseudo-classes.ts | 34 | export function getTransformedPseudoClass(pseudoClass: string) { | CODE |
| LOW | list/internal/list-navigation-helpers.ts | 285 | export function createDeactivateItemsEvent() { | CODE |
| LOW | list/internal/list-navigation-helpers.ts | 305 | export function createRequestActivationEvent() { | CODE |
| LOW | menu/demo/stories.ts | 482 | function setButtonAriaExpandedFalse(e: Event) { | CODE |
| LOW | menu/internal/controllers/shared.ts | 138 | export function createStayOpenOnFocusoutEvent() { | CODE |
| LOW | menu/internal/controllers/shared.ts | 146 | export function createCloseOnFocusoutEvent() { | CODE |
| LOW | menu/internal/controllers/shared.ts | 166 | export function createDeactivateTypeaheadEvent() { | CODE |
| LOW | menu/internal/controllers/shared.ts | 182 | export function createActivateTypeaheadEvent() { | CODE |
| LOW | scripts/analyzer/update-docs.ts | 191 | function generateFieldMarkdownTable(element: MdModuleInfo): MarkdownTable { | CODE |
| LOW | scripts/analyzer/update-docs.ts | 290 | function generateMethodMarkdownTable(element: MdModuleInfo): MarkdownTable { | CODE |
| LOW | scripts/analyzer/update-docs.ts | 357 | function generateEventsMarkdownTable(element: MdModuleInfo): MarkdownTable { | CODE |
| LOW | scripts/analyzer/update-docs.ts | 487 | function stringifyMarkdownTableSections(elements: ElementTableSection[]) { | CODE |
| LOW | scripts/analyzer/generate-manifest.ts | 56 | async function generateManifestFromTsconfig(basePath: AbsolutePath) { | CODE |
| LOW | select/internal/selectoption/selectOptionController.ts | 19 | export function createRequestSelectionEvent() { | CODE |
| LOW | select/internal/selectoption/selectOptionController.ts | 30 | export function createRequestDeselectionEvent() { | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| HIGH | labs/behaviors/on-report-validity.ts | 381 | * @return True if there is no form or if the control is the form's first | COMMENT |
| HIGH | labs/behaviors/validators/validator.ts | 103 | * @return True if the states are equal, or false if not. | COMMENT |
| HIGH | internal/aria/aria.ts | 73 | * @return True if the attribute is an aria attribute, or false if not. | COMMENT |
| HIGH | testing/harness.ts | 47 | * @return True if the element has a harness property. | COMMENT |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| LOW | labs/item/demo/stories.ts | 59 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum rhoncus est volutpat venenatis.'; | CODE |
| LOW | labs/item/demo/stories.ts | 59 | 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum rhoncus est volutpat venenatis.'; | CODE |
| LOW | textfield/demo/demo.ts | 24 | new Knob('placeholder', {ui: textInput(), defaultValue: ''}), | CODE |
| LOW⚡ | docs/components/divider.md | 30 | ![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.webp "Full width divider example | CODE |
| LOW⚡ | docs/components/divider.md | 34 | <p>Lorem ipsum...</p> | CODE |
| LOW⚡ | docs/components/divider.md | 36 | <p>Lorem ipsum...</p> | CODE |
| LOW | docs/components/divider.md | 115 | <p>Lorem ipsum...</p> | CODE |
| LOW | docs/components/divider.md | 117 | <p>Lorem ipsum...</p> | CODE |
| Severity | File | Line | Snippet | Context |
|---|---|---|---|---|
| MEDIUM | textfield/internal/_icon.scss | 19 | // Absolutely position the icons within their `icon-size` container. This | COMMENT |