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

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

@@ -1,6 +1,6 @@
 import {
   entry_preview_exports
-} from "./chunk-BNL7LBNI.js";
+} from "./chunk-XOX44XZE.js";
 import {
   entry_preview_docs_exports
 } from "./chunk-EGBR6PF2.js";
@@ -15,6 +15,8 @@ globalWindow.STORYBOOK_ENV = "web-components";
 
 // src/framework-api.ts
 import { global as global2 } from "@storybook/global";
+import { deprecate } from "storybook/internal/client-logger";
+var RUNTIME_MANIFEST_DEPRECATION = "The runtime Custom Elements Manifest is deprecated and will be removed in Storybook 12. Set framework.options.customElementsManifest in .storybook/main and enable features.docgenServer instead.";
 function isValidComponent(tagName) {
   if (!tagName)
     return !1;
@@ -27,17 +29,18 @@ function isValidMetaData(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.`);
+  throw new Error(
+    "You need to set up valid Custom Elements metadata with a manifest generated by @custom-elements-manifest/analyzer. Configure it with framework.options.customElementsManifest in .storybook/main."
+  );
 }
 function setCustomElements(customElements) {
-  global2.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;
+  deprecate(`setCustomElements() is deprecated: ${RUNTIME_MANIFEST_DEPRECATION}`), global2.__STORYBOOK_CUSTOM_ELEMENTS__ = customElements;
 }
 function setCustomElementsManifest(customElements) {
-  global2.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;
+  deprecate(`setCustomElementsManifest() is deprecated: ${RUNTIME_MANIFEST_DEPRECATION}`), global2.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ = customElements;
 }
 function getCustomElements() {
-  return global2.__STORYBOOK_CUSTOM_ELEMENTS__ || global2.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__;
+  return global2.__STORYBOOK_CUSTOM_ELEMENTS_MANIFEST__ || global2.__STORYBOOK_CUSTOM_ELEMENTS__;
 }
 
 // src/portable-stories.ts

package/dist/_browser-chunks/{chunk-BNL7LBNI.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));
 }
@@ -137,7 +144,7 @@ var { Node: Node2 } = global, render = (args, context) => {
   }
   return fragment.append(element), fragment;
 };
-function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount }, canvasElement) {
+function renderToCanvas({ storyFn, title, 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>');
@@ -151,7 +158,7 @@ function renderToCanvas({ storyFn, kind, name, showMain, showError, forceRemount
     canvasElement.innerHTML = "", canvasElement.appendChild(element), simulateDOMContentLoaded();
   } else
     showError({
-      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${kind}".`,
+      title: `Expecting an HTML snippet or DOM node from the story: "${name}" of "${title}".`,
       description: dedent`
         Did you forget to return the HTML snippet from the story?
         Use "() => <your snippet or node>" or when defining the story.