@trimble-oss/moduswebcomponents/components/p-1YuUWYzU.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import { p as proxyCustomElement, H, e as createEvent, h, c as Host } from './p-BMvVSi6Y.js';
import { K as KEY, i as inheritAriaAttributes } from './p-COxr4v9W.js';

const convertPropsToClasses = ({ color, disabled, fullWidth, shape, size, variant, }) => {
    let classes = '';
    if (color) {
        switch (color) {
            case 'primary':
                classes = `${classes} modus-wc-btn-primary`;
                break;
            case 'secondary':
                classes = `${classes} modus-wc-btn-secondary`;
                break;
            case 'tertiary':
                classes = `${classes} modus-wc-btn-neutral`;
                break;
            case 'warning':
                classes = `${classes} modus-wc-btn-warning`;
                break;
            case 'danger':
                classes = `${classes} modus-wc-btn-error`;
                break;
        }
    }
    if (disabled) {
        classes = `${classes} modus-wc-btn-disabled`;
    }
    if (fullWidth) {
        classes = `${classes} modus-wc-btn-block`;
    }
    if (shape) {
        switch (shape) {
            case 'circle':
                classes = `${classes} modus-wc-btn-circle`;
                break;
            case 'square':
                classes = `${classes} modus-wc-btn-square`;
                break;
        }
    }
    if (size) {
        classes = `${classes} modus-wc-btn-${size}`;
    }
    if (variant) {
        switch (variant) {
            case 'borderless':
                classes = `${classes} modus-wc-btn-borderless`;
                break;
            case 'filled':
                classes = `${classes} modus-wc-btn-filled`;
                break;
            case 'outlined':
                classes = `${classes} modus-wc-btn-outline`;
                break;
        }
    }
    return classes.trim();
};

const modusWcButtonCss = "modus-wc-button .modus-wc-btn{--fallback-sc:var(--modus-wc-color-neutral)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn{--rounded-btn:var(--modus-wc-border-radius-md);border:none;outline:none}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn:not(.modus-wc-btn-circle):not(.modus-wc-btn-square){height:fit-content;min-height:fit-content}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-xs,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-xs{font-size:var(--modus-wc-font-size-xs)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-xs:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-xs:not(.modus-wc-btn-circle):not(.modus-wc-btn-square){padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-sm,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-sm{font-size:var(--modus-wc-font-size-sm)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-sm:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-sm:not(.modus-wc-btn-circle):not(.modus-wc-btn-square){padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-md,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-md{font-size:var(--modus-wc-font-size-md)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-md:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-md:not(.modus-wc-btn-circle):not(.modus-wc-btn-square){padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-lg)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-lg,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-lg{font-size:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-lg:not(.modus-wc-btn-circle):not(.modus-wc-btn-square),[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-lg:not(.modus-wc-btn-circle):not(.modus-wc-btn-square){padding:var(--modus-wc-spacing-lg) var(--modus-wc-spacing-xl)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless{background-color:transparent;box-shadow:none}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:active,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:active{background-color:transparent}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:hover,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:hover{background-color:transparent}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline{background-color:transparent;border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:active,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:active{background-color:transparent}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:hover,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline:hover{background-color:transparent}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:focus-visible,[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:focus-visible{box-shadow:0 0 0 0.25rem rgba(38, 122, 177, 0.5)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:focus-visible,[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:focus-visible{box-shadow:0 0 0 0.25rem rgba(98, 102, 108, 0.5)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:focus-visible,[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:focus-visible{box-shadow:0 0 0 0.25rem rgba(98, 102, 108, 0.5)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:focus-visible,[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:focus-visible{box-shadow:0 0 0 0.25rem rgba(194, 125, 31, 0.5)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:focus-visible,[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:focus-visible,[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:focus-visible{box-shadow:0 0 0 0.25rem rgba(224, 66, 76, 0.5)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-disabled{opacity:0.3}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:focus-visible{border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-black)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-neutral{color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-warning{color:var(--modus-wc-color-yellow)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-error{color:var(--modus-wc-color-red)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary{background-color:var(--modus-wc-color-trimble-blue);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:hover{background-color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:active{background-color:var(--modus-wc-color-blue-dark)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary{background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:hover{background-color:var(--modus-wc-color-gray-5)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:active{background-color:var(--modus-wc-color-gray-7)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral{background-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:hover{background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:active{background-color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning{background-color:var(--modus-wc-color-yellow);border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-red);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:hover{background-color:var(--modus-wc-color-yellow-light)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:active{background-color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error{background-color:var(--modus-wc-color-red);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:hover{background-color:var(--modus-wc-color-red-light)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:active{background-color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary{border-color:var(--modus-wc-color-trimble-blue);color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:hover{background-color:var(--modus-wc-color-blue-pale);border-color:var(--modus-wc-color-blue-light);color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:active{background-color:rgba(0, 99, 163, 0.18);border-color:var(--modus-wc-color-blue-dark);color:var(--modus-wc-color-blue-dark)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary{border-color:var(--modus-wc-color-trimble-gray);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:hover{background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:active{background-color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral{border-color:var(--modus-wc-color-trimble-gray);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:hover{background-color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:active{background-color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning{border-color:var(--modus-wc-color-yellow);color:var(--modus-wc-color-yellow)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:hover{border-color:var(--modus-wc-color-yellow-light);color:var(--modus-wc-color-yellow-light)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:active{border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error{border-color:var(--modus-wc-color-red);color:var(--modus-wc-color-red)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:hover{border-color:var(--modus-wc-color-red-light);color:var(--modus-wc-color-red-light)}[data-theme=modus-classic-light] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:active{border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-disabled{opacity:0.4}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless:focus-visible{border:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-neutral{color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-warning{color:var(--modus-wc-color-yellow)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-error{color:var(--modus-wc-color-red)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary{background-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:hover{background-color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-primary:active{background-color:var(--modus-wc-color-blue-dark)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary{background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:hover{background-color:var(--modus-wc-color-gray-5)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-secondary:active{background-color:var(--modus-wc-color-gray-7)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral{background-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:hover{background-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-neutral:active{background-color:var(--modus-wc-color-gray-4)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning{background-color:var(--modus-wc-color-yellow);border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-red);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:hover{background-color:var(--modus-wc-color-yellow-light)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-warning:active{background-color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error{background-color:var(--modus-wc-color-red);color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:hover{background-color:var(--modus-wc-color-red-light)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-filled.modus-wc-btn-error:active{background-color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary{border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:hover{background-color:rgba(1, 154, 235, 0.12)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-primary:active{background-color:rgba(1, 154, 235, 0.3)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary{border-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:hover{background-color:rgba(203, 205, 214, 0.12)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-secondary:active{background-color:rgba(203, 205, 214, 0.3)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral{border-color:var(--modus-wc-color-gray-2);color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:hover{background-color:rgba(203, 205, 214, 0.12)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-neutral:active{background-color:rgba(203, 205, 214, 0.3)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning{border-color:var(--modus-wc-color-yellow);color:var(--modus-wc-color-yellow)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:hover{border-color:var(--modus-wc-color-yellow-light);color:var(--modus-wc-color-yellow-light)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-warning:active{border-color:var(--modus-wc-color-yellow-dark);color:var(--modus-wc-color-yellow-dark)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error{border-color:var(--modus-wc-color-red);color:var(--modus-wc-color-red)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:hover{border-color:var(--modus-wc-color-red-light);color:var(--modus-wc-color-red-light)}[data-theme=modus-classic-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-outline.modus-wc-btn-error:active{border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-red-dark)}[data-theme=modus-modern-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless,[data-theme=modus-modern-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless{background-color:transparent;border:none;box-shadow:none}[data-theme=modus-modern-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-trimble-blue)}[data-theme=modus-modern-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-modern-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-neutral{color:var(--modus-wc-color-gray-1)}[data-theme=modus-modern-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-warning{color:var(--modus-wc-color-yellow)}[data-theme=modus-modern-light] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-error{color:var(--modus-wc-color-red)}[data-theme=modus-modern-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-modern-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-modern-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-neutral{color:var(--modus-wc-color-gray-1)}[data-theme=modus-modern-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-warning{color:var(--modus-wc-color-yellow)}[data-theme=modus-modern-dark] modus-wc-button .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-error{color:var(--modus-wc-color-red)}";

