docs(web-components): set attributes in example story

examples/web-components-kitchen-sink/src/components/sb-button.stories.ts

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { SbButton } from './sb-button';
 
@@ -20,9 +21,9 @@ export default {
 const Template: Story<SbButton> = ({ primary, backgroundColor, size, label }) =>
   html`<sb-button
     ?primary="${primary}"
-    .size="${size}"
-    .label="${label}"
-    .backgroundColor="${backgroundColor}"
+    size="${ifDefined(size)}"
+    label="${ifDefined(label)}"
+    background-color="${ifDefined(backgroundColor)}"
   ></sb-button>`;
 
 export const Primary: Story<SbButton> = Template.bind({});

examples/web-components-kitchen-sink/src/components/sb-button.ts

@@ -61,7 +61,7 @@ export class SbButton extends LitElement {
       label: { type: String, reflect: true },
       primary: { type: Boolean },
       size: { type: String },
-      backgroundColor: { type: String },
+      backgroundColor: { type: String, attribute: 'background-color' },
     };
   }