import { focus } from '@dojo/framework/core/middleware/focus';
import { create, tsx } from '@dojo/framework/core/vdom';
import { formatAriaProperties } from '../common/util';
import { theme } from '../middleware/theme';
import * as css from '../theme/default/button.m.css';
const factory = create({ focus, theme }).properties();
export const Button = factory(function Button({ children, id, middleware: { focus, theme }, properties }) {
    const { aria = {}, disabled, widgetId, name, pressed, type = 'button', value, onClick, onOut, onOver, onDown, onUp, onBlur, onFocus, title } = properties();
    const themeCss = theme.classes(css);
    const idBase = widgetId || `button-${id}`;
    return (tsx("button", Object.assign({ classes: [
            theme.variant(),
            themeCss.root,
            disabled ? themeCss.disabled : null,
            pressed ? themeCss.pressed : null
        ], title: title, disabled: disabled, id: idBase, focus: focus.shouldFocus(), name: name, type: type, value: value, onblur: () => onBlur && onBlur(), onclick: (event) => {
            event.stopPropagation();
            onClick && onClick();
        }, onfocus: () => onFocus && onFocus(), onpointerenter: () => onOver && onOver(), onpointerleave: () => onOut && onOut(), onpointerdown: () => onDown && onDown(), onpointerup: () => onUp && onUp() }, formatAriaProperties(aria), { "aria-pressed": typeof pressed === 'boolean' ? (pressed ? 'true' : 'false') : undefined }),
        tsx("span", { classes: themeCss.label }, children())));
});
export default Button;

/*# sourceMappingURL=index.mjs.map*/