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

const bsHintCss = "bs-hint{display:inline-block;min-width:0}bs-hint .bs-hint{--hint-color:var(--bs-ink-light);min-width:0;color:var(--hint-color);font-size:var(--bs-text-xs);padding:0;margin:0;list-style:none;overflow-wrap:break-word}bs-hint .bs-hint:where([data-error]){--hint-color:var(--bs-ink-red)}";

const BsHint = /*@__PURE__*/ proxyCustomElement(class BsHint extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.error = undefined;
    this.hintId = undefined;
    this.hints = undefined;
  }
  render() {
    const hints = this.hints
      ? Array.isArray(this.hints)
        ? this.hints
        : [this.hints]
      : null;
    return (h(Host, null, h("ul", { id: this.hintId, class: "bs-hint", "data-error": this.error, role: "list" }, hints.map(hint => {
      return h("li", null, hint);
    }))));
  }
  static get style() { return bsHintCss; }
}, [0, "bs-hint", {
    "error": [4],
    "hintId": [1, "hint-id"],
    "hints": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-hint"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-hint":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsHint);
      }
      break;
  } });
}

export { BsHint as B, defineCustomElement as d };

//# sourceMappingURL=bs-hint2.js.map