import { r as registerInstance, h, H as Host } from './index-7e09edea.js';

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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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)));
  }
};
BsCharacterCount.style = bsCharacterCountCss;

const bsFieldLayoutCss = "bs-field-layout{display:block}bs-field-layout .bs-field-details{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--bs-space-2);padding:0 0.75rem;margin-top:0.5rem}bs-field-layout :where(textarea,bs-textarea)+.bs-field-details{margin-top:0.25rem}bs-field-layout .bs-field-details :where(.bs-character-count:first-child){margin-left:auto}";

const BsFieldLayout = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.charCount = undefined;
    this.charMax = undefined;
    this.disabled = false;
    this.error = undefined;
    this.hints = undefined;
    this.label = undefined;
    this.labelFor = undefined;
    this.required = undefined;
    this.hintId = undefined;
  }
  render() {
    return (h(Host, { "data-disabled": this.disabled }, this.label && (h("bs-label", { for: this.labelFor, disabled: this.disabled, required: this.required }, this.label)), h("slot", null), (this.hints || this.charMax) && (h("div", { class: "bs-field-details" }, this.hints && (h("bs-hint", { error: this.error, hintId: this.hintId, hints: this.hints })), this.charMax && (h("bs-character-count", { charCount: this.charCount, charMax: this.charMax }))))));
  }
};
BsFieldLayout.style = bsFieldLayoutCss;

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 = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    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);
    }))));
  }
};
BsHint.style = bsHintCss;

export { BsCharacterCount as bs_character_count, BsFieldLayout as bs_field_layout, BsHint as bs_hint };

//# sourceMappingURL=bs-character-count_3.entry.js.map