const ModusWcButton = /*@__PURE__*/ proxyCustomElement(class ModusWcButton extends H {
    constructor() {
        super();
        this.__registerHost();
        this.buttonClick = createEvent(this, "buttonClick");
        this.inheritedAttributes = {};
        /** The color variant of the button. */
        this.color = 'primary';
        /** Custom CSS class to apply to the button element. */
        this.customClass = '';
        /** If true, the button will be disabled. */
        this.disabled = false;
        /** If true, the button will take the full width of its container. */
        this.fullWidth = false;
        /** If true, the button will be in a pressed state (for toggle buttons). */
        this.pressed = false;
        /** The shape of the button. */
        this.shape = 'rectangle';
        /** The size of the button. */
        this.size = 'md';
        /** The type of the button. */
        this.type = 'button';
        /** The variant of the button. */
        this.variant = 'filled';
        this.handleClick = (event) => {
            if (!this.disabled) {
                this.buttonClick.emit(event);
            }
        };
        // @ts-expect-error: TODO fixes linting issue, test thoroughly
        this.handleKeyDown = (event) => {
            if (!this.disabled &&
                (event.key === KEY.Enter || event.key === KEY.Space)) {
                event.preventDefault();
                this.buttonClick.emit(event);
            }
        };
    }
    componentWillLoad() {
        if (!this.el.ariaLabel) {
            this.el.ariaLabel = 'Button';
        }
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-btn'];
        const propClasses = convertPropsToClasses({
            color: this.color,
            disabled: this.disabled,
            fullWidth: this.fullWidth,
            shape: this.shape,
            size: this.size,
            variant: this.variant,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        const ariaPressed = this.pressed ? 'true' : undefined;
        return (h(Host, { key: '67a7abc65a2985c87ebb4195eac0c3ef04bd9d9c' }, h("button", Object.assign({ key: 'e7c0caf5bab71026ae8e60ed2030e86d53b1ca49', class: this.getClasses(), "aria-pressed": ariaPressed, disabled: this.disabled, onClick: this.handleClick, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, type: this.type }, this.inheritedAttributes), h("slot", { key: '72bf9efde3d351a3da294fda87135f9b135e6251' }))));
    }
    get el() { return this; }
    static get style() { return modusWcButtonCss; }
}, [4, "modus-wc-button", {
        "color": [1],
        "customClass": [1, "custom-class"],
        "disabled": [4],
        "fullWidth": [4, "full-width"],
        "pressed": [4],
        "shape": [1],
        "size": [1],
        "type": [1],
        "variant": [1]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-button"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-button":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcButton);
            }
            break;
    } });
}

export { ModusWcButton as M, defineCustomElement as d };