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

package/dist/_browser-chunks/{chunk-IPGO7UEM.js → chunk-4CVRUPXU.js}

@@ -1,6 +1,6 @@
 import {
   entry_preview_exports
-} from "./chunk-CAPEJO4V.js";
+} from "./chunk-XOX44XZE.js";
 import {
   entry_preview_docs_exports
 } from "./chunk-EGBR6PF2.js";

package/dist/_browser-chunks/{chunk-CAPEJO4V.js → chunk-XOX44XZE.js}

@@ -27,6 +27,7 @@ function parseArgKey(key) {
       return { category, name: key.slice(0, -suffix.length) };
 }
 var ARG_KEY_SUFFIXES = {
+  attributes: "-attr",
   events: "-event",
   methods: "-method",
   slots: "-slot",
@@ -36,6 +37,9 @@ var ARG_KEY_SUFFIXES = {
 
 // src/bind-args.ts
 var BINDERS = {
+  attributes: (element, name, value) => {
+    bindPrimitiveAttribute(element, name, value);
+  },
   events: (element, name, value) => {
     typeof value == "function" && element.addEventListener(name, value);
   },
@@ -48,6 +52,8 @@ var BINDERS = {
 function bindArgs(element, args) {
   let observedAttributes = observedAttributesOf(element), styleRules = [];
   for (let [key, value] of Object.entries(args)) {
+    if (value == null)
+      continue;
     let parsedKey = parseArgKey(key);
     if (parsedKey?.category === "cssProperties") {
       bindCssCustomProperty(element, key, value);
@@ -57,16 +63,14 @@ function bindArgs(element, args) {
       assignProperty(element, key, value);
       continue;
     }
-    if (observedAttributes.has(key) && isPrimitive(value)) {
-      bindAttribute(element, key, value);
-      continue;
-    }
-    if (parsedKey) {
-      let rule = BINDERS[parsedKey.category](element, parsedKey.name, value);
-      rule && styleRules.push(rule);
-      continue;
+    if (!(observedAttributes.has(key) && bindPrimitiveAttribute(element, key, value))) {
+      if (parsedKey) {
+        let rule = BINDERS[parsedKey.category](element, parsedKey.name, value);
+        rule && styleRules.push(rule);
+        continue;
+      }
+      assignProperty(element, key, value);
     }
-    assignProperty(element, key, value);
   }
   return styleRules;
 }
@@ -83,6 +87,9 @@ function isUnset(value) {
 function assignProperty(element, key, value) {
   element[key] = value;
 }
+function bindPrimitiveAttribute(element, name, value) {
+  return isPrimitive(value) ? (bindAttribute(element, name, value), !0) : !1;
+}
 function bindAttribute(element, name, value) {
   isUnset(value) || value === !1 || element.setAttribute(name, value === !0 ? "" : String(value));
 }

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

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_seyt09815b from 'node:url';
-import CJS_COMPAT_NODE_PATH_seyt09815b from 'node:path';
-import CJS_COMPAT_NODE_MODULE_seyt09815b 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_seyt09815b.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_seyt09815b.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_seyt09815b.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
@@ -12,7 +12,7 @@ var require = CJS_COMPAT_NODE_MODULE_seyt09815b.createRequire(import.meta.url);
 import {
   parseStoryFile,
   resolveStoryComponent
-} from "./chunk-MMJPCIXK.js";
+} from "./chunk-A2ZEEPU6.js";
 
 // src/docgen/docgen-worker.ts
 import { createLazyDocgenMiddleware } from "storybook/internal/common";
@@ -20,7 +20,10 @@ 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 {
+  extractComponentDescription,
+  extractDescription
+} from "storybook/internal/csf-tools";
 
 // node_modules/pathe/dist/shared/pathe.ff20891b.mjs
 var _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
@@ -109,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",
@@ -189,10 +193,16 @@ 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);
 }
@@ -360,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);
@@ -407,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);
@@ -501,9 +514,7 @@ function mapArgTypes(declaration) {
   };
 }
 function mapAttributesAndProperties(api) {
-  let argTypes = {}, properties = api.fields.filter(
-    (field) => !api.attributes.some(({ attribute }) => attribute.name === field.name)
-  );
+  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({
@@ -512,12 +523,14 @@ function mapAttributesAndProperties(api) {
       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]
     });
+  }
   return argTypes;
 }
 function toArgType({ key, category, sources }) {
@@ -629,7 +642,10 @@ async 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}\``
     });
@@ -638,7 +654,7 @@ async function buildDocgenPayload(input, context) {
   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)
   );

package/dist/_node-chunks/chunk-A2ZEEPU6.js

