fix: resolve comments

Author: mrp-78

src/pinwheel/pinwheel.stories.ts

@@ -18,9 +18,7 @@ interface ArgTypes {}
 const items = ['عنوان ۱', 'عنوان ۲', 'عنوان ۳', 'عنوان ۴', 'عنوان ۵', 'عنوان ۶', 'عنوان ۷', 'عنوان ۸', 'عنوان ۹']
 
 const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
-  <div>
-    <tap-pinwheel .items=${items}></tap-pinwheel>
-  </div>
+  <tap-pinwheel .items=${items}></tap-pinwheel>
 `;
 
 export const Pinwheel = Template.bind({});

src/pinwheel/pinwheel.style.ts

@@ -21,7 +21,7 @@ export default css`
     /* FIXME: we dont have sizing tokens yet  */
     height: 48px;
     font: inherit;
-    font-family: var(--tap-font-family, var(--tap-sys-font-family)), serif;
+    font-family: var(--tap-font-family, var(--tap-sys-font-family));
     line-height: var(--tap-pinwheel-typography-body-md-height, var(--tap-sys-typography-body-md-height));
     font-size: var(--tap-pinwheel-typography-body-md-size, var(--tap-sys-typography-body-md-size));
     font-weight: var(--tap-pinwheel-typography-body-md-weight, var(--tap-sys-typography-body-md-weight));

src/pinwheel/pinwheel.ts

@@ -52,8 +52,9 @@ export class Pinwheel extends LitElement {
 
   private renderItem = (item: string, index: number) => {
     return html`<div
+      part="pinwheel-item"
       class=${this.selectedIndex === index ? 'active': null}
-      @click='${() => {this.handleClickItem(index)}}'
+      @click='${() => this.handleClickItem(index)}'
     >
       ${item}
     </div>`