@trimble-oss/moduswebcomponents/components/modus-wc-typography.js

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

import { p as proxyCustomElement, H, h, c as Host } from './p-BMvVSi6Y.js';
import { i as inheritAriaAttributes } from './p-COxr4v9W.js';

const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const convertPropsToClasses = ({ size, weight, variant, }) => {
    let classes = '';
    // Heading styles are handled in modus-wc-typography.scss
    if (variant && HEADINGS.includes(variant)) {
        return classes;
    }
    if (size) {
        classes = `${classes} modus-wc-text-${size}`;
    }
    if (weight) {
        classes = `${classes} modus-wc-typography-weight-${weight}`;
    }
    return classes.trim();
};

const modusWcTypographyCss = "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)}";

const ModusWCTypography = /*@__PURE__*/ proxyCustomElement(class ModusWCTypography extends H {
    constructor() {
        super();
        this.__registerHost();
        this.inheritedAttributes = {};
        /** Custom CSS class to apply to the typography element. */
        this.customClass = '';
        /** The size of the font. */
        this.size = 'md';
        /** The variant of the typography component. */
        this.variant = 'p';
        /** The weight of the text. */
        this.weight = 'normal';
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    getClasses() {
        const classList = ['modus-wc-typography'];
        const propClasses = convertPropsToClasses({
            size: this.size,
            variant: this.variant,
            weight: this.weight,
        });
        // The order CSS classes are added matters to CSS specificity
        if (propClasses)
            classList.push(propClasses);
        if (this.customClass)
            classList.push(this.customClass);
        return classList.join(' ');
    }
    render() {
        const Element = this.variant;
        return (h(Host, { key: 'bf38fd960e0fb6404ccbef598085a568e6f1e6c7' }, h(Element, Object.assign({ key: 'bb4cfb85df7b53a7e9483444d8566fd8c588207b', class: this.getClasses() }, this.inheritedAttributes), h("slot", { key: '7c9b0f3a19f9db5598989c5bb3ad515980d13c26' }))));
    }
    get el() { return this; }
    static get style() { return modusWcTypographyCss; }
}, [4, "modus-wc-typography", {
        "customClass": [1, "custom-class"],
        "size": [1],
        "variant": [1],
        "weight": [1]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-typography":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWCTypography);
            }
            break;
    } });
}

const ModusWcTypography = ModusWCTypography;
const defineCustomElement = defineCustomElement$1;

export { ModusWcTypography, defineCustomElement };