UNPKG

@trimble-oss/moduswebcomponents

Version:

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

1 lines 21.3 kB
import{r as o,c,h as s,H as t,g as d}from"./p-dzXW86AR.js";import{K as u,i as m}from"./p-B5lx0dpl.js";const r=class{constructor(s){o(this,s),this.buttonClick=c(this,"buttonClick"),this.inheritedAttributes={},this.color="primary",this.customClass="",this.disabled=!1,this.fullWidth=!1,this.pressed=!1,this.shape="rectangle",this.size="md",this.type="button",this.variant="filled",this.handleClick=o=>{this.disabled||this.buttonClick.emit(o)},this.handleKeyDown=o=>{this.disabled||o.key!==u.Enter&&o.key!==u.Space||(o.preventDefault(),this.buttonClick.emit(o))}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Button"),this.inheritedAttributes=m(this.el)}getClasses(){const o=["modus-wc-btn"],c=(({color:o,disabled:c,fullWidth:s,shape:t,size:d,variant:u})=>{let m="";if(o)switch(o){case"primary":m=`${m} modus-wc-btn-primary`;break;case"secondary":m=`${m} modus-wc-btn-secondary`;break;case"tertiary":m=`${m} modus-wc-btn-neutral`;break;case"warning":m=`${m} modus-wc-btn-warning`;break;case"danger":m=`${m} modus-wc-btn-error`}if(c&&(m=`${m} modus-wc-btn-disabled`),s&&(m=`${m} modus-wc-btn-block`),t)switch(t){case"circle":m=`${m} modus-wc-btn-circle`;break;case"square":m=`${m} modus-wc-btn-square`}if(d&&(m=`${m} modus-wc-btn-${d}`),u)switch(u){case"borderless":m=`${m} modus-wc-btn-borderless`;break;case"filled":m=`${m} modus-wc-btn-filled`;break;case"outlined":m=`${m} modus-wc-btn-outline`}return m.trim()})({color:this.color,disabled:this.disabled,fullWidth:this.fullWidth,shape:this.shape,size:this.size,variant:this.variant});return c&&o.push(c),this.customClass&&o.push(this.customClass),o.join(" ")}render(){const o=this.pressed?"true":void 0;return s(t,{key:"67a7abc65a2985c87ebb4195eac0c3ef04bd9d9c"},s("button",Object.assign({key:"e7c0caf5bab71026ae8e60ed2030e86d53b1ca49",class:this.getClasses(),"aria-pressed":o,disabled:this.disabled,onClick:this.handleClick,onKeyDown:this.handleKeyDown,tabIndex:this.disabled?-1:0,type:this.type},this.inheritedAttributes),s("slot",{key:"72bf9efde3d351a3da294fda87135f9b135e6251"})))}get el(){return d(this)}};r.style="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)}";export{r as modus_wc_button}