import { html } from 'lit';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import './NumberBadge.svelte';
const meta = {
    title: 'Indicators/Number Badge',
    component: 'm-number-badge',
    argTypes: {
        appearance: {
            control: 'radio',
            options: ['danger', 'accent', 'inverse', 'standard'],
        },
        size: {
            control: 'radio',
            options: ['s', 'm'],
        },
    },
    args: { label: 99 },
    render: (args) => html `
    <m-number-badge
      label=${ifDefined(args.label)}
      appearance=${ifDefined(args.appearance)}
      size=${ifDefined(args.size)}
    ></m-number-badge>
  `,
};
export default meta;
export const Standard = {};
export const Accent = {
    args: { appearance: 'accent' },
};
export const Danger = {
    args: { appearance: 'danger' },
};
export const Inverse = {
    globals: {
        backgrounds: { value: 'inverse' },
    },
    args: { appearance: 'inverse' },
};
export const Size = {
    args: { size: 'm' },
};
