text: import { html } from 'lit';
  import '../hello-world.js';
  
  export default {
    title: 'HelloWorld',
    component: 'hello-world',
    argTypes: {
      title: { control: 'text' },
      counter: { control: 'number' },
      textColor: { control: 'color' },
    },
  };
  
  function Template({ title = 'Hello world', counter = 5, textColor, slot }) {
    return html`
      <hello-world
        style="--hello-world-text-color: ${textColor || 'black'}"
        .title=${title}
        .counter=${counter}
      >
        ${slot}
      </hello-world>
    `;
  }
  
  export const Regular = Template.bind({});
  
  export const CustomTitle = Template.bind({});
  CustomTitle.args = {
    title: 'My title',
  };
  
  export const CustomCounter = Template.bind({});
  CustomCounter.args = {
    counter: 123456,
  };
  
  export const SlottedContent = Template.bind({});
  SlottedContent.args = {
    slot: html`<p>Slotted content</p>`,
  };
  SlottedContent.argTypes = {
    slot: { table: { disable: true } },
  };
  