CSF-Factories: Allow kebab-case HTML attribute names in web components args

[kasperpeulen]

closes #33524

What I did

When using @wc-toolkit/storybook-helpers or similar libraries that generate args with kebab-case attribute names (e.g., 'static-color'), TypeScript would error because our types only allowed camelCase property names.

This adds InferArgsFromComponent<C> which allows both:

• camelCase properties from HTMLElementTagNameMap (type-checked)
• kebab-case strings containing - (for HTML attributes)

Since JavaScript property names cannot contain -, any string with a dash is definitively an HTML attribute name, making this a safe heuristic.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Clone the reproduction repo: git clone https://github.com/kasperpeulen/spectrum-web-components.git
2. Checkout the branch: git checkout storybook-csf-factories-kebab-case-issue
3. Install the canary: npx storybook@<CANARY_VERSION> upgrade
4. Run TypeScript check: cd 2nd-gen/packages/swc && npx tsc --noEmit
5. Verify no errors for kebab-case args like 'static-color' or 'icon-slot'

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

No documentation changes needed - this is a bugfix for type inference.

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

Summary by CodeRabbit

• New Features

  • Web component arguments now support kebab-case HTML attribute names (e.g., aria-label, data-testid) alongside camelCase properties.

• Tests

  • Added test coverage for kebab-case attribute naming conventions in web component arguments.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds type-level support for kebab-case HTML attribute names in Web Components Storybook arg inference and a new test validating kebab-case args; also adds a .gitignore entry.

Changes

Cohort / File(s)	Summary
Type system — Web Components preview code/renderers/web-components/src/preview.ts	Adds InferArgsFromComponent<C> = Partial<HTMLElementTagNameMap[C]> & Record<\${string}-${string}`, unknown>and replaces uses ofPartial<HTMLElementTagNameMap[C]>withInferArgsFromComponentacrossWebComponentsPreview.meta, ComponentAnnotations` generics, and related type aliases (type-only changes).
Tests code/renderers/web-components/src/csf-factories.test.ts	Adds a test case asserting kebab-case attribute names (e.g., data-testid) and dash-case attributes (e.g., aria-label) are present on inferred args.
Repository config .gitignore	Adds .claude to ignore patterns.

Sequence Diagram(s)

(No sequence diagrams generated — changes are type-level and a unit test; conditions for diagrams not met.)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Possibly related PRs

• storybookjs/storybook PR 33365 — modifies Web Components CSF preview/types and tests touching the same preview typing and test surface.

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a2e09fa and 1753a9a.

📒 Files selected for processing (1)

• .gitignore

✅ Files skipped from review due to trivial changes (1)

• .gitignore

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest
• GitHub Check: nx

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 1753a9a

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	7m 6s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-13 14:45:11 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit a2e09fa

---

☁️ Nx Cloud last updated this comment at 2026-01-13 11:57:56 UTC