@trimble-oss/moduswebcomponents/modus-wc/p-c2a60bc5.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

import{r as c,d as o,h as s,e as d,g as i}from"./p-C1-Dpkp7.js";import{h as r}from"./p-tWS3Egrk.js";import{K as a,i as m}from"./p-DJ2rBB6r.js";const t=class{constructor(s){c(this,s),this.chipClick=o(this,"chipClick",7),this.chipRemove=o(this,"chipRemove",7),this.inheritedAttributes={},this.active=!1,this.customClass="",this.disabled=!1,this.hasError=!1,this.label="",this.multiline=!1,this.showRemove=!1,this.shape="rectangle",this.size="md",this.variant="filled",this.handleKeyDown=c=>{this.disabled||c.key!==a.Enter&&c.key!==a.Space||(c.preventDefault(),this.chipClick.emit(c))},this.handleKeyUp=c=>{this.disabled||c.key!==a.Escape||(c.preventDefault(),this.chipRemove.emit(c))},this.handleChipClick=c=>{this.disabled||this.chipClick.emit(c)},this.handleChipRemove=c=>{this.disabled||this.chipRemove.emit(c)}}componentWillLoad(){r(this.el),this.el.ariaLabel||(this.el.ariaLabel=this.label||"Chip"),this.inheritedAttributes=m(this.el)}getClasses(){const c=["modus-wc-chip","modus-wc-btn"],o=(({active:c,disabled:o,hasError:s,shape:d,size:i,variant:r})=>{let a="";return c&&(a=`${a} modus-wc-chip--active`),o&&(a=`${a} modus-wc-chip--disabled`),s&&(a=`${a} modus-wc-chip--error`),i&&(a=`${a} modus-wc-btn-${i}`),"circle"===d&&(a=`${a} modus-wc-chip--circle`),r&&"outline"===r&&(a=`${a} modus-wc-chip--outline`),a.trim()})({active:this.active,disabled:this.disabled,hasError:this.hasError,shape:this.shape,size:this.size,variant:this.variant});return o&&c.push(o),this.multiline&&c.push("modus-wc-chip-multiline"),this.customClass&&c.push(this.customClass),c.join(" ")}render(){return s(d,{key:"6607ee12f2652f7f80a51ee5cfaa73ad16dbbb3e"},s("button",Object.assign({key:"1e75774576706b7a0d8ccc224254ffbfbdf824c5","aria-disabled":this.disabled,class:this.getClasses(),disabled:this.disabled,onClick:this.handleChipClick,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,tabIndex:0,type:"button"},this.inheritedAttributes),s("slot",{key:"8e03e28f633c65d326567c0e63cb583240b35ac7"}),this.label&&s("span",{key:"8c2a1dc60e3ff0f726fef0e534ee13d3a8219a60",class:"modus-wc-chip-label"},this.label),this.showRemove&&s("modus-wc-icon",{key:"c4749217f4f5fe0939c2bcc6677887c95f481283","custom-class":"modus-wc-chip-remove-icon",name:"close",onClick:this.handleChipRemove})))}get el(){return i(this)}};t.style="modus-wc-chip .modus-wc-chip.modus-wc-btn{background-color:var(--modus-wc-color-base-100);border-color:transparent;box-sizing:border-box;--rounded-btn:var(--modus-wc-border-radius-chip)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--circle{--rounded-btn:var(--modus-wc-border-radius-3xl)}modus-wc-chip .modus-wc-chip.modus-wc-btn:hover{background-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:focus{background-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-open{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn-disabled:hover{background-color:inherit}modus-wc-chip .modus-wc-chip.modus-wc-btn--active{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn--selected{background-color:var(--modus-wc-color-primary-pale);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn.checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn-checked{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn.pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn-pressed{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn[aria-pressed=true]{background-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-chip .modus-wc-chip.modus-wc-btn-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-chip .modus-wc-chip.modus-wc-btn-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-chip .modus-wc-chip.modus-wc-btn-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-chip .modus-wc-chip.modus-wc-btn-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm{height:var(--modus-wc-spacing-xl);min-height:var(--modus-wc-spacing-xl);padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm modus-wc-avatar .modus-wc-avatar>div{height:14px;width:14px}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-md);line-height:1}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md{height:var(--modus-wc-spacing-2xl);min-height:var(--modus-wc-spacing-2xl);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-sm)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md modus-wc-avatar .modus-wc-avatar>div{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-lg);line-height:1}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg{height:var(--modus-wc-spacing-3xl);min-height:var(--modus-wc-spacing-3xl);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-md)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg modus-wc-avatar .modus-wc-avatar>div{height:18px;width:18px}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-xl);line-height:1}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip-multiline{height:auto;line-height:var(--modus-wc-line-height-md);text-align:start;white-space:normal}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active{background-color:var(--modus-wc-color-primary-pale);border-color:transparent}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline{background-color:var(--modus-wc-color-primary-pale);border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error{background-color:var(--modus-wc-color-red-pale);border-color:transparent;color:var(--modus-wc-color-red-dark)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red-dark)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline{background-color:var(--modus-wc-color-base-page);border-color:var(--modus-wc-color-base-100)}modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error){color:var(--modus-wc-color-base-content)}modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline{border-color:var(--modus-wc-color-base-200)}modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active){border-color:transparent}modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline{background-color:transparent;border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-primary)}modus-wc-chip .modus-wc-chip.modus-wc-btn:focus{outline-offset:0}modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled{opacity:0.3;--tw-text-opacity:1}modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar{filter:grayscale(100%)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn{background-color:var(--modus-wc-color-gray-1);border-color:transparent;box-sizing:border-box;color:var(--modus-wc-color-base-content);font-size:var(--modus-wc-font-size-md)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-spacing-xl);min-height:var(--modus-wc-spacing-xl);padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm modus-wc-avatar .modus-wc-avatar>div,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm modus-wc-avatar .modus-wc-avatar>div{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-font-size-lg)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-md);line-height:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-spacing-2xl);min-height:var(--modus-wc-spacing-2xl);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md modus-wc-avatar .modus-wc-avatar>div,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md modus-wc-avatar .modus-wc-avatar>div{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-lg);line-height:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg{font-size:var(--modus-wc-font-size-xl);height:var(--modus-wc-spacing-3xl);min-height:var(--modus-wc-spacing-3xl);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-lg)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg modus-wc-avatar .modus-wc-avatar>div,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg modus-wc-avatar .modus-wc-avatar>div{height:18px;width:18px}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon{font-size:var(--modus-wc-font-size-xl);line-height:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip-multiline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip-multiline{height:auto;line-height:var(--modus-wc-line-height-md);text-align:start;white-space:normal}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);border-color:transparent;color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline{background-color:var(--modus-wc-color-primary);border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error{background-color:var(--modus-wc-color-red-pale);border-color:transparent;color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline{background-color:transparent;border-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error),[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error){background-color:var(--modus-wc-color-base-100);border-color:transparent;color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline{background-color:var(--modus-wc-color-base-100);border-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-base-content)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active),[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active){background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);border-color:transparent;color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-primary)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-btn:focus,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:focus{outline-offset:0}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled{opacity:0.3;--tw-text-opacity:1}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled .modus-wc-avatar{filter:grayscale(100%)}[data-theme=modus-classic-light] modus-wc-chip .modus-wc-chip .modus-wc-avatar,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip .modus-wc-avatar{display:flex}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn{background-color:var(--modus-wc-color-gray-1);border-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-gray-9)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active{background-color:var(--modus-wc-color-highlight-blue);border-color:transparent;color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-blue-dark) 50%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--active.modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error{background-color:var(--modus-wc-color-red-pale);border-color:transparent;color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--error.modus-wc-chip--outline{background-color:var(--modus-wc-color-red-pale);border-color:var(--modus-wc-color-red-dark);color:var(--modus-wc-color-red-dark)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-chip--outline{background-color:transparent;border-color:var(--modus-wc-color-base-100);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error){background-color:var(--modus-wc-color-gray-0);border-color:transparent;color:var(--modus-wc-color-gray-9)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:hover:not(.modus-wc-chip--active):not(.modus-wc-chip--error).modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-gray-1) 12%, transparent);border-color:var(--modus-wc-color-base-200);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active){background-color:var(--modus-wc-color-highlight-blue);border-color:transparent;color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline{background-color:color-mix(in sRGB, var(--modus-wc-color-blue-dark) 50%, transparent);border-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn:active:not(.modus-wc-chip--error):not(.modus-wc-chip--active).modus-wc-chip--outline .modus-wc-chip-label{color:var(--modus-wc-color-gray-1)}[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-chip--disabled{opacity:0.6;--tw-text-opacity:1}";const e=class{constructor(o){c(this,o),this.inheritedAttributes={},this.color="primary",this.customClass="",this.size="md",this.variant="spinner"}componentWillLoad(){r(this.el),this.el.ariaLabel||(this.el.ariaLabel="Loading"),this.inheritedAttributes=m(this.el)}getClasses(){const c=["modus-wc-loader"],o=(({color:c,size:o,variant:s})=>{let d="";return c&&(d=`${d} modus-wc-text-${c}`),o&&(d=`${d} modus-wc-loader-${o}`),s&&(d=`${d} modus-wc-loader-${s}`),d.trim()})({color:this.color,size:this.size,variant:this.variant});return o&&c.push(o),this.customClass&&c.push(this.customClass),c.join(" ")}render(){return s(d,{key:"943fcf246294bdb14ead7d0a554e40ea871b1212"},s("span",Object.assign({key:"d62c2b2d0b82aeca81e8a6d61bfac7bec6fca716",class:this.getClasses(),role:"status",tabindex:-1},this.inheritedAttributes)))}get el(){return i(this)}};e.style="/**\n* This component uses styles adapted from DaisyUI's loading component.\n*   https://github.com/saadeghi/daisyui/blob/master/src/components/styled/loading.css\n*\n* We found that 'loading' classes from DaisyUI will break styles in the Modus Web Components during\n* the build process so we define all styles here for this component.\n*\n* Note: do not use the 'loading' classes from DaisyUI in this component.\n*/\nmodus-wc-loader .modus-wc-loader {\n  aspect-ratio: 1/1;\n  background-color: currentColor;\n  display: inline-block;\n  mask-position: center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n  pointer-events: none;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-xs {\n  width: 1rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-sm {\n  width: 1.25rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-md {\n  width: 1.5rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-lg {\n  width: 2.5rem;\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-ball {\n  mask-image: url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_rXNP%7Banimation:spinner_YeBj .8s infinite%7D@keyframes spinner_YeBj%7B0%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);cy:5px%7D46.875%25%7Bcy:20px;rx:4px;ry:4px%7D50%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);cy:20.5px;rx:4.8px;ry:3px%7D53.125%25%7Brx:4px;ry:4px%7D100%25%7Bcy:5px%7D%7D%3C/style%3E%3Cellipse class='spinner_rXNP' cx='12' cy='5' rx='4' ry='4'/%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-bars {\n  mask-image: url(\"data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_hzlK%7Banimation:spinner_vc4H .8s linear infinite;animation-delay:-.8s%7D.spinner_koGT%7Banimation-delay:-.65s%7D.spinner_YF1u%7Banimation-delay:-.5s%7D@keyframes spinner_vc4H%7B0%25%7By:1px;height:22px%7D93.75%25%7By:5px;height:14px;opacity:.2%7D%7D%3C/style%3E%3Crect class='spinner_hzlK' x='1' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_koGT' x='9' y='1' width='6' height='22'/%3E%3Crect class='spinner_hzlK spinner_YF1u' x='17' y='1' width='6' height='22'/%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-dots {\n  mask-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_qM83%7Banimation:spinner_8HQG 1.05s infinite%7D.spinner_oXPr%7Banimation-delay:.1s%7D.spinner_ZTLf%7Banimation-delay:.2s%7D@keyframes spinner_8HQG%7B0%25,57.14%25%7Banimation-timing-function:cubic-bezier(0.33,.66,.66,1);transform:translate(0)%7D28.57%25%7Banimation-timing-function:cubic-bezier(0.33,0,.66,.33);transform:translateY(-6px)%7D100%25%7Btransform:translate(0)%7D%7D%3C/style%3E%3Ccircle class='spinner_qM83' cx='4' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_oXPr' cx='12' cy='12' r='3'/%3E%3Ccircle class='spinner_qM83 spinner_ZTLf' cx='20' cy='12' r='3'/%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-infinity {\n  mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='shape-rendering: auto;' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cpath fill='none' stroke='%230a0a0a' stroke-width='10' stroke-dasharray='205.271142578125 51.317785644531256' d='M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z' stroke-linecap='round' style='transform:scale(0.8);transform-origin:50px 50px'%3E%3Canimate attributeName='stroke-dashoffset' repeatCount='indefinite' dur='2s' keyTimes='0;1' values='0;256.58892822265625'%3E%3C/animate%3E%3C/path%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-ring {\n  mask-image: url(\"data:image/svg+xml,%3Csvg width='44' height='44' viewBox='0 0 44 44' xmlns='http://www.w3.org/2000/svg' stroke='%23fff'%3E%3Cg fill='none' fill-rule='evenodd' stroke-width='2'%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='0s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='0s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3Ccircle cx='22' cy='22' r='1'%3E%3Canimate attributeName='r' begin='-0.9s' dur='1.8s' values='1; 20' calcMode='spline' keyTimes='0; 1' keySplines='0.165, 0.84, 0.44, 1' repeatCount='indefinite' /%3E%3Canimate attributeName='stroke-opacity' begin='-0.9s' dur='1.8s' values='1; 0' calcMode='spline' keyTimes='0; 1' keySplines='0.3, 0.61, 0.355, 1' repeatCount='indefinite' /%3E%3C/circle%3E%3C/g%3E%3C/svg%3E\");\n}\nmodus-wc-loader .modus-wc-loader.modus-wc-loader-spinner {\n  mask-image: url(\"data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E\");\n}";export{t as modus_wc_chip,e as modus_wc_loader}