@storybook/web-components 11.0.0-alpha.6 → 11.0.0-alpha.8

package/dist/_node-chunks/{chunk-X7F7EONQ.js → chunk-7DGX2RHV.js}

@@ -1,35 +1,110 @@
-import CJS_COMPAT_NODE_URL_3ov4ld79bt3 from 'node:url';
-import CJS_COMPAT_NODE_PATH_3ov4ld79bt3 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_3ov4ld79bt3 from "node:module";
+import CJS_COMPAT_NODE_URL_f6rwsm0jxpo from 'node:url';
+import CJS_COMPAT_NODE_PATH_f6rwsm0jxpo from 'node:path';
+import CJS_COMPAT_NODE_MODULE_f6rwsm0jxpo from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_3ov4ld79bt3.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_3ov4ld79bt3.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_3ov4ld79bt3.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_f6rwsm0jxpo.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_f6rwsm0jxpo.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_f6rwsm0jxpo.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
-  deprecationMessage,
-  errorMessage,
-  firstValue,
-  isRecord,
-  namedItems,
   parseStoryFile,
-  readCssPropertySyntax,
-  readTypeText,
-  resolveStoryComponent,
-  trimmedOrUndefined
-} from "./chunk-GDY64HEP.js";
+  resolveStoryComponent
+} from "./chunk-A2ZEEPU6.js";
 
 // src/docgen/docgen-worker.ts
 import { createLazyDocgenMiddleware } from "storybook/internal/common";
-import { logger as logger2 } from "storybook/internal/node-logger";
+import { logger as logger5 } from "storybook/internal/node-logger";
 
 // src/docgen/component-docgen/build-docgen.ts
 import { getComponentIdFromEntry, getStoryImportPathFromEntry } from "storybook/internal/common";
-import { extractComponentDescription, extractDescription } from "storybook/internal/csf-tools";
-import { resolve } from "node:path";
+import {
+  extractComponentDescription,
+  extractDescription
+} from "storybook/internal/csf-tools";
+
+// node_modules/pathe/dist/shared/pathe.ff20891b.mjs
+var _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
+function normalizeWindowsPath(input = "") {
+  return input && input.replace(/\\/g, "/").replace(_DRIVE_LETTER_START_RE, (r) => r.toUpperCase());
+}
+var _UNC_REGEX = /^[/\\]{2}/, _IS_ABSOLUTE_RE = /^[/\\](?![/\\])|^[/\\]{2}(?!\.)|^[A-Za-z]:[/\\]/, _DRIVE_LETTER_RE = /^[A-Za-z]:$/, _ROOT_FOLDER_RE = /^\/([A-Za-z]:)?$/;
+var normalize = function(path2) {
+  if (path2.length === 0)
+    return ".";
+  path2 = normalizeWindowsPath(path2);
+  let isUNCPath = path2.match(_UNC_REGEX), isPathAbsolute = isAbsolute(path2), trailingSeparator = path2[path2.length - 1] === "/";
+  return path2 = normalizeString(path2, !isPathAbsolute), path2.length === 0 ? isPathAbsolute ? "/" : trailingSeparator ? "./" : "." : (trailingSeparator && (path2 += "/"), _DRIVE_LETTER_RE.test(path2) && (path2 += "/"), isUNCPath ? isPathAbsolute ? `//${path2}` : `//./${path2}` : isPathAbsolute && !isAbsolute(path2) ? `/${path2}` : path2);
+}, join = function(...arguments_) {
+  if (arguments_.length === 0)
+    return ".";
+  let joined;
+  for (let argument of arguments_)
+    argument && argument.length > 0 && (joined === void 0 ? joined = argument : joined += `/${argument}`);
+  return joined === void 0 ? "." : normalize(joined.replace(/\/\/+/g, "/"));
+};
+function cwd() {
+  return typeof process < "u" && typeof process.cwd == "function" ? process.cwd().replace(/\\/g, "/") : "/";
+}
+var resolve = function(...arguments_) {
+  arguments_ = arguments_.map((argument) => normalizeWindowsPath(argument));
+  let resolvedPath = "", resolvedAbsolute = !1;
+  for (let index = arguments_.length - 1; index >= -1 && !resolvedAbsolute; index--) {
+    let path2 = index >= 0 ? arguments_[index] : cwd();
+    !path2 || path2.length === 0 || (resolvedPath = `${path2}/${resolvedPath}`, resolvedAbsolute = isAbsolute(path2));
+  }
+  return resolvedPath = normalizeString(resolvedPath, !resolvedAbsolute), resolvedAbsolute && !isAbsolute(resolvedPath) ? `/${resolvedPath}` : resolvedPath.length > 0 ? resolvedPath : ".";
+};
+function normalizeString(path2, allowAboveRoot) {
+  let res = "", lastSegmentLength = 0, lastSlash = -1, dots = 0, char = null;
+  for (let index = 0; index <= path2.length; ++index) {
+    if (index < path2.length)
+      char = path2[index];
+    else {
+      if (char === "/")
+        break;
+      char = "/";
+    }
+    if (char === "/") {
+      if (!(lastSlash === index - 1 || dots === 1)) if (dots === 2) {
+        if (res.length < 2 || lastSegmentLength !== 2 || res[res.length - 1] !== "." || res[res.length - 2] !== ".") {
+          if (res.length > 2) {
+            let lastSlashIndex = res.lastIndexOf("/");
+            lastSlashIndex === -1 ? (res = "", lastSegmentLength = 0) : (res = res.slice(0, lastSlashIndex), lastSegmentLength = res.length - 1 - res.lastIndexOf("/")), lastSlash = index, dots = 0;
+            continue;
+          } else if (res.length > 0) {
+            res = "", lastSegmentLength = 0, lastSlash = index, dots = 0;
+            continue;
+          }
+        }
+        allowAboveRoot && (res += res.length > 0 ? "/.." : "..", lastSegmentLength = 2);
+      } else
+        res.length > 0 ? res += `/${path2.slice(lastSlash + 1, index)}` : res = path2.slice(lastSlash + 1, index), lastSegmentLength = index - lastSlash - 1;
+      lastSlash = index, dots = 0;
+    } else char === "." && dots !== -1 ? ++dots : dots = -1;
+  }
+  return res;
+}
+var isAbsolute = function(p) {
+  return _IS_ABSOLUTE_RE.test(p);
+};
+var relative = function(from, to) {
+  let _from = resolve(from).replace(_ROOT_FOLDER_RE, "$1").split("/"), _to = resolve(to).replace(_ROOT_FOLDER_RE, "$1").split("/");
+  if (_to[0][1] === ":" && _from[0][1] === ":" && _from[0] !== _to[0])
+    return _to.join("/");
+  let _fromCopy = [..._from];
+  for (let segment of _fromCopy) {
+    if (_to[0] !== segment)
+      break;
+    _from.shift(), _to.shift();
+  }
+  return [..._from.map(() => ".."), ..._to].join("/");
+}, dirname = function(p) {
+  let segments = normalizeWindowsPath(p).replace(/\/$/, "").split("/").slice(0, -1);
+  return segments.length === 1 && _DRIVE_LETTER_RE.test(segments[0]) && (segments[0] += "/"), segments.join("/") || (isAbsolute(p) ? "/" : ".");
+};
 
 // src/arg-keys.ts
 var DEFAULT_SLOT_NAME = "default";
