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

const scHeadingCss = ":host{display:block}.heading{font-family:var(--sc-font-sans);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.heading--small .heading__title{font-size:var(--sc-font-size-small);text-transform:uppercase}.heading__text{width:100%}.heading__title{font-size:var(--sc-font-size-x-large);font-weight:var(--sc-font-weight-bold);line-height:var(--sc-line-height-dense);white-space:nowrap}.heading__description{font-size:var(--sc-font-size-normal);line-height:var(--sc-line-height-dense);color:var(--sc-color-gray-500)}";

const ScHeading = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.size = 'medium';
  }
  render() {
    return (h("div", { part: "base", class: {
        'heading': true,
        'heading--small': this.size === 'small',
        'heading--medium': this.size === 'medium',
        'heading--large': this.size === 'large',
      } }, h("div", { class: { heading__text: true } }, h("div", { class: "heading__title", part: "title" }, h("slot", null)), h("div", { class: "heading__description", part: "description" }, h("slot", { name: "description" }))), h("slot", { name: "end" })));
  }
  get el() { return this; }
  static get style() { return scHeadingCss; }
}, [1, "sc-heading", {
    "size": [1]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-heading"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-heading":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScHeading);
      }
      break;
  } });
}
defineCustomElement();

export { ScHeading as S, defineCustomElement as d };
