import { r as registerInstance, h, g as getElement } from './index-f1d2a96f.js';

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__title{font-size:var(--sc-font-size-x-large);font-weight:var(--sc-font-weight-bold);line-height:var(--sc-line-height-dense)}.heading__description{font-size:var(--sc-font-size-normal);line-height:var(--sc-line-height-dense);color:var(--sc-color-gray-500)}";

const ScHeading = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.size = 'medium';
  }
  render() {
    return (h("div", { class: {
        'heading': true,
        'heading--small': this.size === 'small',
        'heading--medium': this.size === 'medium',
        'heading--large': this.size === 'large',
      }, part: "base" }, h("div", { class: { heading__text: true } }, h("div", { class: "heading__title" }, h("slot", null)), h("div", { class: "heading__description" }, h("slot", { name: "description" }))), h("slot", { name: "end" })));
  }
  get el() { return getElement(this); }
};
ScHeading.style = scHeadingCss;

export { ScHeading as sc_heading };
