@trimble-oss/moduswebcomponents/modus-wc/p-b61a60c6.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 d,h as o,H as c,g as s}from"./p-D_4hbGjA.js";import{i as a}from"./p-BLBSdonk.js";const e=["success","warning","danger"],r=class{constructor(o){d(this,o),this.inheritedAttributes={},this.color="primary",this.customClass="",this.size="md",this.variant="filled"}componentWillLoad(){this.inheritedAttributes=a(this.el)}getClasses(){const d=["modus-wc-badge"],o=(({color:d,size:o,variant:c})=>{let s="";if(d)switch(d){case"primary":s=`${s} modus-wc-badge-primary`;break;case"secondary":s=`${s} modus-wc-badge-secondary`;break;case"tertiary":s=`${s} modus-wc-badge-neutral`;break;case"high-contrast":s=`${s} modus-wc-badge-high-contrast`;break;case"success":s=`${s} modus-wc-badge-success`;break;case"warning":s=`${s} modus-wc-badge-warning`;break;case"danger":s=`${s} modus-wc-badge-error`}if(o&&(s=`${s} modus-wc-badge-${o}`),c)switch(c){case"counter":s=`${s} modus-wc-badge-counter`;break;case"outlined":s=`${s} modus-wc-badge-outlined`;break;case"text":s=`${s} modus-wc-badge-text`}return s.trim()})({color:this.color,size:this.size,variant:this.variant});return o&&d.push(o),this.customClass&&d.push(this.customClass),d.join(" ")}render(){const d=e.includes(this.color),s="role"in this.inheritedAttributes?this.inheritedAttributes.role:d?"alert":"status";return o(c,{key:"7d3650836625d098dfaf7af635495ea1644994c0"},o("span",Object.assign({key:"6ad6f66bb5bebc82c37cb2bab63d0240b13d9088",class:this.getClasses()},this.inheritedAttributes,{role:s}),o("slot",{key:"cfb532a378a0ddeb9bebceb4bef1ea9e59bd2e1c"})))}get el(){return s(this)}};r.style="modus-wc-badge .modus-wc-badge{font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-badge .modus-wc-badge.modus-wc-badge-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-badge .modus-wc-badge.modus-wc-badge-high-contrast{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-white)}modus-wc-badge .modus-wc-badge.modus-wc-badge-counter{border-radius:1rem}modus-wc-badge .modus-wc-badge.modus-wc-badge-text{background-color:transparent;border:none}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary{color:var(--modus-wc-color-trimble-blue)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-secondary{color:var(--modus-wc-color-secondary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-neutral{color:var(--modus-wc-color-gray-1)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast{color:var(--modus-wc-color-base-content)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success{color:var(--modus-wc-color-green-dark)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-warning{color:var(--modus-wc-color-warning)}modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-error{color:var(--modus-wc-color-error)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined{background-color:transparent;border-radius:1rem}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-primary{border-color:var(--modus-wc-color-primary);color:var(--modus-wc-color-primary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-secondary{border-color:var(--modus-wc-color-secondary);color:var(--modus-wc-color-secondary)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-neutral{border-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-gray-1)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-high-contrast{border-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-base-content)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-success{border-color:var(--modus-wc-color-success);color:var(--modus-wc-color-success)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-warning{border-color:var(--modus-wc-color-warning);color:var(--modus-wc-color-warning)}modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined.modus-wc-badge-error{border-color:var(--modus-wc-color-error);color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge{border:unset;font-weight:var(--modus-wc-font-weight-bold)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary{color:var(--modus-wc-color-gray-6)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-secondary:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined){background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-counter){border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined),[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-success:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined){background-color:var(--modus-wc-color-green-dark)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-sm{border-radius:var(--modus-wc-border-radius-sm);font-size:var(--modus-wc-font-size-xs);height:14px;padding:var(--modus-wc-spacing-2xs) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-md,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-md{font-size:var(--modus-wc-font-size-sm);height:20px;padding:var(--modus-wc-spacing-xs) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-lg{font-size:var(--modus-wc-font-size-md);height:28px;padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-md)}[data-theme=modus-classic-light] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined,[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-outlined{background-color:transparent;border:1px solid;border-radius:1rem}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-primary{background-color:var(--modus-wc-color-highlight-blue);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-success{background-color:var(--modus-wc-color-success)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-secondary{background-color:var(--modus-wc-color-gray-6);color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-neutral{background-color:var(--modus-wc-color-gray-1);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge:not(.modus-wc-badge-text):not(.modus-wc-badge-outlined).modus-wc-badge-high-contrast{background-color:var(--modus-wc-color-gray-light);color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-primary{color:var(--modus-wc-color-highlight-blue)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-high-contrast{color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-badge .modus-wc-badge.modus-wc-badge-text.modus-wc-badge-success{color:var(--modus-wc-color-success)}";export{r as modus_wc_badge}