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

const bsBannerCss = "bs-banner{display:block}bs-banner{background-color:var(--bs-bg-invert-subtle);color:var(--bs-gray-100);display:flex;justify-content:center;padding-bottom:1rem;padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem}bs-banner:where([data-dismissed]){display:none}:where(.dark) bs-banner{color:var(--bs-black)}bs-banner :where(.bs-banner-content){align-items:center;display:flex;max-width:var(--bs-content-max-width);width:100%}bs-banner :where(.bs-banner-content .bs-banner-warning-icon){display:none;margin-right:0.625rem}bs-banner :where(.bs-banner-content div[data-slot]){flex-grow:1;padding-right:1.25rem}bs-banner :where(.bs-banner-content div[data-slot] a){color:var(--bs-pink-200);text-decoration:none}:where(.dark) bs-banner :where(.bs-banner-content div[data-slot] a){color:var(--bs-pink-500)}bs-banner :where(.bs-banner-content div[data-slot] a:hover){text-decoration:underline}bs-banner :where(.bs-banner-content button){background-color:inherit;color:inherit;cursor:pointer}@media (min-width: 957px){bs-banner :where(.bs-banner-content .bs-banner-warning-icon){display:inline-flex}}";

const BsBanner$1 = /*@__PURE__*/ proxyCustomElement(class BsBanner extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.dismiss = createEvent(this, "dismiss", 7);
    this.isDismissed = false;
  }
  handleDismiss() {
    this.isDismissed = true;
    this.dismiss.emit();
  }
  render() {
    return (h(Host, { role: "alert", class: "bs-banner", "data-dismissed": this.isDismissed ? true : undefined }, h("div", { class: "bs-banner-content" }, h("bs-icon-warning", { size: "lg", class: "bs-banner-warning-icon" }), h("div", { "data-slot": true }, h("slot", null)), h("button", { type: "button", title: "Close Banner", onClick: () => this.handleDismiss() }, h("bs-icon-close", null)))));
  }
  static get style() { return bsBannerCss; }
}, [4, "bs-banner", {
    "isDismissed": [32]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["bs-banner"];
  components.forEach(tagName => { switch (tagName) {
    case "bs-banner":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, BsBanner$1);
      }
      break;
  } });
}

const BsBanner = BsBanner$1;
const defineCustomElement = defineCustomElement$1;

export { BsBanner, defineCustomElement };

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