'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd6fab62.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) {
    index.registerInstance(this, hostRef);
    this.size = 'medium';
  }
  render() {
    return (index.h("div", { class: {
        'heading': true,
        'heading--small': this.size === 'small',
        'heading--medium': this.size === 'medium',
        'heading--large': this.size === 'large',
      }, part: "base" }, index.h("div", { class: { heading__text: true } }, index.h("div", { class: "heading__title" }, index.h("slot", null)), index.h("div", { class: "heading__description" }, index.h("slot", { name: "description" }))), index.h("slot", { name: "end" })));
  }
  get el() { return index.getElement(this); }
};
ScHeading.style = scHeadingCss;

exports.sc_heading = ScHeading;
