UNPKG

@trimble-oss/moduswebcomponents

Version:

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

1 lines 2.4 kB
import{r as t,h as o,H as s,g as h}from"./p-D5XAQERj.js";import{i as e}from"./p-DlW2F98o.js";const i=["h1","h2","h3","h4","h5","h6"],p=class{constructor(o){t(this,o),this.inheritedAttributes={},this.customClass="",this.size="md",this.variant="p",this.weight="normal"}componentWillLoad(){this.inheritedAttributes=e(this.el)}getClasses(){const t=["modus-wc-typography"],o=(({size:t,weight:o,variant:s})=>{let h="";return s&&i.includes(s)?h:(t&&(h=`${h} modus-wc-text-${t}`),o&&(h=`${h} modus-wc-typography-weight-${o}`),h.trim())})({size:this.size,variant:this.variant,weight:this.weight});return o&&t.push(o),this.customClass&&t.push(this.customClass),t.join(" ")}render(){return o(s,{key:"bf38fd960e0fb6404ccbef598085a568e6f1e6c7"},o(this.variant,Object.assign({key:"bb4cfb85df7b53a7e9483444d8566fd8c588207b",class:this.getClasses()},this.inheritedAttributes),o("slot",{key:"7c9b0f3a19f9db5598989c5bb3ad515980d13c26"})))}get el(){return h(this)}};p.style="modus-wc-typography h1.modus-wc-typography{font-size:var(--modus-wc-font-size-3xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.5px;line-height:36px}modus-wc-typography h2.modus-wc-typography{font-size:var(--modus-wc-font-size-2xl);font-weight:var(--modus-wc-font-weight-normal);letter-spacing:0.15px;line-height:30px}modus-wc-typography h3.modus-wc-typography{font-size:var(--modus-wc-font-size-xl);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:27px}modus-wc-typography h4.modus-wc-typography{font-size:var(--modus-wc-font-size-lg);font-weight:var(--modus-wc-font-weight-semibold);letter-spacing:0.15px;line-height:24px}modus-wc-typography h5.modus-wc-typography{font-size:var(--modus-wc-font-size-md);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:24px}modus-wc-typography h6.modus-wc-typography{font-size:var(--modus-wc-font-size-sm);font-weight:var(--modus-wc-font-weight-bold);letter-spacing:0.45px;line-height:18px}modus-wc-typography .modus-wc-typography-weight-light{font-weight:var(--modus-wc-font-weight-light)}modus-wc-typography .modus-wc-typography-weight-normal{font-weight:var(--modus-wc-font-weight-normal)}modus-wc-typography .modus-wc-typography-weight-semibold{font-weight:var(--modus-wc-font-weight-semibold)}modus-wc-typography .modus-wc-typography-weight-bold{font-weight:var(--modus-wc-font-weight-bold)}";export{p as modus_wc_typography}