@@ -37,6 +112,7 @@ function toArgKey(category, name) {
   return category === "cssProperties" ? name : `${name}${ARG_KEY_SUFFIXES[category]}`;
 }
 var ARG_KEY_SUFFIXES = {
+  attributes: "-attr",
   events: "-event",
   methods: "-method",
   slots: "-slot",
@@ -44,6 +120,37 @@ var ARG_KEY_SUFFIXES = {
   cssStates: "-state"
 };
 
+// src/docgen/component-docgen/utils.ts
+function isRecord(value) {
+  return value !== null && typeof value == "object";
+}
+function namedItems(value) {
+  return Array.isArray(value) ? value.filter((item) => isRecord(item) && typeof item.name == "string") : [];
+}
+function errorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+var trimmedOrUndefined = (text) => typeof text == "string" && text.trim() || void 0;
+function deprecationMessage(deprecated) {
+  if (deprecated)
+    return typeof deprecated == "string" ? trimmedOrUndefined(deprecated) : "deprecated";
+}
+function firstValue(sources, read) {
+  for (let source of sources) {
+    let value = read(source);
+    if (value !== void 0)
+      return value;
+  }
+}
+
+// src/docgen/component-docgen/manifest/type-text.ts
+function readTypeText({ type, parsedType }) {
+  return isRecord(parsedType) && typeof parsedType.text == "string" && parsedType.text.trim() ? parsedType.text : typeof type?.text == "string" ? type.text : void 0;
+}
+function readCssPropertySyntax(property) {
+  return property.syntax ?? readTypeText(property);
+}
+
 // src/docgen/component-docgen/manifest/members.ts
 function isPublicField(member) {
   return isField(member) && isPublicMember(member);
@@ -86,34 +193,37 @@ function classifyDeclaration(declaration) {
   };
 }
 function isBackedByAttribute(field, attributes) {
+  return attributes.some((attribute) => isAttributeField(attribute, field));
+}
+function foldsIntoAttributeRow(field, attributes) {
   return attributes.some(
-    (attribute) => attribute.field === field || attribute.attribute.name === field.name
+    (attribute) => attribute.attribute.name === field.name && isAttributeField(attribute, field)
   );
 }
+function isAttributeField({ attribute, field: backingField2 }, field) {
+  return backingField2 === field || attribute.fieldName === void 0 && attribute.name === field.name;
+}
 function backingField(attribute, fields) {
   return attribute.fieldName === void 0 ? void 0 : fields.find((field) => field.name === attribute.fieldName);
 }
 
 // src/docgen/component-docgen/api-description.ts
 var IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
-function buildApiDescription(declaration, typeProperty) {
-  let api = classifyDeclaration(declaration), attributes = api.attributes.map((attribute) => attributeDoc(attribute, typeProperty)), properties = api.fields.filter((field) => !isBackedByAttribute(field, api.attributes));
+function buildApiDescription(declaration) {
+  let api = classifyDeclaration(declaration), attributes = api.attributes.map(attributeDoc), properties = api.fields.filter((field) => !isBackedByAttribute(field, api.attributes));
   if (attributes.length === 0 && properties.length === 0 && api.events.length === 0 && api.methods.length === 0 && api.slots.length === 0 && api.cssProperties.length === 0 && api.cssParts.length === 0 && api.cssStates.length === 0)
     return;
   let typePrefix = declaration.name.replace(/\W+/g, "");
   return [
     attributesSection(typePrefix, attributes),
-    propertiesSection(typePrefix, properties, typeProperty),
-    eventsSection(typePrefix, api.events, typeProperty),
-    methodsSection(typePrefix, api.methods, typeProperty),
+    propertiesSection(typePrefix, properties),
+    eventsSection(typePrefix, api.events),
+    methodsSection(typePrefix, api.methods),
     listSection(
       "Slots",
       api.slots.map((slot) => listItem(slot.name || DEFAULT_SLOT_NAME, memberDoc(slot)))
     ),
-    listSection(
-      "CSS Custom Properties",
-      api.cssProperties.map((property) => cssPropertyListItem(property, typeProperty))
-    ),
+    listSection("CSS Custom Properties", api.cssProperties.map(cssPropertyListItem)),
     listSection(
       "CSS Parts",
       api.cssParts.map((part) => listItem(part.name, memberDoc(part)))
@@ -140,13 +250,13 @@ function attributesSection(typePrefix, attributes) {
       })
     );
 }
-function propertiesSection(typePrefix, properties, typeProperty) {
+function propertiesSection(typePrefix, properties) {
   if (properties.length !== 0)
     return typeSection(
       "Properties",
       `${typePrefix}Properties`,
       properties.flatMap((property) => {
-        let doc = memberDoc(property), type = fieldType(property, typeProperty);
+        let doc = memberDoc(property), type = fieldType(property);
         return [
           ...docComment(doc),
           property.readonly === !0 ? `  readonly ${memberName(property.name)}: ${type}${memberDefault(doc)};` : `  ${memberName(property.name)}?: ${type}${memberDefault(doc)};`
@@ -154,28 +264,25 @@ function propertiesSection(typePrefix, properties, typeProperty) {
       })
     );
 }
-function eventsSection(typePrefix, events, typeProperty) {
+function eventsSection(typePrefix, events) {
   if (events.length !== 0)
     return typeSection(
       "Events",
       `${typePrefix}Events`,
       events.flatMap((event) => [
         ...docComment(memberDoc(event)),
-        `  ${memberName(event.name)}: ${readTypeText(event, typeProperty) ?? "Event"};`
+        `  ${memberName(event.name)}: ${readTypeText(event) ?? "Event"};`
       ])
     );
 }
-function methodsSection(typePrefix, methods, typeProperty) {
+function methodsSection(typePrefix, methods) {
   if (methods.length !== 0)
     return typeSection(
       "Methods",
       `${typePrefix}Methods`,
       methods.flatMap((method) => [
         ...docComment(memberDoc(method)),
-        `  ${memberName(method.name)}(${formatParameters(method)}): ${methodReturnType(
-          method,
-          typeProperty
-        )};`
+        `  ${memberName(method.name)}(${formatParameters(method)}): ${methodReturnType(method)};`
       ])
     );
 }
@@ -190,8 +297,8 @@ function listSection(heading, items) {
     return [`## ${heading}`, "", ...items].join(`
 `);
 }
-function cssPropertyListItem(property, typeProperty) {
-  let syntax = readCssPropertySyntax(property, typeProperty), name = property.name, syntaxText = syntax ? ` \`${syntax}\`` : "";
+function cssPropertyListItem(property) {
+  let syntax = readCssPropertySyntax(property), name = property.name, syntaxText = syntax ? ` \`${syntax}\`` : "";
   return listItemPrefix(`${name}${syntaxText}`, memberDoc(property));
 }
 function listItem(name, doc) {
@@ -201,25 +308,25 @@ function listItemPrefix(prefix, doc) {
   let text = doc.text ? `: ${doc.text}` : "", defaultText = doc.defaultValue === void 0 ? "" : ` Default: ${doc.defaultValue}.`, deprecatedText = doc.deprecated === void 0 ? "" : doc.deprecated === "deprecated" ? " Deprecated." : ` Deprecated: ${doc.deprecated}.`;
   return `- ${prefix}${text}${defaultText}${deprecatedText}`;
 }
-function attributeDoc(attribute, typeProperty) {
+function attributeDoc(attribute) {
   let { field } = attribute;
   return {
     ...attribute,
-    type: attributeType(attribute, typeProperty),
+    type: attributeType(attribute),
     doc: memberDoc(field, attribute.attribute)
   };
 }
-function attributeType({ attribute, field }, typeProperty) {
+function attributeType({ attribute, field }) {
   return firstValue(
     [field, attribute],
-    (source) => source ? trimmedOrUndefined(readTypeText(source, typeProperty)) : void 0
+    (source) => source ? trimmedOrUndefined(readTypeText(source)) : void 0
   ) ?? "string";
 }
-function fieldType(field, typeProperty) {
-  return trimmedOrUndefined(readTypeText(field, typeProperty)) ?? "unknown";
+function fieldType(field) {
+  return trimmedOrUndefined(readTypeText(field)) ?? "unknown";
 }
-function methodReturnType(method, typeProperty) {
-  return method.return ? readTypeText(method.return, typeProperty) ?? "void" : "void";
+function methodReturnType(method) {
+  return method.return ? readTypeText(method.return) ?? "void" : "void";
 }
 function memberDoc(...sources) {
   return {
@@ -263,9 +370,9 @@ var ARRAY_RE = /^(?:Array<(.+)>|(.+)\[\])$/, DROPPED_MEMBERS = /* @__PURE__ */ n
   "never",
   "string & {}",
   "(string & {})"
-]), FUNCTION_RE = /^(new\s+)?(<.*>\s*)?\(.*\)\s*=>/, UNKNOWN_ARRAY_ELEMENT_TYPE = { name: "other", value: "" }, MAX_ARRAY_DEPTH = 8;
+]), FUNCTION_RE = /^(new\s+)?(<.*>\s*)?\(.*\)\s*=>/, QUOTED_OR_WHITESPACE_RE = /(['"])(?:\\.|(?!\1)[^\\])*\1|\s+/g, UNKNOWN_ARRAY_ELEMENT_TYPE = { name: "other", value: "" }, MAX_ARRAY_DEPTH = 8;
 function parseTypeText(text, depth = 0) {
-  let trimmed = text?.trim() ?? "", members = normalizeMembers(trimmed);
+  let members = normalizeMembers(collapseWhitespace(text ?? ""));
   if (members.length === 0)
     return;
   let literalValues = members.map(parseLiteral).filter((literal) => literal !== void 0);
@@ -310,6 +417,9 @@ function parseTypeText(text, depth = 0) {
 function normalizeMembers(text) {
   return text ? flattenMembers(text).filter((member) => member && !DROPPED_MEMBERS.has(member)) : [];
 }
+function collapseWhitespace(text) {
+  return text.replace(QUOTED_OR_WHITESPACE_RE, (match) => /^\s/.test(match) ? " " : match).trim();
+}
 function flattenMembers(text) {
   return splitTopLevel(text).flatMap((part) => {
     let member = stripWrappingParens(part);
@@ -389,50 +499,45 @@ var NAMED_ENTRY_CATEGORIES = {
   cssParts: "css shadow parts",
   cssStates: "css states"
 };
-function mapArgTypes(declaration, typeProperty) {
+function mapArgTypes(declaration) {
   let api = classifyDeclaration(declaration);
   return {
     ...Object.fromEntries([
-      ...api.events.flatMap((event) => eventEntries(event, typeProperty)),
+      ...api.events.flatMap(eventEntries),
       ...api.methods.map(methodEntry),
       ...api.slots.map((slot) => namedEntry(slot, "slots")),
       ...api.cssParts.map((part) => namedEntry(part, "cssParts")),
       ...api.cssStates.map((state) => namedEntry(state, "cssStates")),
-      ...api.cssProperties.map((property) => cssPropertyEntry(property, typeProperty))
+      ...api.cssProperties.map(cssPropertyEntry)
     ]),
-    ...mapAttributesAndProperties(api, typeProperty)
+    ...mapAttributesAndProperties(api)
   };
 }
-function mapAttributesAndProperties(api, typeProperty) {
-  let argTypes = {}, properties = api.fields.filter(
-    (field) => !api.attributes.some(({ attribute }) => attribute.name === field.name)
-  );
+function mapAttributesAndProperties(api) {
+  let argTypes = {}, properties = api.fields.filter((field) => !foldsIntoAttributeRow(field, api.attributes));
   for (let field of properties) {
     let attribute = api.attributes.find(({ field: backingField2 }) => backingField2 === field);
     argTypes[field.name] = toArgType({
       key: field.name,
       category: "properties",
-      sources: attribute ? [field, attribute.attribute] : [field],
-      typeProperty
+      sources: attribute ? [field, attribute.attribute] : [field]
     });
   }
-  for (let { attribute, field } of api.attributes)
-    argTypes[attribute.name] = toArgType({
+  for (let { attribute, field } of api.attributes) {
+    let key = Object.hasOwn(argTypes, attribute.name) ? toArgKey("attributes", attribute.name) : attribute.name;
+    argTypes[key] = toArgType({
       key: attribute.name,
       category: "attributes",
-      sources: field ? [field, attribute] : [attribute],
-      typeProperty
+      sources: field ? [field, attribute] : [attribute]
     });
+  }
   return argTypes;
 }
-function toArgType({ key, category, sources, typeProperty }) {
+function toArgType({ key, category, sources }) {
   let rawTypeText = firstValue(
     sources,
     (source) => typeof source.type?.text == "string" ? source.type.text : void 0
-  ), text = firstValue(
-    sources,
-    (source) => trimmedOrUndefined(readTypeText(source, typeProperty))
-  ), parsed = parseTypeText(text) ?? (category === "attributes" ? { type: { name: "string" } } : { type: { name: "other", value: text ?? "" }, control: !1 }), readonly = firstValue(
+  ), text = firstValue(sources, (source) => trimmedOrUndefined(readTypeText(source))), parsed = parseTypeText(text) ?? (category === "attributes" ? { type: { name: "string" } } : { type: { name: "other", value: text ?? "" }, control: !1 }), readonly = firstValue(
     sources,
     (source) => "readonly" in source && source.readonly === !0 ? !0 : void 0
   );
@@ -445,8 +550,8 @@ function toArgType({ key, category, sources, typeProperty }) {
     }
   });
 }
-function eventEntries(event, typeProperty) {
-  let text = readTypeText(event, typeProperty) ?? "CustomEvent";
+function eventEntries(event) {
+  let text = readTypeText(event) ?? "CustomEvent";
   return [
     [
       toArgKey("events", event.name),
@@ -474,8 +579,8 @@ function namedEntry(item, category) {
     memberArgType(name, [item], NAMED_ENTRY_CATEGORIES[category], { type: { name: "string" } })
   ];
 }
-function cssPropertyEntry(property, typeProperty) {
-  let syntax = readCssPropertySyntax(property, typeProperty);
+function cssPropertyEntry(property) {
+  let syntax = readCssPropertySyntax(property);
   return [
     toArgKey("cssProperties", property.name),
     memberArgType(property.name, [property], "css custom properties", {
@@ -519,14 +624,14 @@ function cssCustomPropertyControl(syntax) {
 }
 
 // src/docgen/component-docgen/build-docgen.ts
-function buildDocgenPayload(input, context) {
+async function buildDocgenPayload(input, context) {
   let storyImportPath = getStoryImportPathFromEntry(input.entry);
   if (!storyImportPath)
     return;
-  let id = getComponentIdFromEntry(input.entry), path = storyImportPath, fail = (name, error) => ({
+  let id = getComponentIdFromEntry(input.entry), path2 = storyImportPath, fail = (name, error) => ({
     id,
     name,
-    path,
+    path: path2,
     jsDocTags: {},
     error
   }), storyFilePath = resolve(process.cwd(), storyImportPath), csf = parseStoryFile(storyFilePath, input.entry.title);
@@ -537,34 +642,31 @@ function buildDocgenPayload(input, context) {
     if (resolved.reason === "no-meta-component")
       return;
     let componentName = input.entry.title.slice(input.entry.title.lastIndexOf("/") + 1);
-    return fail(componentName, {
+    return resolved.reason === "unresolvable-meta-spread" ? fail(componentName, {
+      name: "unresolvable-meta-spread",
+      message: `\`meta.component\` could not be read because \`${resolved.spread}\` is not a local object literal. Set \`component: '<tag-name>'\` on the default export.`
+    }) : fail(componentName, {
       name: "component-not-a-tag",
       message: `\`meta.component\` must be the element's tag name as a string, got \`${resolved.expression}\``
     });
   }
-  let { tag } = resolved, found = context.cem.tags.get(tag);
-  if (!found)
-    return fail(
-      tag,
-      context.cem.errors[0] ?? {
-        name: "tag-not-found",
-        message: `No declaration for "${tag}" was found in ${context.cem.paths.join(", ")}. If the element is new, rerun the custom elements manifest analyzer.`
-      }
-    );
+  let { tag } = resolved, found = await context.resolver.find(tag, { storyFilePath });
+  if (!("declaration" in found))
+    return fail(tag, found);
   let { description, summary, jsDocTags } = extractComponentDescription(
-    extractDescription(csf._metaStatement) || void 0,
+    extractDescription(csf._metaStatement, csf.editor) || void 0,
     found.declaration.description,
     declarationTags(found.declaration)
   );
   return {
     id,
     name: tag,
-    path,
+    path: path2,
     description,
     summary,
     jsDocTags,
-    argTypes: mapArgTypes(found.declaration, context.typeProperty),
-    apiDescription: buildApiDescription(found.declaration, context.typeProperty),
+    argTypes: mapArgTypes(found.declaration),
+    apiDescription: buildApiDescription(found.declaration),
     renderer: "web-components",
     ...found.warning ? { warning: found.warning } : {},
     customElementsManifest: {
@@ -583,7 +685,7 @@ function declarationTags(declaration) {
 // src/docgen/component-docgen/manifest/cem-manager.ts
 import { logger } from "storybook/internal/node-logger";
 import { stat } from "node:fs/promises";
-import { relative as relative2 } from "node:path";
+import { relative as relative3 } from "node:path";
 
 // src/docgen/component-docgen/manifest/build-tag-index.ts
 function buildTagIndex(manifest) {
@@ -748,21 +850,21 @@ function modulePathOf(module) {
 
 // src/docgen/component-docgen/manifest/load-manifest.ts
 import { readFile } from "node:fs/promises";
-import { relative } from "node:path";
-var isFailedManifest = (result) => "error" in result, isCustomElementsManifest = (value) => isRecord(value) && Array.isArray(value.modules), unsupportedMessage = (path) => `${path} uses the web-component-analyzer manifest shape. The Storybook docgen server reads Custom Elements Manifests only; generate one with @custom-elements-manifest/analyzer.`, invalidMessage = (path, detail) => detail ? `Invalid Custom Elements Manifest at ${path}: ${detail}` : `Invalid Custom Elements Manifest at ${path}: expected a top-level modules array.`;
-function classifyManifest(path, parsed) {
-  return isRecord(parsed) ? isCustomElementsManifest(parsed) ? { path, manifest: parsed } : parsed.version === "experimental" || Array.isArray(parsed.tags) ? { path, error: { name: "manifest-unsupported", message: unsupportedMessage(path) } } : { path, error: { name: "manifest-invalid", message: invalidMessage(path) } } : { path, error: { name: "manifest-invalid", message: invalidMessage(path) } };
+import { relative as relative2 } from "node:path";
+var isFailedManifest = (result) => "error" in result, isCustomElementsManifest = (value) => isRecord(value) && Array.isArray(value.modules), unsupportedMessage = (path2) => `${path2} uses the web-component-analyzer manifest shape. The Storybook docgen server reads Custom Elements Manifests only; generate one with @custom-elements-manifest/analyzer.`, invalidMessage = (path2, detail) => detail ? `Invalid Custom Elements Manifest at ${path2}: ${detail}` : `Invalid Custom Elements Manifest at ${path2}: expected a top-level modules array.`;
+function classifyManifest(path2, parsed) {
+  return isRecord(parsed) ? isCustomElementsManifest(parsed) ? { path: path2, manifest: parsed } : parsed.version === "experimental" || Array.isArray(parsed.tags) ? { path: path2, error: { name: "manifest-unsupported", message: unsupportedMessage(path2) } } : { path: path2, error: { name: "manifest-invalid", message: invalidMessage(path2) } } : { path: path2, error: { name: "manifest-invalid", message: invalidMessage(path2) } };
 }
 async function loadManifest(absolutePath) {
-  let path = relative(process.cwd(), absolutePath);
+  let path2 = relative2(process.cwd(), absolutePath);
   try {
-    return classifyManifest(path, JSON.parse(await readFile(absolutePath, "utf8")));
+    return classifyManifest(path2, JSON.parse(await readFile(absolutePath, "utf8")));
   } catch (error) {
     return {
-      path,
+      path: path2,
       error: {
         name: "manifest-invalid",
-        message: invalidMessage(path, errorMessage(error))
+        message: invalidMessage(path2, errorMessage(error))
       }
     };
   }
@@ -773,9 +875,12 @@ var CemManager = class {
   constructor(absolutePaths) {
     this.states = absolutePaths.map((absolutePath) => ({
       absolutePath,
-      path: relative2(process.cwd(), absolutePath)
+      path: relative3(process.cwd(), absolutePath)
     }));
   }
+  async find(tag) {
+    return findInSnapshot(await this.refresh(), tag);
+  }
   refresh() {
     return this.current ? (this.next ??= this.current.then(
       () => (this.next = void 0, this.refresh()),
@@ -832,8 +937,14 @@ var CemManager = class {
     state.lastWarning !== message && (state.lastWarning = message, logger.warn(message));
   }
 };
+function findInSnapshot(snapshot, tag) {
+  return snapshot.tags.get(tag) ?? snapshot.errors[0] ?? {
+    name: "tag-not-found",
+    message: `No declaration for "${tag}" was found in ${snapshot.paths.join(", ")}. If the element is new, rerun the custom elements manifest analyzer.`
+  };
+}
 function buildSnapshot(states) {
-  let tags = /* @__PURE__ */ new Map(), errors = [], paths = states.map(({ path }) => path);
+  let tags = /* @__PURE__ */ new Map(), errors = [], paths = states.map(({ path: path2 }) => path2);
   for (let state of states) {
     if (state.entry) {
       let warning = state.error ? staleWarning(state.error) : void 0;
@@ -853,44 +964,343 @@ function buildSnapshot(states) {
     paths
   };
 }
-function failureFromError(path, error) {
+function failureFromError(path2, error) {
   return {
     name: "manifest-invalid",
-    message: `Invalid Custom Elements Manifest at ${path}: ${errorMessage(error)}`
+    message: `Invalid Custom Elements Manifest at ${path2}: ${errorMessage(error)}`
   };
 }
 function isNotFound(error) {
   return error instanceof Error && "code" in error && error.code === "ENOENT";
 }
-function missingManifestError(path) {
+function missingManifestError(path2) {
   return {
     name: "manifest-not-found",
-    message: `Custom Elements Manifest ${path} not found yet; docs load once the analyzer writes it`
+    message: `Custom Elements Manifest ${path2} not found yet; docs load once the analyzer writes it`
   };
 }
 function staleWarning(error) {
   return `${error.message}; using the last valid version`;
 }
 
+// src/docgen/component-docgen/source/generator.ts
+import { logger as logger2 } from "storybook/internal/node-logger";
+var loadPromise;
+async function loadGenerator() {
+  return loadPromise ??= loadGeneratorModule(), loadPromise;
+}
+async function loadGeneratorModule() {
+  let [generator, lit] = await Promise.all([
+    import("@wc-toolkit/cem-generator"),
+    import("@wc-toolkit/cem-generator-lit")
+  ]);
+  return {
+    generate: (tsConfigPath, files) => generator.generateCem({
+      tsConfigPath,
+      include: files,
+      plugins: [lit.litPlugin()],
+      validation: {
+        invariants: "warning",
+        onWarning: (message) => logger2.debug(message)
+      },
+      modulePathResolver: { skip: !0 }
+    })
+  };
+}
+
+// src/docgen/component-docgen/source/source-manager.ts
+import { logger as logger4 } from "storybook/internal/node-logger";
+
+// src/docgen/component-docgen/source/generator-manager.ts
+import {
+  ComponentMetaManager,
+  parseTsconfigCommandLine
+} from "storybook/internal/component-meta";
+
+// src/docgen/component-docgen/source/generator-project.ts
+import { isInNodeModules } from "storybook/internal/common";
+import {
+  filterSourceFilePaths
+} from "storybook/internal/component-meta";
+import { logger as logger3 } from "storybook/internal/node-logger";
+var GeneratorProject = class {
+  constructor(typescript, generator, commandLine, configFileName, getCommandLineFn) {
+    this.typescript = typescript;
+    this.generator = generator;
+    this.commandLine = commandLine;
+    this.configFileName = configFileName;
+    this.getCommandLineFn = getCommandLineFn;
+    this.importsByFile = /* @__PURE__ */ new Map();
+    this.rootsStale = !1;
+    this.revisionCount = 0;
+  }
+  /** Moves on every file event or new root, so callers can tell whether a cached miss is still valid. */
+  get revision() {
+    return this.revisionCount;
+  }
+  getCommandLine() {
+    return this.rootsStale && this.getCommandLineFn && (this.commandLine = this.getCommandLineFn()), this.rootsStale = !1, this.commandLine;
+  }
+  rootFileNames() {
+    return this.getCommandLine().fileNames;
+  }
+  hasSourceFile(fileName) {
+    let normalized = normalize(fileName);
+    return this.importsByFile.has(normalized) || this.rootFileNames().includes(normalized);
+  }
+  ensureFiles(fileNames) {
+    for (let fileName of fileNames.map(normalize))
+      this.commandLine.fileNames.includes(fileName) || (this.commandLine.fileNames.push(fileName), this.revisionCount++);
+  }
+  getSourceFilePaths() {
+    return filterSourceFilePaths([
+      .../* @__PURE__ */ new Set([...this.rootFileNames(), ...this.importsByFile.keys()])
+    ]);
+  }
+  onFilesChanged(changes) {
+    for (let { filePath, type } of changes) {
+      if (type === "changed") {
+        this.importsByFile.delete(normalize(filePath));
+        continue;
+      }
+      this.importsByFile.clear(), this.rootsStale = !0;
+    }
+    this.revisionCount++;
+  }
+  dispose() {
+    this.importsByFile.clear();
+  }
+  createManifestForRoots(rootPaths) {
+    let roots = rootPaths.map(normalize), closure = this.importClosure(roots);
+    if (closure.length === 0) {
+      this.debug(`none of ${rootPaths.join(", ")} could be read`);
+      return;
+    }
+    let tsConfigPath = this.configFileName ?? join(commonDirectory(roots), "tsconfig.json");
+    return this.generator.generate(tsConfigPath, closure);
+  }
+  importClosure(roots) {
+    let closure = /* @__PURE__ */ new Set(), queue = [...roots];
+    for (; queue.length > 0; ) {
+      let fileName = queue.pop();
+      if (closure.has(fileName) || isInNodeModules(fileName))
+        continue;
+      let imports = this.importsOf(fileName);
+      imports && (closure.add(fileName), queue.push(...imports));
+    }
+    return [...closure];
+  }
+  importsOf(fileName) {
+    let { sys } = this.typescript, mtime = sys.getModifiedTime?.(fileName)?.valueOf(), cached = this.importsByFile.get(fileName);
+    if (cached && cached.mtime === mtime)
+      return cached.imports;
+    let text = sys.readFile(fileName);
+    if (text === void 0) {
+      this.importsByFile.delete(fileName);
+      return;
+    }
+    let { options } = this.getCommandLine(), imports = this.typescript.preProcessFile(text, !0, !0).importedFiles.flatMap(
+      ({ fileName: specifier }) => this.typescript.resolveModuleName(specifier, fileName, options, sys).resolvedModule?.resolvedFileName ?? []
+    ).map(normalize);
+    return this.importsByFile.set(fileName, { mtime, imports }), imports;
+  }
+  debug(message) {
+    logger3.debug(
+      `[web-components-cem] ${message}${this.configFileName ? ` (${this.configFileName})` : ""}`
+    );
+  }
+};
+function commonDirectory(fileNames) {
+  let [first, ...rest] = fileNames.map((fileName) => dirname(fileName).split("/")), length = first.length;
+  for (let segments of rest) {
+    let mismatch = first.slice(0, length).findIndex((segment, index) => segment !== segments[index]);
+    mismatch !== -1 && (length = mismatch);
+  }
+  return first.slice(0, length).join("/") || "/";
+}
+
+// src/docgen/component-docgen/source/generator-manager.ts
+var GeneratorManager = class extends ComponentMetaManager {
+  constructor(typescript, generator) {
+    super(typescript, createGeneratorProjectFactory(typescript, generator));
+  }
+};
+function createGeneratorProjectFactory(typescript, generator) {
+  return {
+    // A JS story outside a tsconfig's files falls to the inferred project, whose generator run
+    // scans the story's folder with `allowJs`; matching it to the tsconfig would hide it instead.
+    parseCommandLine: (tsconfig) => parseTsconfigCommandLine(typescript, tsconfig),
+    createConfiguredProject: (commandLine, tsconfig, getCommandLine) => new GeneratorProject(typescript, generator, commandLine, tsconfig, getCommandLine),
+    createInferredProject: () => new GeneratorProject(
+      typescript,
+      generator,
+      {
+        options: {
+          allowJs: !0,
+          target: typescript.ScriptTarget.Latest,
+          module: typescript.ModuleKind.ESNext,
+          moduleResolution: typescript.ModuleResolutionKind.Bundler
+        },
+        fileNames: [],
+        errors: []
+      },
+      void 0
+    )
+  };
+}
+
+// src/docgen/component-docgen/source/source-manager.ts
+var SourceManager = class {
+  constructor(typescript, generator, previewFilePath) {
+    this.typescript = typescript;
+    this.generator = generator;
+    this.previewFilePath = previewFilePath;
+    this.rootsByTag = /* @__PURE__ */ new WeakMap();
+    this.literalMisses = /* @__PURE__ */ new WeakMap();
+    /** Keyed by story file, then tag; valid until a searched project sees a file event. */
+    this.misses = /* @__PURE__ */ new Map();
+    this.warnedAnalysisFailures = /* @__PURE__ */ new Set();
+  }
+  async find(tag, lookup) {
+    try {
+      let manager = this.getManager(), story = normalize(lookup.storyFilePath), preview = this.previewFilePath ? normalize(this.previewFilePath) : void 0, storyProject = manager.getProjectForFile(story), previewProject = preview ? manager.getProjectForFile(preview) : void 0, projects = [.../* @__PURE__ */ new Set([storyProject, previewProject ?? storyProject])], tried = [story, ...preview ? [preview] : []], miss = this.misses.get(story)?.get(tag);
+      if (miss && projects.every((project) => miss.revisions.get(project) === project.revision))
+        return miss.error;
+      let probes = [
+        () => this.findFromRememberedRoot(tag, storyProject),
+        () => this.findFromRoots(tag, [story], storyProject),
+        () => preview && previewProject ? this.findFromRoots(tag, [preview], previewProject) : void 0,
+        ...projects.map((project) => () => this.findFromTagLiteral(tag, project, tried))
+      ];
+      for (let probe of probes) {
+        let found = probe();
+        if (found)
+          return found;
+      }
+      let error = tagNotFound(tag, story, preview, projects), storyMisses = this.misses.get(story) ?? /* @__PURE__ */ new Map();
+      return storyMisses.set(tag, {
+        error,
+        revisions: new Map(projects.map((project) => [project, project.revision]))
+      }), this.misses.set(story, storyMisses), error;
+    } catch (error) {
+      let message = `Failed to analyze sources for "${tag}": ${errorMessage(error)}`;
+      return this.warnOnce(message), { name: "source-analysis-failed", message };
+    }
+  }
+  dispose() {
+    this.manager?.dispose(), this.manager = void 0;
+  }
+  getManager() {
+    return this.manager || (this.manager = new GeneratorManager(this.typescript, this.generator), this.manager.startWatching()), this.manager;
+  }
+  findFromRememberedRoot(tag, project) {
+    let root = this.rootsByTag.get(project)?.get(tag);
+    if (!root)
+      return;
+    let found = this.findFromRoots(tag, [root], project);
+    return found || this.rootsByTag.get(project)?.delete(tag), found;
+  }
+  findFromTagLiteral(tag, project, tried) {
+    let misses = this.literalMisses.get(project) ?? /* @__PURE__ */ new Map();
+    if (this.literalMisses.set(project, misses), misses.get(tag) === project.revision)
+      return;
+    let pattern = tagLiteralPattern(tag), candidates = project.rootFileNames().filter(
+      (fileName) => !tried.includes(fileName) && pattern.test(this.typescript.sys.readFile(fileName) ?? "")
+    ), found = candidates.length > 0 ? this.findFromRoots(tag, candidates, project) : void 0;
+    return found || misses.set(tag, project.revision), found;
+  }
+  findFromRoots(tag, roots, project) {
+    let manifest = project.createManifestForRoots(roots), found = manifest ? cemTagFromManifest(tag, manifest) : void 0;
+    if (!found)
+      return;
+    let projectRoots = this.rootsByTag.get(project) ?? /* @__PURE__ */ new Map();
+    return projectRoots.set(tag, found.rootPath), this.rootsByTag.set(project, projectRoots), { declaration: found.declaration, manifestPath: found.manifestPath };
+  }
+  warnOnce(message) {
+    this.warnedAnalysisFailures.has(message) || (this.warnedAnalysisFailures.add(message), logger4.warn(message));
+  }
+};
+function cemTagFromManifest(tag, manifest) {
+  let flattened = flattenInheritance(manifest), declaration = buildTagIndex(flattened).get(tag);
+  if (!declaration)
+    return;
+  let modulePath = declarationModulePath(flattened, declaration), rootPath = definitionModulePath(flattened, tag) ?? modulePath;
+  if (rootPath)
+    return {
+      declaration,
+      manifestPath: modulePath ? cwdRelative(modulePath) : "",
+      rootPath
+    };
+}
+function definitionModulePath(manifest, tag) {
+  for (let module of manifest.modules)
+    if (module.exports?.some(
+      (candidate) => candidate.kind === "custom-element-definition" && candidate.name === tag
+    ) && typeof module.path == "string")
+      return normalize(module.path);
+}
+function declarationModulePath(manifest, declaration) {
+  for (let module of manifest.modules)
+    if (Array.isArray(module.declarations) && module.declarations.includes(declaration))
+      return typeof module.path == "string" ? normalize(module.path) : void 0;
+}
+function cwdRelative(path2) {
+  return isAbsolute(path2) ? relative(process.cwd(), path2) : normalize(path2);
+}
+function tagLiteralPattern(tag) {
+  let escaped = tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`(['"\`])${escaped}\\1`);
+}
+function tagNotFound(tag, storyFilePath, previewFilePath, projects) {
+  let searched = projects.map(
+    (project) => project.configFileName ? cwdRelative(project.configFileName) : "the inferred TypeScript project"
+  ), preview = previewFilePath ? ` and preview file ${cwdRelative(previewFilePath)}` : "";
+  return {
+    name: "tag-not-found",
+    message: `No declaration for "${tag}" was found from story file ${cwdRelative(storyFilePath)}${preview}. Searched the tsconfig files covering those files: ${searched.join(", ") || "none"}. Import the element module in the story or configure customElementsManifest.`
+  };
+}
+
+// src/docgen/component-docgen/tag-resolver.ts
+function firstMatch([first, ...rest]) {
+  return {
+    async find(tag, lookup) {
+      let result = await first.find(tag, lookup);
+      for (let resolver of rest) {
+        if ("declaration" in result)
+          break;
+        result = await resolver.find(tag, lookup);
+      }
+      return result;
+    }
+  };
+}
+
 // src/docgen/docgen-worker.ts
 var createDocgenProvider = ({
   manifestPaths,
-  typeProperty
+  previewFilePath
 }) => createLazyDocgenMiddleware({
   createManager: async () => {
-    if (manifestPaths.length === 0) {
-      logger2.warn(
-        "No Custom Elements Manifest was configured; web-components server docgen is skipped. Set the `customElementsManifest` framework option or `customElements` in package.json."
-      );
-      return;
-    }
-    return new CemManager(manifestPaths);
+    let sources = await loadSourceManager(previewFilePath), [first, ...rest] = [
+      ...manifestPaths.length > 0 ? [new CemManager(manifestPaths)] : [],
+      ...sources ? [sources] : []
+    ];
+    return first ? firstMatch([first, ...rest]) : void 0;
   },
-  extract: async (manager, input) => buildDocgenPayload(input, {
-    cem: await manager.refresh(),
-    typeProperty
-  })
+  extract: async (resolver, input) => buildDocgenPayload(input, { resolver })
 });
+async function loadSourceManager(previewFilePath) {
+  try {
+    let [typescript, generator] = await Promise.all([import("typescript"), loadGenerator()]);
+    return new SourceManager(typescript.default ?? typescript, generator, previewFilePath);
+  } catch (error) {
+    logger5.warn(
+      `Web components docgen cannot generate declarations from sources: ${errorMessage(error)}`
+    );
+    return;
+  }
+}
 
 export {
   buildDocgenPayload,