@trimble-oss/moduswebcomponents/esm/modus-wc-input-label.entry.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 { r as registerInstance, h, e as Host, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
import { i as inheritAriaAttributes } from './utils-DN2BGzSQ.js';

const modusWcInputLabelCss = "modus-wc-input-label.modus-wc-input-label-host{align-items:center;display:flex}modus-wc-input-label .modus-wc-input-label{font-weight:var(--modus-wc-font-weight-bold)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-sm .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-2xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-md .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg{font-size:var(--modus-wc-font-size-md)}modus-wc-input-label .modus-wc-input-label.modus-wc-input-label-size-lg .modus-wc-input-label-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-input-label .modus-wc-input-label .required-indicator{color:var(--modus-wc-color-error)}[data-theme=modus-classic-light] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-gray-2)}[data-theme=connect-light] modus-wc-input-label .modus-wc-input-label{color:oklch(var(--s));font-weight:var(--modus-wc-font-weight-normal);margin-bottom:0;min-height:var(--modus-wc-line-height-md)}[data-theme=connect-dark] modus-wc-input-label .modus-wc-input-label{color:var(--modus-wc-color-white);font-weight:var(--modus-wc-font-weight-normal);margin-bottom:0;min-height:var(--modus-wc-line-height-md)}";

const ModusWcInputLabel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inheritedAttributes = {};
        /** Additional classes for custom styling. */
        this.customClass = '';
        /** Whether the label indicates a required field. */
        this.required = false;
        /** The size of the label. */
        this.size = 'md';
        this.getClasses = () => {
            const classList = ['modus-wc-input-label'];
            // The order CSS classes are added matters to CSS specificity
            if (this.size)
                classList.push(`modus-wc-input-label-size-${this.size}`);
            if (this.customClass)
                classList.push(this.customClass);
            return classList.join(' ');
        };
    }
    componentWillLoad() {
        // Auto-inject CSS if component is used inside user's shadow DOM
        handleShadowDOMStyles(this.el);
        this.inheritedAttributes = inheritAriaAttributes(this.el);
    }
    render() {
        return (h(Host, { key: 'a605e23fc81d86b963f7e3fa36f8b69adcff9065', class: "modus-wc-input-label-host" }, h("label", Object.assign({ key: '8cf73f3be6c782b8e19c35e9036ac4a4ee72301a', class: this.getClasses(), htmlFor: this.forId }, this.inheritedAttributes), this.labelText, this.required && (h("span", { key: 'af1eb301512856ac485f6b8031269e337651188a', "aria-hidden": "true", class: "required-indicator" }, '\u00A0*')), this.subLabelText && (h("div", { key: '414b1c2706ca0e8543c259ed9bff0a91b112c554', class: "modus-wc-input-label-sublabel" }, this.subLabelText)), h("slot", { key: '7e4bad51e82106e94c0e99d5e06e45dca882b91e' }))));
    }
    get el() { return getElement(this); }
};
ModusWcInputLabel.style = modusWcInputLabelCss;

export { ModusWcInputLabel as modus_wc_input_label };