@trimble-oss/moduswebcomponents/cjs/modus-wc-button.cjs.entry.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

'use strict';

var index = require('./index-BwcuBgCv.js');
var utils = require('./utils-BUzvtuWk.js');

const convertPropsToClasses = ({ color, disabled, fullWidth, pressed, 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 (pressed) {
        classes = `${classes} modus-wc-btn-active`;
    }
    if (shape) {
        switch (shape) {
            case 'circle':
                classes = `${classes} modus-wc-btn-circle`;
                break;
            case 'ellipse':
                classes = `${classes} modus-wc-btn-ellipse`;
                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-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-button .modus-wc-btn-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-button .modus-wc-btn-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-button .modus-wc-btn-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-button .modus-wc-btn-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-primary[aria-pressed=true]{background-color:var(--modus-wc-color-primary);border:1px solid transparent;color:var(--modus-wc-color-primary-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-primary:hover{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-secondary[aria-pressed=true]{background-color:var(--modus-wc-color-secondary);border:1px solid transparent;color:var(--modus-wc-color-secondary-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-secondary:hover{background-color:var(--modus-wc-color-secondary-pale);color:var(--modus-wc-color-secondary)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-accent[aria-pressed=true]{background-color:var(--modus-wc-color-accent);border:1px solid transparent;color:var(--modus-wc-color-accent-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-accent:hover{background-color:var(--modus-wc-color-accent-pale);color:var(--modus-wc-color-accent)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-neutral[aria-pressed=true]{background-color:var(--modus-wc-color-neutral);border:1px solid transparent;color:var(--modus-wc-color-base-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-neutral:hover{background-color:var(--modus-wc-color-neutral-pale);color:var(--modus-wc-color-base-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-warning[aria-pressed=true]{background-color:var(--modus-wc-color-warning);border:1px solid transparent;color:var(--modus-wc-color-warning-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-warning:hover{background-color:var(--modus-wc-color-warning-pale);color:var(--modus-wc-color-warning)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-error[aria-pressed=true]{background-color:var(--modus-wc-color-error);border:1px solid transparent;color:var(--modus-wc-color-error-content)}modus-wc-button .modus-wc-btn-outline.modus-wc-btn-error:hover{background-color:var(--modus-wc-color-error-pale);color:var(--modus-wc-color-error)}modus-wc-button .modus-wc-btn-borderless{background-color:transparent;border:none;box-shadow:none}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-primary[aria-pressed=true]{background-color:var(--modus-wc-color-primary);border:1px solid transparent;color:var(--modus-wc-color-primary-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-primary:hover{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-secondary[aria-pressed=true]{background-color:var(--modus-wc-color-secondary);border:1px solid transparent;color:var(--modus-wc-color-secondary-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-secondary:hover{background-color:var(--modus-wc-color-secondary-pale);color:var(--modus-wc-color-secondary)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-accent[aria-pressed=true]{background-color:var(--modus-wc-color-accent);border:1px solid transparent;color:var(--modus-wc-color-accent-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-accent:hover{background-color:var(--modus-wc-color-accent-pale);color:var(--modus-wc-color-accent)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-neutral[aria-pressed=true]{background-color:var(--modus-wc-color-neutral);border:1px solid transparent;color:var(--modus-wc-color-base-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-neutral:hover{background-color:var(--modus-wc-color-neutral-pale);color:var(--modus-wc-color-base-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-warning[aria-pressed=true]{background-color:var(--modus-wc-color-warning);border:1px solid transparent;color:var(--modus-wc-color-warning-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-warning:hover{background-color:var(--modus-wc-color-warning-pale);color:var(--modus-wc-color-warning)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-error[aria-pressed=true]{background-color:var(--modus-wc-color-error);border:1px solid transparent;color:var(--modus-wc-color-error-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-error:hover{background-color:var(--modus-wc-color-error-pale);color:var(--modus-wc-color-error)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-primary)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-secondary{color:var(--modus-wc-color-secondary)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-neutral{color:var(--modus-wc-color-content)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-warning{color:var(--modus-wc-color-warning)}modus-wc-button .modus-wc-btn-borderless.modus-wc-btn-error{color:var(--modus-wc-color-error)}modus-wc-button .modus-wc-btn.modus-wc-btn-ellipse{border-radius:var(--modus-wc-border-radius-rounded)}modus-wc-button .modus-wc-btn-circle.modus-wc-btn-md,modus-wc-button .modus-wc-btn-square.modus-wc-btn-md{width:var(--modus-wc-size-md)}modus-wc-button .modus-wc-btn-circle.modus-wc-btn-lg,modus-wc-button .modus-wc-btn-square.modus-wc-btn-lg{width:var(--modus-wc-size-lg)}[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-2xs) 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-xs) 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-sm) 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-md) 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-6)}[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)}";

const ModusWcButton = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.buttonClick = index.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 === utils.KEY.Enter || event.key === utils.KEY.Space)) {
                event.preventDefault();
                this.buttonClick.emit(event);
            }
        };
    }
    componentWillLoad() {
        this.inheritedAttributes = utils.inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-btn'];
        const propClasses = convertPropsToClasses({
            color: this.color,
            disabled: this.disabled,
            fullWidth: this.fullWidth,
            pressed: this.pressed,
            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 (index.h(index.Host, { key: 'e52093307a31052c590b31df97e47f3002426368' }, index.h("button", Object.assign({ key: 'ac98aafb5b30ba4bb8bef613f09bb0e9539268a5', 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), index.h("slot", { key: '5bcf393c59add0cdfc88478bc2e5918d6817bd70' }))));
    }
    get el() { return index.getElement(this); }
};
ModusWcButton.style = modusWcButtonCss;

exports.modus_wc_button = ModusWcButton;