@storybook/web-components 7.0.9 → 7.0.11

package/dist/config.d.ts

@@ -1,5 +1,5 @@
 import { Addon_DecoratorFunction, ArgTypesEnhancer, ArgsStoryFn, RenderContext } from '@storybook/types';
-import { W as WebComponentsRenderer } from './types-a4f869af.js';
+import { W as WebComponentsRenderer } from './types-0360da9f.js';
 import 'lit';
 
 declare const decorators: Addon_DecoratorFunction<unknown>[];

package/dist/config.js

@@ -2,4 +2,4 @@ var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDe
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.
       `})}var api=(0,import_preview_api2.start)(renderToCanvas);var forceReRender=api.forceReRender,raw=api.clientApi.raw;var import_global3=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_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=import_global4.global,_a;typeof module<"u"&&((_a=module==null?void 0:module.hot)!=null&&_a.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){var _a2,_b;let type=category==="properties"?{name:((_a2=item.type)==null?void 0:_a2.text)||item.type}:{name:"void"};return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:((_b=item.type)==null?void 0:_b.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=>{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)=>{var _a2;if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return(_a2=customElements==null?void 0:customElements.modules)==null||_a2.forEach(_module=>{var _a3;(_a3=_module==null?void 0:_module.declarations)==null||_a3.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==null?void 0:manifest.version)==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...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_lit2=require("lit"),import_preview_api3=require("@storybook/preview-api"),import_docs_tools=require("@storybook/docs-tools"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){var _a2;let sourceParams=(_a2=context==null?void 0:context.parameters.docs)==null?void 0:_a2.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){var _a2,_b;let story=storyFn(),renderedForSource=(_b=(_a2=context==null?void 0:context.parameters.docs)==null?void 0:_a2.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if((0,import_preview_api3.useEffect)(()=>{let{id,args}=context;source&&import_preview_api3.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,source,args})}),!skipSourceRender(context)){let container=window.document.createElement("div");(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];var parameters2={renderer:"web-components",...parameters};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});
+    See the readme of addon-docs for web components for more details.`)}function getCustomElements(){return import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS__||import_global3.global.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__}var{window:window2,EventSource}=import_global4.global,_a;typeof module<"u"&&((_a=module==null?void 0:module.hot)!=null&&_a.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){var _a2,_b;let type=category==="properties"?{name:((_a2=item.type)==null?void 0:_a2.text)||item.type}:{name:"void"};return{name:item.name,required:!1,description:item.description,type,table:{category,type:{summary:((_b=item.type)==null?void 0:_b.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=>{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)=>{var _a2;if(!isValidComponent(tagName)||!isValidMetaData(customElements))return null;let metadata;return(_a2=customElements==null?void 0:customElements.modules)==null||_a2.forEach(_module=>{var _a3;(_a3=_module==null?void 0:_module.declarations)==null||_a3.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==null?void 0:manifest.version)==="experimental"?getMetaDataExperimental(tagName,manifest):getMetaDataV1(tagName,manifest),extractArgTypesFromElements=(tagName,customElements)=>{let metaData=getMetaData(tagName,customElements);return metaData&&{...mapData(metaData.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...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_lit2=require("lit"),import_preview_api3=require("@storybook/preview-api"),import_docs_tools=require("@storybook/docs-tools"),LIT_EXPRESSION_COMMENTS=/<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;function skipSourceRender(context){var _a2;let sourceParams=(_a2=context==null?void 0:context.parameters.docs)==null?void 0:_a2.source,isArgsStory=context==null?void 0:context.parameters.__isArgsStory;return(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.DYNAMIC?!1:!isArgsStory||(sourceParams==null?void 0:sourceParams.code)||(sourceParams==null?void 0:sourceParams.type)===import_docs_tools.SourceType.CODE}function sourceDecorator(storyFn,context){var _a2,_b;let story=storyFn(),renderedForSource=(_b=(_a2=context==null?void 0:context.parameters.docs)==null?void 0:_a2.source)!=null&&_b.excludeDecorators?context.originalStoryFn(context.args,context):story,source;if((0,import_preview_api3.useEffect)(()=>{let{id,args}=context;source&&import_preview_api3.addons.getChannel().emit(import_docs_tools.SNIPPET_RENDERED,{id,source,args})}),!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];var parameters2={renderer:"web-components",...parameters};0&&(module.exports={argTypesEnhancers,decorators,parameters,render,renderToCanvas});

package/dist/config.mjs

@@ -5,6 +5,6 @@ import { logger } from '@storybook/client-logger';
 import { render } from 'lit';
 import { useEffect, addons } from '@storybook/preview-api';
 
-function mapItem(item,category){let type=category==="properties"?{name:item.type?.text||item.type}:{name:"void"};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=>{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.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...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,args}=context;source&&addons.getChannel().emit(SNIPPET_RENDERED,{id,source,args});}),!skipSourceRender(context)){let container=window.document.createElement("div");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];var parameters2={renderer:"web-components",...parameters};
+function mapItem(item,category){let type=category==="properties"?{name:item.type?.text||item.type}:{name:"void"};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=>{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.attributes,"attributes"),...mapData(metaData.members,"properties"),...mapData(metaData.properties,"properties"),...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,args}=context;source&&addons.getChannel().emit(SNIPPET_RENDERED,{id,source,args});}),!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];var parameters2={renderer:"web-components",...parameters};
 
 export { argTypesEnhancers, decorators, parameters2 as parameters };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StrictArgs, DecoratorFunction, LoaderFunction, StoryContext as StoryContext$1, ProjectAnnotations, Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 export { ArgTypes, Args, Parameters, StrictArgs } from '@storybook/types';
-import { W as WebComponentsRenderer } from './types-a4f869af.js';
+import { W as WebComponentsRenderer } from './types-0360da9f.js';
 import 'lit';
 
 /**

package/dist/{types-a4f869af.d.ts → types-0360da9f.d.ts}

@@ -1,7 +1,7 @@
 import { WebRenderer } from '@storybook/types';
 import { TemplateResult, SVGTemplateResult } from 'lit';
 
-type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
+type StoryFnHtmlReturnType = string | Node | DocumentFragment | TemplateResult | SVGTemplateResult;
 interface WebComponentsRenderer extends WebRenderer {
     component: string;
     storyResult: StoryFnHtmlReturnType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.0.9",
+  "version": "7.0.11",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -51,13 +51,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.0.9",
-    "@storybook/core-client": "7.0.9",
-    "@storybook/docs-tools": "7.0.9",
+    "@storybook/client-logger": "7.0.11",
+    "@storybook/core-client": "7.0.11",
+    "@storybook/docs-tools": "7.0.11",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.0.9",
-    "@storybook/preview-api": "7.0.9",
-    "@storybook/types": "7.0.9",
+    "@storybook/manager-api": "7.0.11",
+    "@storybook/preview-api": "7.0.11",
+    "@storybook/types": "7.0.11",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -84,5 +84,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "797cfd6f12f94a65617c65f25b2d6546a689bf1b"
+  "gitHead": "43e5c1aa449b2438e50b23d72f13155f3c2ab236"
 }

package/template/cli/js/Header.js

@@ -5,7 +5,7 @@ import './header.css';
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

package/template/cli/js/Page.js

@@ -11,7 +11,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

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

@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

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

@@ -22,7 +22,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a

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

@@ -16,7 +16,7 @@ export interface HeaderProps {
 
 export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
   <header>
-    <div class="wrapper">
+    <div class="storybook-header">
       <div>
         <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
           <g fill="none" fillRule="evenodd">

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

@@ -22,7 +22,7 @@ export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) =>
       onCreateAccount,
     })}
 
-    <section>
+    <section class="storybook-page">
       <h2>Pages in Storybook</h2>
       <p>
         We recommend building UIs with a