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

package/dist/docgen/docgen-worker.js

@@ -1,18 +1,18 @@
-import CJS_COMPAT_NODE_URL_kx3y04w7glc from 'node:url';
-import CJS_COMPAT_NODE_PATH_kx3y04w7glc from 'node:path';
-import CJS_COMPAT_NODE_MODULE_kx3y04w7glc from "node:module";
+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";
 
-var __filename = CJS_COMPAT_NODE_URL_kx3y04w7glc.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_kx3y04w7glc.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_kx3y04w7glc.createRequire(import.meta.url);
+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);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
   createDocgenProvider
-} from "../_node-chunks/chunk-VL6TVWMP.js";
-import "../_node-chunks/chunk-RKWQNNM2.js";
+} from "../_node-chunks/chunk-P75AOQLO.js";
+import "../_node-chunks/chunk-MMJPCIXK.js";
 export {
   createDocgenProvider
 };

package/dist/docgen/index.d.ts

@@ -11,18 +11,20 @@ interface CemTag {
   manifestPath: string;
   warning?: string;
 }
-interface CemSnapshot {
-  /** First manifest in configuration order wins a tag. */
-  tags: ReadonlyMap<string, CemTag>;
-  /** Manifests that contribute nothing: missing or invalid with no last valid version. */
-  errors: DocgenError[];
-  paths: string[];
+//#endregion
+//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/tag-resolver.d.ts
+interface TagLookup {
+  storyFilePath: string;
+}
+interface TagResolver {
+  find(tag: string, lookup: TagLookup): Promise<CemTag | DocgenError>;
 }
 //#endregion
 //#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/build-docgen.d.ts
 interface WebComponentsDocgenOptions {
   manifestPaths: string[];
-  typeProperty: string;
+  /** Also searched for element registrations when generating from sources. */
+  previewFilePath?: string;
 }
 type WebComponentsDocgenPayload = DocgenPayload & {
   /** Set while the manifest is served from its last valid version after a failed reload. */warning?: string;
@@ -32,18 +34,14 @@ type WebComponentsDocgenPayload = DocgenPayload & {
   };
 };
 interface BuildDocgenContext {
-  cem: CemSnapshot;
-  typeProperty: string;
+  resolver: TagResolver;
 }
-declare function buildDocgenPayload(input: DocgenProviderInput, context: BuildDocgenContext): WebComponentsDocgenPayload | undefined;
+declare function buildDocgenPayload(input: DocgenProviderInput, context: BuildDocgenContext): Promise<WebComponentsDocgenPayload | undefined>;
 //#endregion
 //#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/docgen-worker.d.ts
 declare const createDocgenProvider: ({
   manifestPaths,
-  typeProperty
+  previewFilePath
 }: WebComponentsDocgenOptions) => DocgenMiddleware;
 //#endregion
-//#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/docgen/component-docgen/arg-types/alt-type.d.ts
-declare const DEFAULT_TYPE_PROPERTY = "parsedType";
-//#endregion
-export { DEFAULT_TYPE_PROPERTY, type WebComponentsDocgenOptions, type WebComponentsDocgenPayload, buildDocgenPayload, createDocgenProvider };
+export { type WebComponentsDocgenOptions, type WebComponentsDocgenPayload, buildDocgenPayload, createDocgenProvider };

package/dist/docgen/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_kx3y04w7glc from 'node:url';
-import CJS_COMPAT_NODE_PATH_kx3y04w7glc from 'node:path';
-import CJS_COMPAT_NODE_MODULE_kx3y04w7glc from "node:module";
+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";
 
-var __filename = CJS_COMPAT_NODE_URL_kx3y04w7glc.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_kx3y04w7glc.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_kx3y04w7glc.createRequire(import.meta.url);
+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);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
@@ -12,12 +12,9 @@ var require = CJS_COMPAT_NODE_MODULE_kx3y04w7glc.createRequire(import.meta.url);
 import {
   buildDocgenPayload,
   createDocgenProvider
-} from "../_node-chunks/chunk-VL6TVWMP.js";
-import {
-  DEFAULT_TYPE_PROPERTY
-} from "../_node-chunks/chunk-RKWQNNM2.js";
+} from "../_node-chunks/chunk-P75AOQLO.js";
+import "../_node-chunks/chunk-MMJPCIXK.js";
 export {
-  DEFAULT_TYPE_PROPERTY,
   buildDocgenPayload,
   createDocgenProvider
 };

