@storybook/web-components 8.3.0-alpha.0 → 8.3.0-alpha.10

package/dist/{chunk-GKNNPQCW.mjs → chunk-L4EGOTBX.mjs}

@@ -1,6 +1,8 @@
+import { entry_preview_exports } from './chunk-X7CW7BOR.mjs';
 import { global } from '@storybook/global';
+import { setDefaultProjectAnnotations, setProjectAnnotations as setProjectAnnotations$1 } from 'storybook/internal/preview-api';
 
 var{window:globalWindow}=global;globalWindow.STORYBOOK_ENV="web-components";function isValidComponent(tagName){if(!tagName)return !1;if(typeof tagName=="string")return !0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return !1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return !0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-    See the readme of addon-docs for web components for more details.`)}function setCustomElements(customElements){global.__STORYBOOK_CUSTOM_ELEMENTS__=customElements;}function setCustomElementsManifest(customElements){global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements;}function getCustomElements(){return global.__STORYBOOK_CUSTOM_ELEMENTS__||global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window,EventSource}=global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload();}catch{}}));
+    See the readme of addon-docs for web components for more details.`)}function setCustomElements(customElements){global.__STORYBOOK_CUSTOM_ELEMENTS__=customElements;}function setCustomElementsManifest(customElements){global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements;}function getCustomElements(){return global.__STORYBOOK_CUSTOM_ELEMENTS__||global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}function setProjectAnnotations(projectAnnotations){return setDefaultProjectAnnotations(entry_preview_exports),setProjectAnnotations$1(projectAnnotations)}var{window,EventSource}=global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload();}catch{}}));
 
-export { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest };
+export { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations };

package/dist/chunk-X7CW7BOR.mjs

@@ -0,0 +1,12 @@
+import { simulatePageLoad, simulateDOMContentLoaded } from 'storybook/internal/preview-api';
+import { global } from '@storybook/global';
+import { render as render$1 } from 'lit';
+import { isTemplateResult } from 'lit/directive-helpers.js';
+import { dedent } from 'ts-dedent';
+
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var {Node}=global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val;}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');render$1(element,renderTo),simulatePageLoad(canvasElement);}else if(typeof element=="string")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `});}var parameters={renderer:"web-components"};
+
+export { entry_preview_exports, parameters, render, renderToCanvas };

package/dist/entry-preview-docs.d.ts

@@ -1,177 +1,8 @@
-import { DecoratorFunction, ArgTypesEnhancer } from 'storybook/internal/types';
 import { SourceType } from 'storybook/internal/docs-tools';
+import { DecoratorFunction, InputType, ArgTypesEnhancer } from 'storybook/internal/types';
 import { W as WebComponentsRenderer } from './types-9976a2c9.js';
 import 'lit';
 
