Release: Prerelease 10.2.0-alpha.19

.gitignore

@@ -75,3 +75,4 @@ code/core/report
 
 .junie
 CLAUDE.local.md
+.claude

CHANGELOG.prerelease.md

@@ -1,3 +1,12 @@
+## 10.2.0-alpha.19
+
+- CLIInitiate: Simplify the CLI init port flag detection - [#33546](https://github.com/storybookjs/storybook/pull/33546), thanks @ndelangen!
+- CSF-Factories: Allow kebab-case HTML attribute names in web components args - [#33526](https://github.com/storybookjs/storybook/pull/33526), thanks @kasperpeulen!
+- CSF-Factories: Export WebComponentsTypes and VueTypes - [#33521](https://github.com/storybookjs/storybook/pull/33521), thanks @kasperpeulen!
+- Initiate: Fix used port flag handling - [#33544](https://github.com/storybookjs/storybook/pull/33544), thanks @ndelangen!
+- Manager: Fix system query parameters being overridable - [#33535](https://github.com/storybookjs/storybook/pull/33535), thanks @JReinhold!
+- NextJSVite: Upgrade plugin - [#33538](https://github.com/storybookjs/storybook/pull/33538), thanks @ndelangen!
+
 ## 10.2.0-alpha.18
 
 - Build: Fix `ejslint` execution path in lint-staged - [#33504](https://github.com/storybookjs/storybook/pull/33504), thanks @Yeonny0723!

code/package.json

@@ -220,5 +220,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.2.0-alpha.19"
 }

code/renderers/vue3/src/index.ts

@@ -5,3 +5,5 @@ export * from './public-types';
 export * from './portable-stories';
 
 export * from './preview';
+
+export type { VueTypes } from './types';

code/renderers/web-components/src/csf-factories.test.ts

@@ -205,3 +205,23 @@ it('Components without Props can be used', () => {
 
   const Basic = meta.story();
 });
+
+// https://github.com/storybookjs/storybook/issues/33524
+it('✅ Kebab-case HTML attribute names are allowed in args', () => {
+  const meta = preview.meta({
+    component: 'my-button',
+    args: {
+      label: 'hello',
+      'aria-label': 'my button', // kebab-case attribute
+    },
+  });
+
+  const Basic = meta.story({
+    args: {
+      'data-testid': 'button-1', // kebab-case attribute
+    },
+  });
+
+  expect(meta.input.args?.['aria-label']).toBe('my button');
+  expect(Basic.input.args?.['data-testid']).toBe('button-1');
+});

code/renderers/web-components/src/index.ts

@@ -9,6 +9,8 @@ export * from './framework-api';
 export * from './portable-stories';
 export * from './preview';
 
+export type { WebComponentsTypes } from './types';
+
 // TODO: disable HMR and do full page loads because of customElements.define
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

code/renderers/web-components/src/preview.ts

@@ -59,6 +59,15 @@ type InferArgs<TArgs, T, Decorators> = Simplify<
 type InferWebComponentsTypes<T, TArgs, Decorators> = WebComponentsTypes &
   T & { args: Simplify<InferArgs<TArgs, T, Decorators>> };
 
+/**
+ * Infers args from a web component's HTMLElement type, allowing both camelCase properties and
+ * kebab-case HTML attribute names (e.g., 'aria-label', 'data-testid', 'static-color').
+ */
+type InferArgsFromComponent<C extends keyof HTMLElementTagNameMap> = Partial<
+  HTMLElementTagNameMap[C]
+> &
+  Record<`${string}-${string}`, unknown>;
+
 /**
  * Web Components-specific Preview interface that provides type-safe CSF factory methods.
  *
@@ -94,22 +103,20 @@ export interface WebComponentsPreview<T extends AddonTypes> extends Preview<
     C extends keyof HTMLElementTagNameMap,
     Decorators extends DecoratorFunction<WebComponentsTypes & T, any>,
     // Try to make Exact<Partial<TArgs>, TMetaArgs> work
-    TMetaArgs extends Partial<HTMLElementTagNameMap[C] & T['args']>,
+    TMetaArgs extends InferArgsFromComponent<C> & Partial<T['args']>,
   >(
     meta: {
       component?: C;
       args?: TMetaArgs;
       decorators?: Decorators | Decorators[];
     } & Omit<
-      ComponentAnnotations<WebComponentsTypes & T, Partial<HTMLElementTagNameMap[C]> & T['args']>,
+      ComponentAnnotations<WebComponentsTypes & T, InferArgsFromComponent<C> & T['args']>,
       'decorators' | 'component' | 'args'
     >
   ): WebComponentsMeta<
-    InferWebComponentsTypes<T, Partial<HTMLElementTagNameMap[C]>, Decorators>,
+    InferWebComponentsTypes<T, InferArgsFromComponent<C>, Decorators>,
     Omit<
-      ComponentAnnotations<
-        InferWebComponentsTypes<T, Partial<HTMLElementTagNameMap[C]>, Decorators>
-      >,
+      ComponentAnnotations<InferWebComponentsTypes<T, InferArgsFromComponent<C>, Decorators>>,
       'args'
     > & {
       args: {} extends TMetaArgs ? {} : TMetaArgs;

docs/versions/next.json

@@ -1 +1 @@
-{"version":"10.2.0-alpha.18","info":{"plain":"- Build: Fix `ejslint` execution path in lint-staged - [#33504](https://github.com/storybookjs/storybook/pull/33504), thanks @Yeonny0723!\n- CLI: Detect free port when running dev during initiate - [#33532](https://github.com/storybookjs/storybook/pull/33532), thanks @ndelangen!\n- Core: Improve path handling in arg types data extraction - [#33536](https://github.com/storybookjs/storybook/pull/33536), thanks @yannbf!\n- Core: Refactor channel initialization - [#33520](https://github.com/storybookjs/storybook/pull/33520), thanks @yannbf!\n- Telemetry: Add `packageJson.type` - [#33525](https://github.com/storybookjs/storybook/pull/33525), thanks @ndelangen!\n- UI: Improve landmark navigation - [#33457](https://github.com/storybookjs/storybook/pull/33457), thanks @Sidnioulz!"}}
+{"version":"10.2.0-alpha.19","info":{"plain":"- CLIInitiate: Simplify the CLI init port flag detection - [#33546](https://github.com/storybookjs/storybook/pull/33546), thanks @ndelangen!\n- CSF-Factories: Allow kebab-case HTML attribute names in web components args - [#33526](https://github.com/storybookjs/storybook/pull/33526), thanks @kasperpeulen!\n- CSF-Factories: Export WebComponentsTypes and VueTypes - [#33521](https://github.com/storybookjs/storybook/pull/33521), thanks @kasperpeulen!\n- Initiate: Fix used port flag handling - [#33544](https://github.com/storybookjs/storybook/pull/33544), thanks @ndelangen!\n- Manager: Fix system query parameters being overridable - [#33535](https://github.com/storybookjs/storybook/pull/33535), thanks @JReinhold!\n- NextJSVite: Upgrade plugin - [#33538](https://github.com/storybookjs/storybook/pull/33538), thanks @ndelangen!"}}