UNPKG

@cbpds/web-components

Version:
5 lines 2.58 kB
/*! * CPB Design System web components - built with Stencil */ import{p as c,H as o,h as r,c as a}from"./p-9caf8482.js";import{s as t}from"./p-9c1b2f31.js";const e=":root{--cbp-tag-color:var(--cbp-color-info-lighter);--cbp-tag-color-dark:var(--cbp-color-info-darker);--cbp-tag-color-background:var(--cbp-color-info-dark);--cbp-tag-color-background-dark:var(--cbp-color-info-light)}[data-cbp-theme=light] cbp-tag[context*=dark]:not([context=light-always]),[data-cbp-theme=dark] cbp-tag:not([context=dark-inverts]):not([context=light-always]){--cbp-tag-color:var(--cbp-tag-color-dark);--cbp-tag-color-background:var(--cbp-tag-color-background-dark)}cbp-tag{display:inline-flex;gap:var(--cbp-space-1x);align-items:center;color:var(--cbp-tag-color);background-color:var(--cbp-tag-color-background);border-radius:var(--cbp-border-radius-pill);cursor:default;padding:0 var(--cbp-space-3x);text-align:center;font-weight:var(--cbp-font-weight-medium);font-size:var(--cbp-font-size-subhead);line-height:var(--cbp-space-7x);width:fit-content;max-width:100%;overflow:hidden;white-space:nowrap}cbp-tag[color=warning]{--cbp-tag-color:var(--cbp-color-text-darker);--cbp-tag-color-dark:var(--cbp-color-text-darker);--cbp-tag-color-background:var(--cbp-color-warning-base);--cbp-tag-color-background-dark:var(--cbp-color-warning-light)}cbp-tag[color=success]{--cbp-tag-color:var(--cbp-color-success-lighter);--cbp-tag-color-dark:var(--cbp-color-success-dark);--cbp-tag-color-background:var(--cbp-color-success-dark);--cbp-tag-color-background-dark:var(--cbp-color-success-lighter)}cbp-tag[color=danger]{--cbp-tag-color:var(--cbp-color-text-lightest);--cbp-tag-color-dark:var(--cbp-color-text-darkest);--cbp-tag-color-background:var(--cbp-color-danger-dark);--cbp-tag-color-background-dark:var(--cbp-color-danger-light)}";const n=e;const b=c(class c extends o{constructor(){super();this.__registerHost();this.color=undefined;this.context=undefined;this.sx={}}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}t(this.host,Object.assign({},this.sx))}render(){return r(a,{key:"87f03a70287d13d0eca4763cef18674288e1f4fc"},r("slot",{key:"681d1e6cce44a05a6a12ea6e640ac0ff54c054d6"}))}get host(){return this}static get style(){return n}},[4,"cbp-tag",{color:[513],context:[513],sx:[8]}]);function l(){if(typeof customElements==="undefined"){return}const c=["cbp-tag"];c.forEach((c=>{switch(c){case"cbp-tag":if(!customElements.get(c)){customElements.define(c,b)}break}}))}const p=b;const s=l;export{p as CbpTag,s as defineCustomElement}; //# sourceMappingURL=cbp-tag.js.map