-declare global {
-	interface SymbolConstructor {
-		readonly observable: symbol;
-	}
-}
-
-interface SBBaseType {
-    required?: boolean;
-    raw?: string;
-}
-type SBScalarType = SBBaseType & {
-    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
-};
-type SBArrayType = SBBaseType & {
-    name: 'array';
-    value: SBType;
-};
-type SBObjectType = SBBaseType & {
-    name: 'object';
-    value: Record<string, SBType>;
-};
-type SBEnumType = SBBaseType & {
-    name: 'enum';
-    value: (string | number)[];
-};
-type SBIntersectionType = SBBaseType & {
-    name: 'intersection';
-    value: SBType[];
-};
-type SBUnionType = SBBaseType & {
-    name: 'union';
-    value: SBType[];
-};
-type SBOtherType = SBBaseType & {
-    name: 'other';
-    value: string;
-};
-type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
-type ControlType = 'object' | 'boolean' | 'check' | 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select' | 'number' | 'range' | 'file' | 'color' | 'date' | 'text';
-type ConditionalTest = {
-    truthy?: boolean;
-} | {
-    exists: boolean;
-} | {
-    eq: any;
-} | {
-    neq: any;
-};
-type ConditionalValue = {
-    arg: string;
-} | {
-    global: string;
-};
-type Conditional = ConditionalValue & ConditionalTest;
-interface ControlBase {
-    [key: string]: any;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controltype
-     */
-    type?: ControlType;
-    disable?: boolean;
-}
-type Control = ControlType | false | (ControlBase & (ControlBase | {
-    type: 'color';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors
-     */
-    presetColors?: string[];
-} | {
-    type: 'file';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlaccept
-     */
-    accept?: string;
-} | {
-    type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controllabels
-     */
-    labels?: {
-        [options: string]: string;
-    };
-} | {
-    type: 'number' | 'range';
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlmax
-     */
-    max?: number;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlmin
-     */
-    min?: number;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#controlstep
-     */
-    step?: number;
-}));
-interface InputType {
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#control
-     */
-    control?: Control;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#description
-     */
-    description?: string;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#if
-     */
-    if?: Conditional;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#mapping
-     */
-    mapping?: {
-        [key: string]: any;
-    };
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#name
-     */
-    name?: string;
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#options
-     */
-    options?: readonly any[];
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#table
-     */
-    table?: {
-        [key: string]: unknown;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tablecategory
-         */
-        category?: string;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue
-         */
-        defaultValue?: {
-            summary?: string;
-            detail?: string;
-        };
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabledisable
-         */
-        disable?: boolean;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tablesubcategory
-         */
-        subcategory?: string;
-        /**
-         * @see https://storybook.js.org/docs/api/arg-types#tabletype
-         */
-        type?: {
-            summary?: string;
-            detail?: string;
-        };
-    };
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#type
-     */
-    type?: SBType | SBScalarType['name'];
-    /**
-     * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
-     *
-     * @deprecated Use `table.defaultValue.summary` instead.
-     */
-    defaultValue?: any;
-    [key: string]: any;
-}
-
 declare const decorators: DecoratorFunction<WebComponentsRenderer>[];
 declare const parameters: {
     docs: {
@@ -180,7 +11,7 @@ declare const parameters: {
         } | null | undefined;
         extractComponentDescription: (tagName: string) => string | null | undefined;
         story: {
-            inline: boolean;
+            inline: true;
         };
         source: {
             type: SourceType;

package/dist/entry-preview-docs.js

@@ -1,2 +1,2 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools2=require("storybook/internal/docs-tools");var import_tiny_invariant=__toESM(require("tiny-invariant")),import_client_logger=require("storybook/internal/client-logger");var import_global3=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_global2=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-    See the readme of addon-docs for web components for more details.`)}function getCustomElements(){return import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=import_global3.global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));function mapItem(item,category){let type;switch(category){case"attributes":case"properties":type={name:item.type?.text||item.type};break;case"slots":type={name:"string"};break;default:type={name:"void"};break}return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{(0,import_tiny_invariant.default)(argType.name,`${argType} should have a name property.`),acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.members??[],"properties"),...mapData(metaData.properties??[],"properties"),...mapData(metaData.attributes??[],"attributes"),...mapData(metaData.events??[],"events"),...mapData(metaData.slots??[],"slots"),...mapData(metaData.cssProperties??[],"css custom properties"),...mapData(metaData.cssParts??[],"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var import_lit=require("lit"),import_preview_api=require("storybook/internal/preview-api"),import_docs_tools=require("storybook/internal/docs-tools"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if((0,import_preview_api.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,source,args:unmappedArgs})}),!skipSourceRender(context)){let container=window.document.createElement("div");renderedForSource instanceof DocumentFragment?(0,import_lit.render)(renderedForSource.cloneNode(!0),container):(0,import_lit.render)(renderedForSource,container),source=container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,"")}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_docs_exports={};__export(entry_preview_docs_exports,{argTypesEnhancers:()=>argTypesEnhancers,decorators:()=>decorators,parameters:()=>parameters});module.exports=__toCommonJS(entry_preview_docs_exports);var import_docs_tools2=require("storybook/internal/docs-tools");var import_client_logger=require("storybook/internal/client-logger"),import_tiny_invariant=__toESM(require("tiny-invariant"));var import_global4=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_global2=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function getCustomElements(){return import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var import_preview_api2=require("storybook/internal/preview-api");var import_preview_api=require("storybook/internal/preview-api"),import_global3=require("@storybook/global"),import_lit=require("lit"),import_directive_helpers=require("lit/directive-helpers.js"),import_ts_dedent=require("ts-dedent"),{Node}=import_global3.global;var{window:window2,EventSource}=import_global4.global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window2.location.reload()}catch{}}));function mapItem(item,category){let type;switch(category){case"attributes":case"properties":type={name:item.type?.text||item.type};break;case"slots":type={name:"string"};break;default:type={name:"void"};break}return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{(0,import_tiny_invariant.default)(argType.name,`${argType} should have a name property.`),acc[argType.name]=argType});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration)})}),metadata||import_client_logger.logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.members??[],"properties"),...mapData(metaData.properties??[],"properties"),...mapData(metaData.attributes??[],"attributes"),...mapData(metaData.events??[],"events"),...mapData(metaData.slots??[],"slots"),...mapData(metaData.cssProperties??[],"css custom properties"),...mapData(metaData.cssParts??[],"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var import_docs_tools=require("storybook/internal/docs-tools"),import_preview_api3=require("storybook/internal/preview-api"),import_lit2=require("lit"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if((0,import_preview_api3.useEffect)(()=>{let{id,unmappedArgs}=context;source&&import_preview_api3.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,source,args:unmappedArgs})}),!skipSourceRender(context)){let container=window.document.createElement("div");renderedForSource instanceof DocumentFragment?(0,import_lit2.render)(renderedForSource.cloneNode(!0),container):(0,import_lit2.render)(renderedForSource,container),source=container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,"")}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,story:{inline:!0},source:{type:import_docs_tools2.SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[import_docs_tools2.enhanceArgTypes];0&&(module.exports={argTypesEnhancers,decorators,parameters});

package/dist/entry-preview-docs.mjs

@@ -1,9 +1,10 @@
-import { getCustomElements, isValidComponent, isValidMetaData } from './chunk-GKNNPQCW.mjs';
+import { getCustomElements, isValidComponent, isValidMetaData } from './chunk-L4EGOTBX.mjs';
+import './chunk-X7CW7BOR.mjs';
 import { SourceType, enhanceArgTypes, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
-import invariant from 'tiny-invariant';
 import { logger } from 'storybook/internal/client-logger';
-import { render } from 'lit';
+import invariant from 'tiny-invariant';
 import { useEffect, addons } from 'storybook/internal/preview-api';
+import { render } from 'lit';
 
 function mapItem(item,category){let type;switch(category){case"attributes":case"properties":type={name:item.type?.text||item.type};break;case"slots":type={name:"string"};break;default:type={name:"void"};break}return {name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:item.type?.text||item.type},defaultValue:{summary:item.default!==void 0?item.default:item.defaultValue}}}}function mapEvent(item){let name=item.name.replace(/(-|_|:|\.|\s)+(.)?/g,(_match,_separator,chr)=>chr?chr.toUpperCase():"").replace(/^([A-Z])/,match=>match.toLowerCase());return name=`on${name.charAt(0).toUpperCase()+name.substr(1)}`,[{name,action:{name:item.name},table:{disable:!0}},mapItem(item,"events")]}function mapData(data,category){return data&&data.filter(item=>item&&item.name).reduce((acc,item)=>{if(item.kind==="method")return acc;switch(category){case"events":mapEvent(item).forEach(argType=>{invariant(argType.name,`${argType} should have a name property.`),acc[argType.name]=argType;});break;default:acc[item.name]=mapItem(item,category);break}return acc},{})}var getMetaDataExperimental=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metaData=customElements.tags.find(tag=>tag.name.toUpperCase()===tagName.toUpperCase());return metaData||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metaData},getMetaDataV1=(tagName,customElements)=>{if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return customElements?.modules?.forEach(_module=>{_module?.declarations?.forEach(declaration=>{declaration.tagName===tagName&&(metadata=declaration);});}),metadata||logger.warn(`Component not found in custom-elements.json: ${tagName}`),metadata},getMetaData=(tagName,manifest)=>manifest?.version==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.members??[],"properties"),...mapData(metaData.properties??[],"properties"),...mapData(metaData.attributes??[],"attributes"),...mapData(metaData.events??[],"events"),...mapData(metaData.slots??[],"slots"),...mapData(metaData.cssProperties??[],"css custom properties"),...mapData(metaData.cssParts??[],"css shadow parts")}},extractArgTypes=tagName=>{let cem=getCustomElements();return extractArgTypesFromElements(tagName,cem)},extractComponentDescription=tagName=>{let metaData=getMetaData(tagName,getCustomElements());return metaData&&metaData.description};var LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){let sourceParams=context?.parameters.docs?.source,isArgsStory=context?.parameters.__isArgsStory;return sourceParams?.type===SourceType.DYNAMIC?!1:!isArgsStory||sourceParams?.code||sourceParams?.type===SourceType.CODE}function sourceDecorator(storyFn,context){let story=storyFn(),renderedForSource=context?.parameters.docs?.source?.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if(useEffect(()=>{let{id,unmappedArgs}=context;source&&addons.getChannel().emit(SNIPPET_RENDERED,{id,source,args:unmappedArgs});}),!skipSourceRender(context)){let container=window.document.createElement("div");renderedForSource instanceof DocumentFragment?render(renderedForSource.cloneNode(!0),container):render(renderedForSource,container),source=container.innerHTML.replace(LIT_EXPRESSION_COMMENTS,"");}return story}var decorators=[sourceDecorator],parameters={docs:{extractArgTypes,extractComponentDescription,story:{inline:!0},source:{type:SourceType.DYNAMIC,language:"html"}}},argTypesEnhancers=[enhanceArgTypes];
 

package/dist/entry-preview.js

@@ -1,4 +1,4 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_lit=require("lit"),import_directive_helpers=require("lit/directive-helpers.js"),import_preview_api=require("storybook/internal/preview-api"),{Node}=import_global.global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});module.exports=__toCommonJS(entry_preview_exports);var import_preview_api=require("storybook/internal/preview-api"),import_global=require("@storybook/global"),import_lit=require("lit"),import_directive_helpers=require("lit/directive-helpers.js"),import_ts_dedent=require("ts-dedent"),{Node}=import_global.global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
       `})}var parameters={renderer:"web-components"};0&&(module.exports={parameters,render,renderToCanvas});

