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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "11.0.0-alpha.6",
+  "version": "11.0.0-alpha.8",
   "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.6"
+    "storybook": "^11.0.0-alpha.8"
   },
   "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);

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

@@ -0,0 +1,217 @@
+import { expect, fn, userEvent, waitFor } from 'storybook/test';
+
+import './demo-wc-counter';
+
+/**
+ * Every story uses the default render, which binds each arg by the category its key encodes in the
+ * Custom Elements Manifest: attributes and properties, `-event`, `-slot`, `-part`, `-state`, and
+ * `--` CSS custom properties.
+ */
+export default {
+  component: 'demo-wc-counter',
+  tags: ['autodocs'],
+};
+
+export const Attributes = {
+  args: { count: 3, step: 2, disabled: true },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(counter).toHaveAttribute('count', '3');
+    await expect(counter).toHaveAttribute('disabled');
+    await expect(counter.shadowRoot.querySelector('[part="value"]')).toHaveTextContent('3 clicks');
+    await expect(counter.shadowRoot.querySelector('[part="button"]')).toBeDisabled();
+    await expect(counter.shadowRoot.querySelector('[part="button"]')).toHaveTextContent('+2');
+  },
+};
+
+export const BooleanAttributeOff = {
+  args: { disabled: false },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(counter).not.toHaveAttribute('disabled');
+    await expect(counter.shadowRoot.querySelector('[part="button"]')).toBeEnabled();
+  },
+};
+
+export const EnumAttribute = {
+  args: { size: 'large' },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    const button = counter.shadowRoot.querySelector('[part="button"]');
+    await expect(counter).toHaveAttribute('size', 'large');
+    await expect(getComputedStyle(button).fontSize).toBe('20px');
+    await expect(getComputedStyle(button).paddingTop).toBe('8px');
+  },
+};
+
+export const TextAttribute = {
+  args: { label: 'Add a point' },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(counter.label).toBe('Add a point');
+    await expect(counter.shadowRoot.querySelector('[part="button"]')).toHaveAccessibleName(
+      'Add a point'
+    );
+  },
+};
+
+export const SelectAttribute = {
+  args: { tone: 'danger' },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    const value = counter.shadowRoot.querySelector('[part="value"]');
+    await expect(counter).toHaveAttribute('tone', 'danger');
+    await expect(getComputedStyle(value).color).toBe('rgb(220, 20, 60)');
+  },
+};
+
+export const Properties = {
+  args: { count: 1, unit: { singular: 'point', plural: 'points' } },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(counter.unit).toEqual({ singular: 'point', plural: 'points' });
+    await expect(counter.shadowRoot.querySelector('[part="value"]')).toHaveTextContent('1 point');
+  },
+};
+
+export const ArrayProperty = {
+  args: { badges: ['new', 'hot'] },
+  play: async ({ args, canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    const badges = [...counter.shadowRoot.querySelectorAll('[part="badge"]')];
+    await expect(counter.badges).toEqual(args.badges);
+    await expect(counter).not.toHaveAttribute('badges');
+    await expect(badges).toHaveLength(2);
+    await expect(badges.map((badge) => badge.textContent)).toEqual(['new', 'hot']);
+  },
+};
+
+export const DateProperty = {
+  args: { deadline: new Date('2026-12-24T00:00:00.000Z') },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(counter).not.toHaveAttribute('deadline');
+    await expect(counter.shadowRoot.querySelector('[part="deadline"]')).toHaveTextContent(
+      '2026-12-24'
+    );
+  },
+};
+
+export const Events = {
+  args: { 'count-changed-event': fn() },
+  play: async ({ args, canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await userEvent.click(counter.shadowRoot.querySelector('[part="button"]'));
+
+    await expect(args['count-changed-event']).toHaveBeenCalledWith(
+      expect.objectContaining({ type: 'count-changed', detail: { count: 1 } })
+    );
+  },
+};
+
+export const Slots = {
+  args: {
+    'default-slot': '<strong>Score</strong>',
+    'prefix-slot': '★',
+  },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(counter.querySelector(':scope > strong:not([slot])')).toHaveTextContent('Score');
+    await expect(counter.querySelector(':scope > [slot="prefix"]')).toHaveTextContent('★');
+  },
+};
+
+export const CssCustomProperties = {
+  args: { '--demo-wc-counter-accent': 'rgb(102, 51, 153)' },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    const button = counter.shadowRoot.querySelector('[part="button"]');
+    await expect(getComputedStyle(button).backgroundColor).toBe('rgb(102, 51, 153)');
+  },
+};
+
+export const NumberCssCustomProperty = {
+  args: { badges: ['new'], '--demo-wc-counter-badge-opacity': 0.5 },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    const badge = counter.shadowRoot.querySelector('[part="badge"]');
+    await expect(counter.style.getPropertyValue('--demo-wc-counter-badge-opacity')).toBe('0.5');
+    await expect(getComputedStyle(badge).opacity).toBe('0.5');
+  },
+};
+
+export const CssParts = {
+  args: { 'value-part': 'color: rgb(220, 20, 60); font-weight: 700;' },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    const value = counter.shadowRoot.querySelector('[part="value"]');
+    await expect(getComputedStyle(value).color).toBe('rgb(220, 20, 60)');
+    await expect(getComputedStyle(value).fontWeight).toBe('700');
+  },
+};
+
+export const CssStates = {
+  args: {
+    count: 4,
+    max: 5,
+    'at-max-state': 'outline: 2px solid rgb(0, 128, 0);',
+  },
+  play: async ({ canvasElement }) => {
+    const counter = canvasElement.querySelector('demo-wc-counter');
+    await counter.updateComplete;
+
+    await expect(getComputedStyle(counter).outlineStyle).toBe('none');
+
+    await userEvent.click(counter.shadowRoot.querySelector('[part="button"]'));
+
+    await waitFor(() => expect(counter.matches(':state(at-max)')).toBe(true));
+    await expect(getComputedStyle(counter).outlineColor).toBe('rgb(0, 128, 0)');
+  },
+};
+
+export const AllCategories = {
+  args: {
+    count: 2,
+    step: 3,
+    disabled: false,
+    size: 'small',
+    tone: 'success',
+    label: 'Add a star',
+    badges: ['sale'],
+    unit: { singular: 'star', plural: 'stars' },
+    deadline: new Date('2026-12-24T00:00:00.000Z'),
+    'count-changed-event': fn(),
+    'default-slot': 'Rating',
+    'prefix-slot': '★',
+    '--demo-wc-counter-accent': 'rgb(178, 34, 34)',
+    '--demo-wc-counter-badge-opacity': 0.8,
+    'value-part': 'font-variant-numeric: tabular-nums;',
+    'at-max-state': 'opacity: 0.6;',
+  },
+};

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

