import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { i as isRtl } from './page-align.js';

const scTextCss = ":host{display:block;--font-size:var(--font-size, var(--sc-font-size-medium));--font-weight:var(--font-size, var(--sc-font-weight-normal));--line-height:var(--font-size, var(--sc-line-height-medium));--text-align:left;--color:var(--color, inherit)}.text{margin:0;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-align:var(--text-align);color:var(--sc-stacked-list-row-text-color, var(--color))}.text.is-truncated{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--is-rtl .text{text-align:right}";

const ScText = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.tag = 'p';
    this.truncate = false;
  }
  render() {
    const CustomTag = this.tag;
    return (h(CustomTag, { class: {
        'text': true,
        'is-truncated': this.truncate,
        'text--is-rtl': isRtl()
      } }, h("slot", null)));
  }
  static get style() { return scTextCss; }
}, [1, "sc-text", {
    "tag": [1],
    "truncate": [4]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-text"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-text":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScText);
      }
      break;
  } });
}
defineCustomElement();

export { ScText as S, defineCustomElement as d };