package/dist/entry-preview-argtypes.js

@@ -2,8 +2,8 @@ import {
   getCustomElements,
   isValidComponent,
   isValidMetaData
-} from "./_browser-chunks/chunk-TXUT6K6E.js";
-import "./_browser-chunks/chunk-BNL7LBNI.js";
+} from "./_browser-chunks/chunk-IPGO7UEM.js";
+import "./_browser-chunks/chunk-CAPEJO4V.js";
 import "./_browser-chunks/chunk-EGBR6PF2.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 
@@ -11,7 +11,7 @@ import "./_browser-chunks/chunk-4BE7D4DS.js";
 import { enhanceArgTypes } from "storybook/internal/docs-tools";
 
 // src/docs/custom-elements.ts
-import { logger } from "storybook/internal/client-logger";
+import { deprecate, logger } from "storybook/internal/client-logger";
 
 // ../../../node_modules/es-toolkit/dist/string/capitalize.mjs
 function capitalize(str) {
@@ -111,7 +111,9 @@ var getMetaDataExperimental = (tagName, customElements) => {
       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) => {
+}, getMetaData = (tagName, manifest) => manifest?.version === "experimental" ? (deprecate(
+  "The web-component-analyzer Custom Elements Manifest shape is deprecated and will be removed in Storybook 12. Generate a Custom Elements Manifest with @custom-elements-manifest/analyzer instead."
+), getMetaDataExperimental(tagName, manifest)) : getMetaDataV1(tagName, manifest), extractArgTypesFromElements = (tagName, customElements) => {
   let metaData = getMetaData(tagName, customElements);
   return metaData && mapArgTypes(metaData);
 }, extractArgTypes = (tagName) => {
@@ -123,7 +125,7 @@ var getMetaDataExperimental = (tagName, customElements) => {
 };
 
 // src/entry-preview-argtypes.ts
-var parameters = {
+var useServiceArgTypes = "FEATURES" in globalThis && globalThis.FEATURES?.docgenServer, parameters = useServiceArgTypes ? {} : {
   docs: {
     extractArgTypes,
     extractComponentDescription

package/dist/entry-preview.js

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

package/dist/index.d.ts

@@ -8,14 +8,11 @@ type WebComponentsFrameworkOptions = {
    * Paths to Custom Elements Manifest files, relative to the Storybook config directory.
    *
    * When omitted, Storybook reads `customElements` from the nearest `package.json`.
-   * When neither is available, server-side docgen is skipped and the runtime `setCustomElementsManifest` path keeps working as before.
+   * Tags no manifest declares are generated from the project's sources.
    *
-   * Please note that the runtime `setCustomElementsManifest` path is deprecated and will be removed in next major.
+   * Please note that the runtime `setCustomElementsManifest` path is deprecated and will be removed in Storybook 12.
    */
   customElementsManifest?: string | string[];
-  docgen?: {
-    /** Manifest key that holds analyzer-resolved type text; defaults to `parsedType`. */typeProperty?: string;
-  };
 };
 type StoryFnHtmlReturnType = string | Node | DocumentFragment | TemplateResult | SVGTemplateResult;
 interface WebComponentsRenderer extends WebRenderer {
@@ -49,11 +46,15 @@ type StoryContext<TArgs = StrictArgs$1> = StoryContext$1<WebComponentsRenderer,
 type Preview = ProjectAnnotations<WebComponentsRenderer>;
 //#endregion
 //#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/framework-api.d.ts
+/** @deprecated Use framework.options.customElementsManifest with features.docgenServer instead. This runtime manifest helper will be removed in Storybook 12. */
 declare function isValidComponent(tagName: string): boolean;
+/** @deprecated Use framework.options.customElementsManifest with features.docgenServer instead. This runtime manifest helper will be removed in Storybook 12. */
 declare function isValidMetaData(customElements: any): boolean;
-/** @param customElements `any` for now as spec is not super stable yet */
+/** @deprecated Use framework.options.customElementsManifest with features.docgenServer instead. This runtime manifest setter will be removed in Storybook 12. */
 declare function setCustomElements(customElements: any): void;
+/** @deprecated Use framework.options.customElementsManifest with features.docgenServer instead. This runtime manifest setter will be removed in Storybook 12. */
 declare function setCustomElementsManifest(customElements: any): void;
+/** @deprecated Use framework.options.customElementsManifest with features.docgenServer instead. This runtime manifest getter will be removed in Storybook 12. */
 declare function getCustomElements(): any;
 //#endregion
 //#region code/renderers/web-components/.dts-emit/code/renderers/web-components/src/portable-stories.d.ts

package/dist/index.js

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

package/dist/preset.js

@@ -1,24 +1,24 @@
-import CJS_COMPAT_NODE_URL_kx3y04w7glc from 'node:url';
-import CJS_COMPAT_NODE_PATH_kx3y04w7glc from 'node:path';
-import CJS_COMPAT_NODE_MODULE_kx3y04w7glc from "node:module";
+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";
 
-var __filename = CJS_COMPAT_NODE_URL_kx3y04w7glc.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_kx3y04w7glc.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_kx3y04w7glc.createRequire(import.meta.url);
+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);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration
 // ------------------------------------------------------------
 import {
-  DEFAULT_TYPE_PROPERTY,
   parseStoryFile,
   resolveStoryComponent
-} from "./_node-chunks/chunk-RKWQNNM2.js";
+} from "./_node-chunks/chunk-MMJPCIXK.js";
 
 // src/preset.ts
 import { fileURLToPath as fileURLToPath3 } from "node:url";
 
 // src/docgen/preset.ts
+import { loadPreviewOrConfigFile } from "storybook/internal/common";
 import { fileURLToPath } from "node:url";
 
 // src/docgen/component-docgen/config/resolve-manifest-paths.ts
@@ -46,7 +46,7 @@ var experimental_docgenProvider = async (existing = [], options) => {
     moduleSpecifier: fileURLToPath(import.meta.resolve(DOCGEN_WORKER_SPECIFIER)),
     options: {
       manifestPaths: resolveManifestPaths(options.configDir, frameworkOptions),
-      typeProperty: frameworkOptions.docgen?.typeProperty ?? DEFAULT_TYPE_PROPERTY
+      previewFilePath: loadPreviewOrConfigFile({ configDir: options.configDir })
     }
   };
   return [...existing, descriptor];
@@ -64,8 +64,7 @@ var experimental_docgenProvider = async (existing = [], options) => {
 
 // src/docgen/story-docs-preset.ts
 import { fileURLToPath as fileURLToPath2 } from "node:url";
-import { STORY_FILE_TEST_REGEXP, getStoryImportPathFromEntry as getStoryImportPathFromEntry2 } from "storybook/internal/common";
-import { getService } from "storybook/internal/core-server";
+import { createWorkerGatedStoryDocsProvider, getService } from "storybook/internal/core-server";
 import { logger } from "storybook/internal/node-logger";
 
 // src/docgen/story-docs/build-story-docs.ts
@@ -1196,9 +1195,23 @@ function metaObjectPath(csf) {
 
 // ../../core/src/csf-tools/story-shape/normalize-story.ts
 function normalizeStoryDeclaration(storyDeclaration) {
-  let storyPath = declarationExpression(storyDeclaration), normalizedPath = bindInitializer(storyDeclaration, storyPath) ?? factoryArgumentExpression(storyPath), unwrappedPath = unwrapTypeExpression(normalizedPath);
+  let storyPath = declarationExpression(storyDeclaration), resolvedStoryPath = resolveLocalStory(storyDeclaration, storyPath), normalizedPath = bindInitializer(storyDeclaration, resolvedStoryPath) ?? factoryArgumentExpression(resolvedStoryPath), unwrappedPath = unwrapTypeExpression(normalizedPath);
   return classifyStoryPath(unwrappedPath);
 }
+function resolveLocalStory(declaration, expression) {
+  let visited = /* @__PURE__ */ new Set(), current2 = unwrapTypeExpression(expression);
+  for (; current2.isIdentifier(); ) {
+    let name = current2.node.name;
+    if (visited.has(name) || !current2.scope.getBinding(name)?.constant)
+      break;
+    visited.add(name);
+    let resolved = resolveIdentifierInit(declaration, current2);
+    if (!resolved)
+      break;
+    current2 = unwrapTypeExpression(resolved);
+  }
+  return current2;
+}
 function declarationExpression(storyDeclaration) {
   if (storyDeclaration.isFunctionDeclaration())
     return storyDeclaration;
@@ -1379,10 +1392,15 @@ var membersOf = (object, ctx, visited) => {
     return importedBinding(ctx, binding.path, visited);
   if (!binding.constant)
     return;
-  let declared = declaredBindingMembers(ctx, binding.path.node, position, visited);
+  let rootName = localAliasRoot(ctx, name), rootBinding = ctx.program.scope.getBinding(rootName), declared = declaredBindingMembers(
+    ctx,
+    rootBinding?.path.node ?? binding.path.node,
+    position,
+    visited
+  );
   if (declared === void 0)
     return;
-  let assigned = assignedMembers(ctx, name, position);
+  let assigned = assignedMembers(ctx, localAliases(ctx, rootName), position);
   return {
     kind: "members",
     ctx,
@@ -1406,6 +1424,14 @@ var membersOf = (object, ctx, visited) => {
   let factory = factoryCall(unwrapped);
   if (factory === void 0 && (t6.isFunction(unwrapped) || isCanonicalCsf2BindCall(unwrapped)))
     return { members: complete() };
+  if (t6.isIdentifier(unwrapped)) {
+    let referenced = bindingMembers(ctx, unwrapped.name, position, visited);
+    if (referenced?.kind === "members") {
+      let members = referenced.external ? ctx.externalize && externalized(referenced.members, referenced.ctx) : referenced.members;
+      if (members)
+        return { members, ...referenced.accessor ? { accessor: referenced.accessor } : {} };
+    }
+  }
   if (factory === void 0)
     return {
       members: { properties: {}, shadowed: [], unresolved: [sourceOf5(unwrapped)] }
@@ -1425,7 +1451,28 @@ var membersOf = (object, ctx, visited) => {
     },
     accessor: "input"
   };
-}, MERGED_ANNOTATIONS = ["args", "argTypes", "parameters", "globals"], mergedAnnotations = (parent, child) => {
+}, MERGED_ANNOTATIONS = ["args", "argTypes", "parameters", "globals"], localAliasRoot = (ctx, name) => {
+  let visited = /* @__PURE__ */ new Set(), current2 = name;
+  for (; !visited.has(current2); ) {
+    visited.add(current2);
+    let binding = ctx.program.scope.getBinding(current2), node = binding?.path.node;
+    if (!binding?.constant || !t6.isVariableDeclarator(node) || !node.init)
+      break;
+    let init = unwrapExpression4(node.init);
+    if (!t6.isIdentifier(init))
+      break;
+    let target = ctx.program.scope.getBinding(init.name);
+    if (!target?.constant || target.kind === "module")
+      break;
+    current2 = init.name;
+  }
+  return current2;
+}, localAliases = (ctx, root) => {
+  let aliases = /* @__PURE__ */ new Map([[root, Number.NEGATIVE_INFINITY]]);
+  for (let [name, binding] of Object.entries(ctx.program.scope.bindings))
+    name !== root && binding.constant && localAliasRoot(ctx, name) === root && aliases.set(name, binding.path.node.start ?? Number.POSITIVE_INFINITY);
+  return aliases;
+}, mergedAnnotations = (parent, child) => {
   let properties = { ...parent.properties, ...child.properties };
   for (let key of MERGED_ANNOTATIONS) {
     let from = parent.properties[key], over = child.properties[key];
@@ -1445,7 +1492,7 @@ var membersOf = (object, ctx, visited) => {
       parent: csfFactoryReceiver(node).name,
       ...config && t6.isObjectExpression(config) ? { config } : {}
     };
-}, assignedMembers = (ctx, name, position) => {
+}, assignedMembers = (ctx, aliases, position) => {
   let properties = {}, unresolved = [];
   for (let statement of ctx.program.node.body) {
     if (!t6.isExpressionStatement(statement) || !t6.isAssignmentExpression(statement.expression))
@@ -1453,7 +1500,7 @@ var membersOf = (object, ctx, visited) => {
     let assignment = statement.expression, target = assignment.left, depth = 0, outermost;
     for (; t6.isMemberExpression(target); )
       depth += 1, outermost = t6.isIdentifier(target.property) && !target.computed ? target.property.name : t6.isStringLiteral(target.property) ? target.property.value : void 0, target = target.object;
-    if (!(depth === 0 || !t6.isIdentifier(target) || target.name !== name) && !(position !== void 0 && (assignment.start ?? 0) > position)) {
+    if (!(depth === 0 || !t6.isIdentifier(target) || !aliases.has(target.name)) && !((assignment.start ?? 0) < aliases.get(target.name)) && !(position !== void 0 && (assignment.start ?? 0) > position)) {
       if (depth > 1 || outermost === void 0 || assignment.operator !== "=") {
         unresolved.push(sourceOf5(assignment));
         continue;
@@ -1808,26 +1855,11 @@ var warnedMissingDocgenService = !1, getDocgenPayload = async (componentId) => {
     ));
     return;
   }
-}, experimental_storyDocsProvider = async (nextStoryDocs, options) => {
-  let descriptors = await options.presets.apply(
-    "experimental_docgenProvider",
-    []
-  ), worker = fileURLToPath2(import.meta.resolve(DOCGEN_WORKER_SPECIFIER));
-  return descriptors.some((descriptor) => descriptor.moduleSpecifier === worker) ? async (input) => {
-    let storyImportPath = getStoryImportPathFromEntry2(input.entry);
-    if (!storyImportPath || !STORY_FILE_TEST_REGEXP.test(storyImportPath))
-      return nextStoryDocs(input);
-    let ours;
-    try {
-      ours = await buildStoryDocsPayload(input, { getDocgenPayload });
-    } catch (error) {
-      return logger.debug(
-        `Web Components story snippets are unavailable for ${storyImportPath}: ${error instanceof Error ? error.message : String(error)}`
-      ), nextStoryDocs(input);
-    }
-    return ours ? { ...await nextStoryDocs(input), ...ours } : nextStoryDocs(input);
-  } : nextStoryDocs;
-};
+}, experimental_storyDocsProvider = createWorkerGatedStoryDocsProvider({
+  label: "Web Components",
+  docgenWorker: fileURLToPath2(import.meta.resolve(DOCGEN_WORKER_SPECIFIER)),
+  build: (input) => buildStoryDocsPayload(input, { getDocgenPayload })
+});
 
 // src/preset.ts
 var isDocgenProviderEnabled = !0, previewAnnotations = async (input = [], options) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "11.0.0-alpha.5",
+  "version": "11.0.0-alpha.7",
   "description": "Storybook Web Components renderer: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
@@ -54,9 +54,12 @@
   ],
   "dependencies": {
     "@storybook/global": "^5.0.0",
+    "@wc-toolkit/cem-generator": "^0.2.1",
+    "@wc-toolkit/cem-generator-lit": "^0.1.16",
     "custom-elements-manifest": "^2.1.0",
     "tiny-invariant": "^1.3.1",
-    "ts-dedent": "^2.0.0"
+    "ts-dedent": "^2.2.0",
+    "typescript": "^6.0.3"
   },
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",
@@ -65,13 +68,13 @@
     "cross-spawn": "^7.0.6",
     "es-toolkit": "^1.43.0",
     "lit": "2.3.1",
+    "pathe": "^1.1.2",
     "tmp": "^0.2.3",
-    "typescript": "^6.0.3",
     "web-component-analyzer": "^1.1.6"
   },
   "peerDependencies": {
     "lit": "^2.0.0 || ^3.0.0",
-    "storybook": "^11.0.0-alpha.5"
+    "storybook": "^11.0.0-alpha.7"
   },
   "publishConfig": {
     "access": "public"

package/template/stories_lit-vite-default-ts/demo-wc-counter/DemoWcCounter.js

@@ -0,0 +1,176 @@
+import { LitElement, css, html, nothing } from 'lit';
+
+/**
+ * A counter that exposes every Custom Elements Manifest category the default render binds.
+ *
+ * @fires count-changed - Fires after the count changes, with the new count as `detail.count`
+ * @slot - Label shown next to the value
+ * @slot prefix - Content rendered before the label
+ * @cssprop {<color>} [--demo-wc-counter-accent=rgb(0, 95, 204)] - Background of the increment button
+ * @cssprop {<number>} [--demo-wc-counter-badge-opacity=1] - Opacity of the badges
+ * @csspart badge - A badge rendered next to the current count
+ * @csspart button - The increment button
+ * @csspart deadline - The deadline, when set
+ * @csspart value - The current count
+ * @cssstate at-max - Set while the count has reached `max`
+ */
+export class DemoWcCounter extends LitElement {
+  static properties = {
+    count: { type: Number, reflect: true },
+    step: { type: Number },
+    max: { type: Number },
+    disabled: { type: Boolean, reflect: true },
+    size: { type: String, reflect: true },
+    tone: { type: String, reflect: true },
+    label: { type: String },
+    badges: { attribute: false },
+    unit: { attribute: false },
+    deadline: { attribute: false },
+  };
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      font-family: sans-serif;
+    }
+
+    button {
+      border: none;
+      border-radius: 4px;
+      padding: 4px 12px;
+      color: white;
+      background: var(--demo-wc-counter-accent, rgb(0, 95, 204));
+      cursor: pointer;
+    }
+
+    :host([tone='success']) [part='value'] {
+      color: rgb(0, 128, 0);
+    }
+
+    :host([tone='danger']) [part='value'] {
+      color: rgb(220, 20, 60);
+    }
+
+    [part='badge'] {
+      opacity: var(--demo-wc-counter-badge-opacity, 1);
+    }
+
+    :host([size='small']) button {
+      font-size: 12px;
+      padding: 2px 8px;
+    }
+
+    :host([size='large']) button {
+      font-size: 20px;
+      padding: 8px 16px;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+
+  #internals = this.attachInternals();
+
+  constructor() {
+    super();
+
+    /** Current value */
+    this.count = 0;
+
+    /** Amount added on every increment */
+    this.step = 1;
+
+    /** Highest value the counter can reach */
+    this.max = 10;
+
+    /** Prevents incrementing */
+    this.disabled = false;
+
+    /**
+     * Button size
+     *
+     * @type {'small' | 'medium' | 'large'}
+     */
+    this.size = 'medium';
+
+    /**
+     * Color of the value
+     *
+     * @type {'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'brand'}
+     */
+    this.tone = 'neutral';
+
+    /** Accessible name of the increment button */
+    this.label = 'Increment';
+
+    /**
+     * Badges shown after the value, only settable as a property
+     *
+     * @type {Array<'new' | 'hot' | 'sale'>}
+     */
+    this.badges = [];
+
+    /**
+     * Words used after the value, only settable as a property
+     *
+     * @type {{ singular: string, plural: string }}
+     */
+    this.unit = { singular: 'click', plural: 'clicks' };
+
+    /**
+     * Date shown after the value, only settable as a property
+     *
+     * @type {Date | undefined}
+     */
+    this.deadline = undefined;
+  }
+
+  /** Whether the count has reached `max` */
+  get atMax() {
+    return this.count >= this.max;
+  }
+
+  /** Adds `step` to the count, up to `max` */
+  increment() {
+    if (this.disabled || this.atMax) {
+      return;
+    }
+    this.count = Math.min(this.count + this.step, this.max);
+    this.dispatchEvent(new CustomEvent('count-changed', { detail: { count: this.count } }));
+  }
+
+  updated() {
+    if (this.atMax) {
+      this.#internals.states.add('at-max');
+    } else {
+      this.#internals.states.delete('at-max');
+    }
+  }
+
+  render() {
+    const unit = this.count === 1 ? this.unit.singular : this.unit.plural;
+    return html`
+      <slot name="prefix"></slot>
+      <slot></slot>
+      <span part="value">${this.count} ${unit}</span>
+      ${this.badges.map((badge) => html`<span part="badge">${badge}</span>`)}
+      ${
+        this.deadline === undefined
+          ? nothing
+          : html`<time part="deadline">${new Date(this.deadline).toISOString().slice(0, 10)}</time>`
+      }
+      <button
+        part="button"
+        aria-label=${this.label}
+        ?disabled=${this.disabled || this.atMax}
+        @click=${this.increment}
+      >
+        +${this.step}
+      </button>
+    `;
+  }
+}

package/template/stories_lit-vite-default-ts/demo-wc-counter/index.js

@@ -0,0 +1,3 @@
+import { DemoWcCounter } from './DemoWcCounter.js';
+
+customElements.define('demo-wc-counter', DemoWcCounter);