@@ -1,87 +0,0 @@
-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";
-
-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);
-
-// ------------------------------------------------------------
-// end of CJS compatibility banner, injected by Storybook's esbuild configuration
-// ------------------------------------------------------------
-
-// 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/arg-types/alt-type.ts
-var DEFAULT_TYPE_PROPERTY = "parsedType";
-function readTypeText(item, typeProperty) {
-  let alternate = Reflect.get(item, typeProperty);
-  return isRecord(alternate) && typeof alternate.text == "string" && alternate.text.trim() ? alternate.text : typeof item.type?.text == "string" ? item.type.text : void 0;
-}
-function readCssPropertySyntax(property, typeProperty) {
-  return property.syntax ?? readTypeText(property, typeProperty);
-}
-
-// src/docgen/component-docgen/resolve-component/resolve-component.ts
-import { loadCsf, unwrapExpression } from "storybook/internal/csf-tools";
-import { recast, types as t } from "storybook/internal/babel";
-import { readFileSync } from "node:fs";
-function parseStoryFile(storyFilePath, title) {
-  try {
-    let source = readFileSync(storyFilePath, "utf8");
-    return loadCsf(source, { makeTitle: () => title }).parse();
-  } catch {
-    return;
-  }
-}
-var expressionFor = (node) => recast.print(node).code;
-function tagFromNode(node) {
-  let expression = expressionFor(node), unwrapped = unwrapExpression(node);
-  if (t.isStringLiteral(unwrapped) && unwrapped.value !== "")
-    return { tag: unwrapped.value };
-  if (t.isTemplateLiteral(unwrapped) && unwrapped.expressions.length === 0) {
-    let tag = unwrapped.quasis[0]?.value.cooked;
-    if (tag)
-      return { tag };
-  }
-  return { reason: "component-not-a-tag", expression };
-}
-function resolveStoryComponent(csf) {
-  let component = csf._metaAnnotations.component;
-  return component ? tagFromNode(component) : { reason: "no-meta-component" };
-}
-
-export {
-  isRecord,
-  namedItems,
-  errorMessage,
-  trimmedOrUndefined,
-  deprecationMessage,
-  firstValue,
-  DEFAULT_TYPE_PROPERTY,
-  readTypeText,
-  readCssPropertySyntax,
-  parseStoryFile,
-  resolveStoryComponent
-};