import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { d as defineCustomElement$2 } from './telia-vst2.js';

const teliaColorDotCss = ".telia-color-dot{border-radius:calc(99.9rem * var(--voca-rem-multiplier))}.telia-color-dot--with_border{border:calc(0.1rem * var(--voca-rem-multiplier)) solid #c8c8cd}.telia-color-dot--xs{height:calc(1.2rem * var(--voca-rem-multiplier));width:calc(1.2rem * var(--voca-rem-multiplier))}.telia-color-dot--sm{height:calc(2.4rem * var(--voca-rem-multiplier));width:calc(2.4rem * var(--voca-rem-multiplier))}.telia-color-dot--md{height:calc(3.2rem * var(--voca-rem-multiplier));width:calc(3.2rem * var(--voca-rem-multiplier))}.telia-color-dot--lg{height:calc(4.8rem * var(--voca-rem-multiplier));width:calc(4.8rem * var(--voca-rem-multiplier))}";

const TeliaColorDot$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /** Change size of TeliaColorDot from xs to lg */
    this.size = 'sm';
    /** Add border. Use if color contrast is low. */
    this.withborder = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-color-dot';
  }
  render() {
    return (h("div", { "data-testid": "telia-color-dot-border-container", class: {
        'telia-color-dot': true,
        'telia-color-dot--with_border': this.withborder,
        [`telia-color-dot--${this.size}`]: true,
      }, style: { backgroundColor: this.color, borderColor: this.borderColor } }, h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaColorDotCss; }
}, [1, "telia-color-dot", {
    "borderColor": [1, "border-color"],
    "color": [1],
    "size": [1],
    "dataTestid": [1, "data-testid"],
    "withborder": [4]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-color-dot", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-color-dot":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaColorDot$1);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaColorDot = TeliaColorDot$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaColorDot, defineCustomElement };