@@ -0,0 +1,76 @@
+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_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
+// ------------------------------------------------------------
+
+// src/docgen/component-docgen/resolve-component/resolve-component.ts
+import {
+  isStringLiteral,
+  loadCsf,
+  oneLineTextOf,
+  resolveBindingMembers,
+  resolveObjectMembers,
+  unwrapExpression
+} from "storybook/internal/csf-tools";
+import { readFileSync } from "node:fs";
+function parseStoryFile(storyFilePath, title) {
+  try {
+    let source = readFileSync(storyFilePath, "utf8");
+    return loadCsf(source, { makeTitle: () => title, fileName: storyFilePath }).parse();
+  } catch {
+    return;
+  }
+}
+function tagFromNode(csf, node) {
+  let unwrapped = unwrapExpression(node);
+  if (isStringLiteral(unwrapped) && unwrapped.value !== "")
+    return { tag: unwrapped.value };
+  if (unwrapped.type === "TemplateLiteral" && unwrapped.expressions.length === 0) {
+    let tag = unwrapped.quasis[0]?.value.cooked;
+    if (tag)
+      return { tag };
+  }
+  return { reason: "component-not-a-tag", expression: csf.editor.source(node) };
+}
+function resolveStoryComponent(csf) {
+  if (!csf._metaNode)
+    return { reason: "no-meta-component" };
+  let ctx = { editor: csf.editor, filePath: csf._options.fileName ?? "" }, members = resolveObjectMembers(csf._metaNode, ctx);
+  return componentIn(csf, members, csf._metaNode, ctx, /* @__PURE__ */ new Set()) ?? { reason: "no-meta-component" };
+}
+function componentIn(csf, members, object, ctx, visited) {
+  let component = members.properties.component;
+  if (component && !members.shadowed.includes("component"))
+    return tagFromNode(csf, component);
+  let unreadable = object.properties.filter((property) => property.type === "SpreadElement").filter((spread) => members.unresolved.includes(oneLineTextOf(spread))).reverse();
+  for (let spread of unreadable) {
+    let found = spreadComponent(csf, spread, ctx, visited);
+    if (found || component)
+      return found ?? { reason: "unresolvable-meta-spread", spread: oneLineTextOf(spread) };
+  }
+  return component && tagFromNode(csf, component);
+}
+function spreadComponent(csf, spread, ctx, visited) {
+  let local = localObject(unwrapExpression(spread.argument), ctx);
+  return !local || visited.has(local.object) ? { reason: "unresolvable-meta-spread", spread: oneLineTextOf(spread) } : componentIn(csf, local.members, local.object, ctx, new Set(visited).add(local.object));
+}
+function localObject(argument, ctx) {
+  if (argument.type === "ObjectExpression")
+    return { object: argument, members: resolveObjectMembers(argument, ctx) };
+  if (argument.type !== "Identifier")
+    return;
+  let declarator = ctx.editor.scopes.program.bindings.get(argument.name)?.node, init = declarator?.type === "VariableDeclarator" && declarator.init ? unwrapExpression(declarator.init) : void 0, members = resolveBindingMembers(ctx, argument.name);
+  return init?.type === "ObjectExpression" && members ? { object: init, members } : void 0;
+}
+
+export {
+  parseStoryFile,
+  resolveStoryComponent
+};

package/dist/docgen/docgen-worker.js

@@ -1,18 +1,18 @@
-import CJS_COMPAT_NODE_URL_seyt09815b from 'node:url';
-import CJS_COMPAT_NODE_PATH_seyt09815b from 'node:path';
-import CJS_COMPAT_NODE_MODULE_seyt09815b 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_seyt09815b.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_seyt09815b.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_seyt09815b.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 {
   createDocgenProvider
-} from "../_node-chunks/chunk-P75AOQLO.js";
-import "../_node-chunks/chunk-MMJPCIXK.js";
+} from "../_node-chunks/chunk-7DGX2RHV.js";
+import "../_node-chunks/chunk-A2ZEEPU6.js";
 export {
   createDocgenProvider
 };

package/dist/docgen/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_seyt09815b from 'node:url';
-import CJS_COMPAT_NODE_PATH_seyt09815b from 'node:path';
-import CJS_COMPAT_NODE_MODULE_seyt09815b 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_seyt09815b.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_seyt09815b.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_seyt09815b.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
@@ -12,8 +12,8 @@ var require = CJS_COMPAT_NODE_MODULE_seyt09815b.createRequire(import.meta.url);
 import {
   buildDocgenPayload,
   createDocgenProvider
-} from "../_node-chunks/chunk-P75AOQLO.js";
-import "../_node-chunks/chunk-MMJPCIXK.js";
+} from "../_node-chunks/chunk-7DGX2RHV.js";
+import "../_node-chunks/chunk-A2ZEEPU6.js";
 export {
   buildDocgenPayload,
   createDocgenProvider

package/dist/entry-preview-argtypes.js

@@ -2,8 +2,8 @@ import {
   getCustomElements,
   isValidComponent,
   isValidMetaData
-} from "./_browser-chunks/chunk-IPGO7UEM.js";
-import "./_browser-chunks/chunk-CAPEJO4V.js";
+} from "./_browser-chunks/chunk-4CVRUPXU.js";
+import "./_browser-chunks/chunk-XOX44XZE.js";
 import "./_browser-chunks/chunk-EGBR6PF2.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 

package/dist/entry-preview.js

@@ -2,7 +2,7 @@ import {
   parameters,
   render,
   renderToCanvas
-} from "./_browser-chunks/chunk-CAPEJO4V.js";
+} from "./_browser-chunks/chunk-XOX44XZE.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   parameters,

package/dist/index.js

@@ -6,8 +6,8 @@ import {
   setCustomElements,
   setCustomElementsManifest,
   setProjectAnnotations
-} from "./_browser-chunks/chunk-IPGO7UEM.js";
-import "./_browser-chunks/chunk-CAPEJO4V.js";
+} from "./_browser-chunks/chunk-4CVRUPXU.js";
+import "./_browser-chunks/chunk-XOX44XZE.js";
 import "./_browser-chunks/chunk-EGBR6PF2.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {