@trimble-oss/moduswebcomponents/modus-wc/p-95a8fabe.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{h as c,r as o,c as s,H as d,g as r}from"./p-D_4hbGjA.js";import{K as i,i as a}from"./p-BLBSdonk.js";const m=({className:o,onClick:s})=>c("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-cancel-circle ${o||""}`,onClick:s||void 0,viewBox:"0 0 24 24"},c("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m4.3 14.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41"})),u=class{constructor(c){o(this,c),this.chipClick=s(this,"chipClick"),this.chipRemove=s(this,"chipRemove"),this.inheritedAttributes={},this.active=!1,this.customClass="",this.disabled=!1,this.hasError=!1,this.label="",this.showRemove=!1,this.shape="rectangle",this.size="md",this.variant="filled",this.handleKeyDown=c=>{this.disabled||c.key!==i.Enter&&c.key!==i.Space||(c.preventDefault(),this.chipClick.emit(c))},this.handleKeyUp=c=>{this.disabled||c.key!==i.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(){this.el.ariaLabel||(this.el.ariaLabel=this.label||"Chip"),this.inheritedAttributes=a(this.el)}getClasses(){const c=["modus-wc-chip","modus-wc-btn"],o=(({active:c,disabled:o,hasError:s,shape:d,size:r,variant:i})=>{let a="";return c&&(a=`${a} modus-wc-chip--active`),o&&(a=`${a} modus-wc-chip--disabled`),s&&(a=`${a} modus-wc-chip--error`),r&&(a=`${a} modus-wc-btn-${r}`),"circle"===d&&(a=`${a} modus-wc-chip--circle`),i&&"outline"===i&&(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.customClass&&c.push(this.customClass),c.join(" ")}render(){return c(d,{key:"db82ce0e4024fbc5200869df34bf4d8dc3d52f9d"},c("button",Object.assign({key:"7f57b6753ee96742236aae21feb4a1b421c1474c","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),c("slot",{key:"b65e34278ed8681cccc823161615d686b51f1209"}),this.label&&c("span",{key:"15fd32b4fb2b0b1342031f81cc5432c357e1949b",class:"modus-wc-chip-label"},this.label),this.showRemove&&c(m,{key:"6cb2586d635f89e3e9b71841b647e642a7662a8a",className:"modus-wc-chip-remove-icon",onClick:this.handleChipRemove})))}get el(){return r(this)}};u.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{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-chip-remove-icon{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{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{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{height:var(--modus-wc-spacing-lg);width:var(--modus-wc-spacing-lg)}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{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-chip-remove-icon{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}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-200)}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%)}modus-wc-chip .modus-wc-chip .modus-wc-avatar{display:flex}[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,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-sm .modus-wc-avatar{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-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{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,[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,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-md .modus-wc-avatar{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{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-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,[data-theme=modus-classic-dark] modus-wc-chip .modus-wc-chip.modus-wc-btn.modus-wc-btn-lg .modus-wc-avatar{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}[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{height:var(--modus-wc-spacing-xl);width:var(--modus-wc-spacing-xl)}[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-200)}[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:var(--modus-wc-color-base-100);background-color:transparent;background-color:color-mix(in sRGB, var(--modus-wc-color-highlight-blue) 15%, transparent);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-gray-1);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-gray-5);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 t=class{constructor(c){o(this,c),this.inheritedAttributes={},this.color="primary",this.customClass="",this.size="md",this.variant="spinner"}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Loading"),this.inheritedAttributes=a(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 c(d,{key:"99b13b7c5bf1e5bbb425150aeadae61882273ddf"},c("span",Object.assign({key:"32ed0fdbff3a0594701886ac38fd6c0c4c89743c",class:this.getClasses(),role:"status",tabindex:-1},this.inheritedAttributes)))}get el(){return r(this)}};t.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{u as modus_wc_chip,t as modus_wc_loader}