README.md

CONTRIBUTOR-DOCS / Style guide

Style guide

Beneath this doc

• 2nd-Gen CSS
  • Component CSS
  • Custom Properties
  • Component CSS PR Checklist
  • Spectrum CSS to SWC Migration
  • Styling Anti-Patterns (What to Avoid)
  • Property order quick reference
• 2nd-gen TypeScript
  • File organization
  • Class structure
  • TypeScript modifier keywords
  • Lit decorators and modifiers
  • Property patterns
  • Method patterns
  • JSDoc standards
  • Component types
  • Rendering patterns
  • Naming conventions
  • Base class vs concrete class
  • Composition patterns
  • Mixin composition
  • Controller composition
  • Directive composition
  • Interface composition
  • Debug and validation
• Linting tools
• Testing guide
  • Testing overview
  • Storybook testing
  • Playwright accessibility testing
  • Visual regression testing
  • Testing utilities
  • Code coverage
  • Avoiding flaky tests
  • Running tests
  • PR review checklist
  • Resources

This section covers the coding conventions and authoring patterns used across Spectrum Web Components. Following these guides keeps the codebase consistent, reviewable, and accessible.

• 2nd-gen CSS — Property ordering, class naming, custom properties, selector patterns, and forced-colors requirements for component stylesheets.
• 2nd-gen TypeScript — File organization, class structure, decorators, JSDoc, type definitions, naming, and composition patterns for component TypeScript.
• Linting tools — How automated linting enforces these conventions and how to configure or extend the rules.