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

/**
 * This type encapsulates values to be used for
 * variants, contrasts etc. It aims to be generic
 * enough to be used in several different circumstances
 * where values such as 'low' or 'light' does not make
 * sense.
 */
const Force = {
  WEAK: 'weak',
  MEDIUM: 'medium',
  STRONG: 'strong',
};
Object.values(Force);

const teliaDividerCss = ".telia-divider{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15);height:0;}.telia-divider--dark-bg-weak{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(255, 255, 255, 0.15)}.telia-divider--light-bg-weak{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.15)}.telia-divider--dark-bg-medium{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(255, 255, 255, 0.3)}.telia-divider--light-bg-medium{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.3)}.telia-divider--dark-bg-strong{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(255, 255, 255, 0.5)}.telia-divider--light-bg-strong{border-bottom:calc(0.1rem * var(--voca-rem-multiplier)) solid rgba(0, 0, 0, 0.5)}";

const TeliaDivider$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    /**
     * The contrast of the divider against the background.
     */
    this.variant = Force.WEAK;
    /**
     * When used on a dark background, set this
     * property to true. The color of the divider will
     * change to something suitable on a dark background.
     */
    this.darkBackground = false;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-divider';
    this.baseClass = 'telia-divider';
  }
  getAppearenceClass() {
    return `${this.baseClass}--${this.darkBackground ? 'dark-bg' : 'light-bg'}-${this.variant}`;
  }
  render() {
    const classes = {
      [`${this.baseClass}`]: true,
      [this.getAppearenceClass()]: true,
    };
    return (h("div", { class: classes, "data-testid": this.dataTestid }, h("telia-vst", { dataTrackingId: this.dataTrackingId })));
  }
  static get style() { return teliaDividerCss; }
}, [1, "telia-divider", {
    "dataTestid": [1, "data-testid"],
    "variant": [1],
    "darkBackground": [4, "dark-background"]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["telia-divider", "telia-vst"];
  components.forEach(tagName => { switch (tagName) {
    case "telia-divider":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, TeliaDivider$1);
      }
      break;
    case "telia-vst":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const TeliaDivider = TeliaDivider$1;
const defineCustomElement = defineCustomElement$1;

export { TeliaDivider, defineCustomElement };
