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

package/dist/index.d.ts

@@ -28,9 +28,7 @@ type Preview = ProjectAnnotations<WebComponentsRenderer>;
 
 declare function isValidComponent(tagName: string): boolean;
 declare function isValidMetaData(customElements: any): boolean;
-/**
- * @param customElements any for now as spec is not super stable yet
- */
+/** @param customElements `any` for now as spec is not super stable yet */
 declare function setCustomElements(customElements: any): void;
 declare function setCustomElementsManifest(customElements: any): void;
 declare function getCustomElements(): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "8.3.0-alpha.5",
+  "version": "8.3.0-alpha.7",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -50,11 +50,11 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "^8.3.0-alpha.5",
+    "@storybook/components": "^8.3.0-alpha.7",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "^8.3.0-alpha.5",
-    "@storybook/preview-api": "^8.3.0-alpha.5",
-    "@storybook/theming": "^8.3.0-alpha.5",
+    "@storybook/manager-api": "^8.3.0-alpha.7",
+    "@storybook/preview-api": "^8.3.0-alpha.7",
+    "@storybook/theming": "^8.3.0-alpha.7",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },
@@ -68,7 +68,7 @@
   },
   "peerDependencies": {
     "lit": "^2.0.0 || ^3.0.0",
-    "storybook": "^8.3.0-alpha.5"
+    "storybook": "^8.3.0-alpha.7"
   },
   "engines": {
     "node": ">=18.0.0"

package/template/cli/js/Button.js

@@ -3,9 +3,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import './button.css';
 
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 

package/template/cli/ts-3-8/Button.ts

@@ -4,30 +4,18 @@ import { styleMap } from 'lit/directives/style-map.js';
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 

package/template/cli/ts-4-9/Button.ts

@@ -4,30 +4,18 @@ import { styleMap } from 'lit/directives/style-map.js';
 import './button.css';
 
 export interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
+  /** Is this the principal call to action on the page? */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
+  /** What background color to use */
   backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
+  /** How large should the button be? */
   size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
+  /** Button contents */
   label: string;
-  /**
-   * Optional click handler
-   */
+  /** Optional click handler */
   onClick?: () => void;
 }
-/**
- * Primary UI component for user interaction
- */
+/** Primary UI component for user interaction */
 export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
 

package/template/components/Button.js

@@ -5,14 +5,12 @@ import { LitElement, html } from 'lit';
 const { CustomEvent, customElements } = globalThis;
 
 /**
+ * @property {boolean} primary - Set button in primary mode
  * @attr {string} label - Label of the button
  * @attr {string} size - Size of the button, can be "small", "medium" or "large"; default is "medium".
  * @attr {string} backgroundColor - Color of the button's background
  *
- * @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar
- *
- * @prop {boolean} primary - Set button in primary mode
- *
+ * @cssprop [--sb-primary-color=#1ea7fd] - Controls the color of bar. Default is `#1ea7fd`
  * @event {CustomEvent} sb-button:click - Custom event send when the button is clicked
  *
  * @summary This is a simple Storybook Button

package/template/components/Html.js

@@ -4,10 +4,7 @@ import { LitElement } from 'lit';
 
 const { customElements } = globalThis;
 
-/**
- *
- * @tag sb-html
- */
+/** @tag sb-html */
 export class SbHtml extends LitElement {
   static get properties() {
     return {

package/template/components/Pre.js

@@ -5,10 +5,7 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 const { customElements } = globalThis;
 
-/**
- *
- * @tag sb-pre
- */
+/** @tag sb-pre */
 export class SbPre extends LitElement {
   // Currently TS decorators are not reflected so we have to use static `properties` function
   // https://github.com/Polymer/lit-html/issues/1476

package/template/stories/demo-wc-card/DemoWcCard.js

@@ -9,8 +9,8 @@ const { CustomEvent } = global;
 /**
  * This is a container looking like a card with a back and front side you can switch
  *
- * @slot - This is an unnamed slot (the default slot)
  * @fires side-changed - Fires whenever it switches between front/back
+ * @slot - This is an unnamed slot (the default slot)
  * @cssprop --demo-wc-card-header-font-size - Header font size
  * @cssprop --demo-wc-card-front-color - Font color for front
  * @cssprop --demo-wc-card-back-color - Font color for back
@@ -37,19 +37,13 @@ export class DemoWcCard extends LitElement {
   constructor() {
     super();
 
-    /**
-     * Indicates that the back of the card is shown
-     */
+    /** Indicates that the back of the card is shown */
     this.backSide = false;
 
-    /**
-     * Header message
-     */
+    /** Header message */
     this.header = 'Your Message';
 
-    /**
-     * Data rows
-     */
+    /** Data rows */
     this.rows = [];
   }
 

package/template/stories/preview.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import { setCustomElementsManifest } from '@storybook/web-components';
 
 import customElementsManifest from './custom-elements.json';