I’m using storybook to showcase/document some web elements.
I’m using a render function, mainly because the web component uses content(slots), and that was the best way I found to do that.
Everything’s working except for the code snippet that’s shown. I have a boolean attribute/property on the web component called ‘disabled’. I set that up as a boolean argument, but the code snippet shows it as: disabled="". I’d rather have it shown as just disabled.

In the render function, I use ?disabled=${args.disabled} for this attribute. When I inspect the page, I can see that the example is given the attribute as a boolean (just disabled), not as a string(disabled="")

How do I get the boolean attribute to simply display without the added string(="") in the code snippet?
I would even be ok with showing it as [disabled]="true" is needed. I just want to convey that it’s a boolean property.

Here’s my stories file for the web component:

import type { Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
import './button';

const meta: Meta = {
  title: 'Components/Button',
  component: 'my-button',
  tags: ['autodocs'],
  argTypes: {
    label: {
      type: 'string',
      control: { type: 'text' },
      description: 'This is the inner text for the button. This is provided as a slot.',
      defaultValue: 'this is a test',
    },
    prefixIcon: {
      description: 'An icon that is placed before the text of the button. This is provided as a slot.',
      control: { type: 'text' },
    },
    type: {
      description: 'Specifies the type of button.',
      options: ['submit', 'button', 'reset'],
      control: { type: 'select' },
      defaultValue: 'submit',
    },
    disabled: {
      description: 'If true, the `disabled` and `aria-disabled` attributes are set to true and the tabindex attribute is set to -1 on the element.',
      control: { type: 'boolean' },
      defaultValue: false,
    },
  },
};

export default meta;

type Story = StoryObj;

export const Docs: Story = {
  args: {
    label: 'Button',
    prefixIcon: '',
    type: 'submit',
    disabled: false,
  },
  render: (args) => {
    return html`<my-button
      type="${args.type}"
      ?disabled=${args.disabled}
    >
      ${args.label}${args.prefixIcon
        ? html` <span slot="prefix-icon">${args.prefixIcon}</span>`
        : html``}
    </my-button>`;
  },
};