package/dist/entry-preview.mjs

@@ -1,12 +1 @@
-import { global } from '@storybook/global';
-import { dedent } from 'ts-dedent';
-import { render as render$1 } from 'lit';
-import { isTemplateResult } from 'lit/directive-helpers.js';
-import { simulatePageLoad, simulateDOMContentLoaded } from 'storybook/internal/preview-api';
-
-var {Node}=global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val;}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),isTemplateResult(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');render$1(element,renderTo),simulatePageLoad(canvasElement);}else if(typeof element=="string")canvasElement.innerHTML=element,simulatePageLoad(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),simulateDOMContentLoaded();}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:dedent`
-        Did you forget to return the HTML snippet from the story?
-        Use "() => <your snippet or node>" or when defining the story.
-      `});}var parameters={renderer:"web-components"};
-
-export { parameters, render, renderToCanvas };
+export { parameters, render, renderToCanvas } from './chunk-X7CW7BOR.mjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations } from 'storybook/internal/types';
+import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, NamedOrDefaultProjectAnnotations, NormalizedProjectAnnotations } from 'storybook/internal/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from 'storybook/internal/types';
 import { W as WebComponentsRenderer } from './types-9976a2c9.js';
 import 'lit';
@@ -28,11 +28,30 @@ type Preview = ProjectAnnotations<WebComponentsRenderer>;
 
 declare function isValidComponent(tagName: string): boolean;
 declare function isValidMetaData(customElements: any): boolean;
-/**
- * @param customElements any for now as spec is not super stable yet
- */
+/** @param customElements `any` for now as spec is not super stable yet */
 declare function setCustomElements(customElements: any): void;
 declare function setCustomElementsManifest(customElements: any): void;
 declare function getCustomElements(): any;
 
-export { Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, WebComponentsRenderer, getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest };
+/**
+ * Function that sets the globalConfig of your storybook. The global config is the preview module of
+ * your .storybook folder.
+ *
+ * It should be run a single time, so that your global config (e.g. decorators) is applied to your
+ * stories when using `composeStories` or `composeStory`.
+ *
+ * Example:
+ *
+ * ```jsx
+ * // setup-file.js
+ * import { setProjectAnnotations } from '@storybook/web-components';
+ * import projectAnnotations from './.storybook/preview';
+ *
+ * setProjectAnnotations(projectAnnotations);
+ * ```
+ *
+ * @param projectAnnotations - E.g. (import projectAnnotations from '../.storybook/preview')
+ */
+declare function setProjectAnnotations(projectAnnotations: NamedOrDefaultProjectAnnotations<any> | NamedOrDefaultProjectAnnotations<any>[]): NormalizedProjectAnnotations<WebComponentsRenderer>;
+
+export { Decorator, Loader, Meta, Preview, StoryContext, StoryFn, StoryObj, WebComponentsRenderer, getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations };

package/dist/index.js

@@ -1,2 +1,5 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{getCustomElements:()=>getCustomElements,isValidComponent:()=>isValidComponent,isValidMetaData:()=>isValidMetaData,setCustomElements:()=>setCustomElements,setCustomElementsManifest:()=>setCustomElementsManifest});module.exports=__toCommonJS(src_exports);var import_global3=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_global2=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
-    See the readme of addon-docs for web components for more details.`)}function setCustomElements(customElements){import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window,EventSource}=import_global3.global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload()}catch{}}));0&&(module.exports={getCustomElements,isValidComponent,isValidMetaData,setCustomElements,setCustomElementsManifest});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{getCustomElements:()=>getCustomElements,isValidComponent:()=>isValidComponent,isValidMetaData:()=>isValidMetaData,setCustomElements:()=>setCustomElements,setCustomElementsManifest:()=>setCustomElementsManifest,setProjectAnnotations:()=>setProjectAnnotations});module.exports=__toCommonJS(src_exports);var import_global4=require("@storybook/global");var import_global=require("@storybook/global"),{window:globalWindow}=import_global.global;globalWindow.STORYBOOK_ENV="web-components";var import_global2=require("@storybook/global");function isValidComponent(tagName){if(!tagName)return!1;if(typeof tagName=="string")return!0;throw new Error('Provided component needs to be a string. e.g. component: "my-element"')}function isValidMetaData(customElements){if(!customElements)return!1;if(customElements.tags&&Array.isArray(customElements.tags)||customElements.modules&&Array.isArray(customElements.modules))return!0;throw new Error(`You need to setup valid meta data in your config.js via setCustomElements().
+    See the readme of addon-docs for web components for more details.`)}function setCustomElements(customElements){import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__=customElements}function setCustomElementsManifest(customElements){import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__=customElements}function getCustomElements(){return import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global2.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var import_preview_api2=require("storybook/internal/preview-api");var entry_preview_exports={};__export(entry_preview_exports,{parameters:()=>parameters,render:()=>render,renderToCanvas:()=>renderToCanvas});var import_preview_api=require("storybook/internal/preview-api"),import_global3=require("@storybook/global"),import_lit=require("lit"),import_directive_helpers=require("lit/directive-helpers.js"),import_ts_dedent=require("ts-dedent"),{Node}=import_global3.global,render=(args,context)=>{let{id,component}=context;if(!component)throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);let element=document.createElement(component);return Object.entries(args).forEach(([key,val])=>{element[key]=val}),element};function renderToCanvas({storyFn,kind,name,showMain,showError,forceRemount},canvasElement){let element=storyFn();if(showMain(),(0,import_directive_helpers.isTemplateResult)(element)){(forceRemount||!canvasElement.querySelector('[id="root-inner"]'))&&(canvasElement.innerHTML='<div id="root-inner"></div>');let renderTo=canvasElement.querySelector('[id="root-inner"]');(0,import_lit.render)(element,renderTo),(0,import_preview_api.simulatePageLoad)(canvasElement)}else if(typeof element=="string")canvasElement.innerHTML=element,(0,import_preview_api.simulatePageLoad)(canvasElement);else if(element instanceof Node){if(canvasElement.firstChild===element&&!forceRemount)return;canvasElement.innerHTML="",canvasElement.appendChild(element),(0,import_preview_api.simulateDOMContentLoaded)()}else showError({title:`Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,description:import_ts_dedent.dedent`
+        Did you forget to return the HTML snippet from the story?
+        Use "() => <your snippet or node>" or when defining the story.
+      `})}var parameters={renderer:"web-components"};function setProjectAnnotations(projectAnnotations){return(0,import_preview_api2.setDefaultProjectAnnotations)(entry_preview_exports),(0,import_preview_api2.setProjectAnnotations)(projectAnnotations)}var{window,EventSource}=import_global4.global;typeof module<"u"&&module?.hot?.decline&&(module.hot.decline(),new EventSource("__webpack_hmr").addEventListener("message",function(event){try{let{action}=JSON.parse(event.data);action==="built"&&window.location.reload()}catch{}}));0&&(module.exports={getCustomElements,isValidComponent,isValidMetaData,setCustomElements,setCustomElementsManifest,setProjectAnnotations});

package/dist/index.mjs

@@ -1 +1,2 @@
-export { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest } from './chunk-GKNNPQCW.mjs';
+export { getCustomElements, isValidComponent, isValidMetaData, setCustomElements, setCustomElementsManifest, setProjectAnnotations } from './chunk-L4EGOTBX.mjs';
+import './chunk-X7CW7BOR.mjs';

package/dist/preset.js

@@ -1 +1 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_path=require("path"),previewAnnotations=async(input=[],options)=>{let docsEnabled=Object.keys(await options.presets.apply("docs",{},options)).length>0;return[].concat(input).concat([(0,import_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={previewAnnotations});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preset_exports={};__export(preset_exports,{previewAnnotations:()=>previewAnnotations});module.exports=__toCommonJS(preset_exports);var import_node_path=require("path"),previewAnnotations=async(input=[],options)=>{let docsEnabled=Object.keys(await options.presets.apply("docs",{},options)).length>0;return[].concat(input).concat([(0,import_node_path.join)(__dirname,"entry-preview.mjs")]).concat(docsEnabled?[(0,import_node_path.join)(__dirname,"entry-preview-docs.mjs")]:[])};0&&(module.exports={previewAnnotations});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "8.3.0-alpha.0",
+  "version": "8.3.0-alpha.10",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -25,9 +25,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "require": "./dist/index.js",
+      "node": "./dist/index.js"
     },
     "./preset": "./preset.js",
     "./dist/entry-preview.mjs": "./dist/entry-preview.mjs",
@@ -46,17 +46,21 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@storybook/components": "^8.3.0-alpha.10",
     "@storybook/global": "^5.0.0",
+    "@storybook/manager-api": "^8.3.0-alpha.10",
+    "@storybook/preview-api": "^8.3.0-alpha.10",
+    "@storybook/theming": "^8.3.0-alpha.10",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.2",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "cross-spawn": "^7.0.3",
     "lit": "2.3.1",
     "typescript": "^5.3.2",
@@ -64,7 +68,7 @@
   },
   "peerDependencies": {
     "lit": "^2.0.0 || ^3.0.0",
-    "storybook": "^8.3.0-alpha.0"
+    "storybook": "^8.3.0-alpha.10"
   },
   "engines": {
     "node": ">=18.0.0"

package/template/cli/js/Button.js

@@ -1,10 +1,9 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
+
 import './button.css';
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 

package/template/cli/js/Button.stories.js

@@ -1,4 +1,5 @@
 import { fn } from '@storybook/test';
+
 import { Button } from './Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories

package/template/cli/js/Header.stories.js

@@ -1,4 +1,5 @@
 import { fn } from '@storybook/test';
+
 import { Header } from './Header';
 
 export default {

package/template/cli/js/Page.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+
 import { Header } from './Header';
 import './page.css';
 

package/template/cli/js/Page.stories.js

@@ -1,5 +1,5 @@
-import { Page } from './Page';
 import * as HeaderStories from './Header.stories';
+import { Page } from './Page';
 
 export default {
   title: 'Example/Page',

package/template/cli/ts-3-8/Button.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { fn } from '@storybook/test';
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 

package/template/cli/ts-3-8/Button.ts

@@ -1,32 +1,21 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
+
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 

package/template/cli/ts-3-8/Header.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { fn } from '@storybook/test';
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
 import type { HeaderProps } from './Header';
 import { Header } from './Header';
 

package/template/cli/ts-3-8/Page.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+import * as HeaderStories from './Header.stories';
 import type { PageProps } from './Page';
 import { Page } from './Page';
-import * as HeaderStories from './Header.stories';
 
 const meta: Meta<PageProps> = {
   title: 'Example/Page',

package/template/cli/ts-3-8/Page.ts

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+
 import { Header } from './Header';
 import './page.css';
 

package/template/cli/ts-4-9/Button.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { fn } from '@storybook/test';
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 

package/template/cli/ts-4-9/Button.ts

@@ -1,32 +1,21 @@
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
+
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 

package/template/cli/ts-4-9/Header.stories.ts

@@ -1,5 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
 import { fn } from '@storybook/test';
+
+import type { Meta, StoryObj } from '@storybook/web-components';
+
 import type { HeaderProps } from './Header';
 import { Header } from './Header';
 

package/template/cli/ts-4-9/Page.stories.ts

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+import * as HeaderStories from './Header.stories';
 import type { PageProps } from './Page';
 import { Page } from './Page';
-import * as HeaderStories from './Header.stories';
 
 const meta = {
   title: 'Example/Page',

package/template/cli/ts-4-9/Page.ts

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+
 import { Header } from './Header';
 import './page.css';
 

package/template/components/Button.js

@@ -1,17 +1,16 @@
 import { global as globalThis } from '@storybook/global';
-import { html, LitElement } from 'lit';
+
+import { LitElement, html } from 'lit';
 
 const { CustomEvent, customElements } = globalThis;
 
 /**
+ * @property {boolean} primary - Set button in primary mode
  * @attr {string} label - Label of the button
  * @attr {string} size - Size of the button, can be "small", "medium" or "large"; default is "medium".
  * @attr {string} backgroundColor - Color of the button's background
  *
- * @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar
- *
- * @prop {boolean} primary - Set button in primary mode
- *
+ * @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar. Default is `#1ea7fd`
  * @event {CustomEvent} sb-button:click - Custom event send when the button is clicked
  *
  * @summary This is a simple Storybook Button

package/template/components/Form.js

@@ -1,5 +1,6 @@
 import { global as globalThis } from '@storybook/global';
-import { html, LitElement } from 'lit';
+
+import { LitElement, html } from 'lit';
 
 const { CustomEvent, customElements } = globalThis;
 

package/template/components/Html.js

@@ -1,12 +1,10 @@
 import { global as globalThis } from '@storybook/global';
+
 import { LitElement } from 'lit';
 
 const { customElements } = globalThis;
 
-/**
- *
- * @tag sb-html
- */
+/** @tag sb-html */
 export class SbHtml extends LitElement {
   static get properties() {
     return {

package/template/components/Pre.js

@@ -1,14 +1,11 @@
 import { global as globalThis } from '@storybook/global';
-import { html, LitElement } from 'lit';
 
+import { LitElement, html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const { customElements } = globalThis;
 
-/**
- *
- * @tag sb-pre
- */
+/** @tag sb-pre */
 export class SbPre extends LitElement {
   // Currently TS decorators are not reflected so we have to use static `properties` function
   // https://github.com/Polymer/lit-html/issues/1476

package/template/stories/demo-wc-card/DemoWcCard.js

@@ -1,4 +1,5 @@
 import { global } from '@storybook/global';
+
 import { LitElement, html } from 'lit';
 
 import { demoWcCardStyle } from './demoWcCardStyle.css.js';
@@ -8,8 +9,8 @@ const { CustomEvent } = global;
 /**
  * This is a container looking like a card with a back and front side you can switch
  *
- * @slot - This is an unnamed slot (the default slot)
  * @fires side-changed - Fires whenever it switches between front/back
+ * @slot - This is an unnamed slot (the default slot)
  * @cssprop --demo-wc-card-header-font-size - Header font size
  * @cssprop --demo-wc-card-front-color - Font color for front
  * @cssprop --demo-wc-card-back-color - Font color for back
@@ -36,19 +37,13 @@ export class DemoWcCard extends LitElement {
   constructor() {
     super();
 
-    /**
-     * Indicates that the back of the card is shown
-     */
+    /** Indicates that the back of the card is shown */
     this.backSide = false;
 
-    /**
-     * Header message
-     */
+    /** Header message */
     this.header = 'Your Message';
 
-    /**
-     * Data rows
-     */
+    /** Data rows */
     this.rows = [];
   }
 

package/template/stories/demo-wc-card.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+
 import './demo-wc-card';
 
 export default {

package/template/stories/preview.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { setCustomElementsManifest } from '@storybook/web-components';
 
 import customElementsManifest from './custom-elements.json';