@hashicorp/design-system-components/dist/components/hds/form/label/index.js

Helios Design System Components

import Component from '@glimmer/component';
import HdsFormIndicator from '../indicator/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const ID_PREFIX = 'label-';
class HdsFormLabel extends Component {
  get id() {
    const {
      controlId
    } = this.args;
    if (controlId) {
      return `${ID_PREFIX}${controlId}`;
    }
    return null;
  }
  get classNames() {
    const classes = ['hds-form-label'];
    // add typographic classes
    classes.push('hds-typography-body-200', 'hds-font-weight-semibold');
    // add a class based on the @contextualClass argument
    // notice: this will *not* be documented for public use
    // the reason for this is that the contextual component declarations don't pass attributes to the component
    if (this.args.contextualClass) {
      classes.push(this.args.contextualClass);
    }
    return classes.join(' ');
  }
  static {
    setComponentTemplate(precompileTemplate("<label class={{this.classNames}} for=\"{{@controlId}}\" id={{this.id}} ...attributes>\n  {{yield}}\n  <HdsFormIndicator @isRequired={{@isRequired}} @isOptional={{@isOptional}} />\n  {{#if @hiddenText}}\n    <span class=\"sr-only\">\n      {{@hiddenText}}\n    </span>\n  {{/if}}\n</label>", {
      strictMode: true,
      scope: () => ({
        HdsFormIndicator
      })
    }), this);
  }
}

export { ID_PREFIX, HdsFormLabel as default };
//# sourceMappingURL=index.js.map