import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';

const bsCharacterCountCss = ".bs-character-count{color:var(--bs-ink-base);font-size:var(--bs-text-xs);font-weight:400;text-align:right;white-space:nowrap}:where([disabled],[data-disabled])+.bs-character-count,:where([disabled],[data-disabled]) .bs-character-count,.bs-character-count:where([data-disabled]){color:var(--bs-ink-disabled)}.bs-character-count:where([data-error]){color:var(--bs-ink-red)}";

const BsCharacterCount = /*@__PURE__*/ proxyCustomElement(class BsCharacterCount extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.charCount = undefined;
    this.charMax = undefined;
  }
  render() {
    return (h(Host, { class: "bs-character-count", "data-error": this.charCount > this.charMax }, h("span", null, this.charCount || '0', " / ", this.charMax)));
  }
  static get style() { return bsCharacterCountCss; }
}, [0, "bs-character-count", {
    "charCount": [2, "char-count"],
    "charMax": [2, "char-max"]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-character-count"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-character-count":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsCharacterCount);
      }
      break;
  } });
}

export { BsCharacterCount as B, defineCustomElement as d };

//# sourceMappingURL=bs-character-count2.js.map