@coderundebug/ui-web/ui-badge.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as r}from"./ui-tools.js";export class UiBadge extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiBadge.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiBadge.uiCssStyleSheet]}}UiBadge.uiCss=":host{display:inline-block;--ui-badge-background:var(--ui-badge-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-badge-foreground:var(--ui-badge-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-badge-font-size:var(--ui-badge-small-font-size, var(--ui-font-size-small, 12px));--ui-badge-padding:var(--ui-badge-small-padding, 0 4px);font-size:var(--ui-badge-font-size);line-height:150%;text-align:center;white-space:nowrap;user-select:none;-webkit-user-select:none;min-width:var(--ui-badge-font-size);padding:var(--ui-badge-padding);border-radius:10rem;border-style:none;box-shadow:var(--ui-badge-box-shadow, var(--ui-border-box-shadow, none));background:var(--ui-badge-background);color:var(--ui-badge-foreground);}:host([normal]){--ui-badge-font-size:var(--ui-badge-normal-font-size, var(--ui-font-size-normal, 16px));--ui-badge-padding:var(--ui-badge-normal-padding, 0 6px);}:host([large]){--ui-badge-font-size:var(--ui-badge-large-font-size, var(--ui-font-size-large, 24px));--ui-badge-padding:var(--ui-badge-large-padding, 0 8px);}:host([selected]){--ui-badge-background:var(--ui-badge-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-badge-foreground:var(--ui-badge-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}:host([success]){--ui-badge-background:var(--ui-badge-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-badge-foreground:var(--ui-badge-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]){--ui-badge-background:var(--ui-badge-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-badge-foreground:var(--ui-badge-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]){--ui-badge-background:var(--ui-badge-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-badge-foreground:var(--ui-badge-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]){--ui-badge-background:var(--ui-badge-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-badge-foreground:var(--ui-badge-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]){--ui-badge-background:var(--ui-badge-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-badge-foreground:var(--ui-badge-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([invert]){background:var(--ui-badge-foreground);color:var(--ui-badge-background);}:host([outline]){background-color:transparent;color:var(--ui-badge-foreground);border-style:var(--ui-badge-border-style, var(--ui-border-style, solid));border-width:var(--ui-badge-border-width, var(--ui-border-width, 1px));border-color:var(--ui-badge-border-color, var(--ui-badge-foreground));}@media (forced-colors:active) or (prefers-contrast:more){:host{border-style:var(--ui-border-style, solid);border-width:var(--ui-border-width, 1px);}}",UiBadge.uiHtml="<slot></slot>",r.createUi(UiBadge,"ui-badge",import.meta.url);