@telesign/boreal-web-components 0.1.0-alpha.1 → 0.1.0-alpha.3

package/dist/cjs/bds-text-field.cjs.entry.js

@@ -0,0 +1,373 @@
+'use strict';
+
+var index = require('./index-BcSjvXJk.js');
+var internals = require('./internals-X77qKxsK.js');
+var validateProps = require('./validateProps-BNOBk1Xs.js');
+
+/**
+ * Centralized list of `aria-label` values used by interactive elements.
+ * Add new entries to the `ARIA_LABELS` object to keep labels consistent
+ * and prevent typos across the design system.
+ */
+const ARIA_LABELS = {
+    Clear: 'Clear',
+    ShowPassword: 'Show password',
+    HidePassword: 'Hide password',
+};
+
+/**
+ * Centralized list of icon font-class names used by design-system components.
+ * Add new entries to the `ICONS` object to keep class names consistent
+ * and prevent typos across the design system.
+ */
+const ICONS = {
+    Close: 'bds-icon-close',
+    SightOn: 'bds-icon-sight-on',
+    SightOff: 'bds-icon-sight-off',
+};
+
+/**
+ * Generates a stable random ID for internal ARIA linkage.
+ * Used by components to wire labels, descriptions, and controls
+ * without exposing the ID as a public prop.
+ *
+ * @param prefix - Component-specific prefix for readability in DevTools.
+ */
+function createId(prefix = 'bds') {
+    return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+const TEXT_FIELD_TYPES = {
+    TEXT: 'text',
+    PASSWORD: 'password',
+};
+const TEXT_FIELD_VARIANTS = {
+    OUTLINE: 'outline',
+    PLAIN: 'plain',
+};
+const TEXT_FIELD_VALIDATION_TIMING = {
+    BLUR: 'blur',
+    CHANGE: 'change',
+    INPUT: 'input',
+    SUBMIT: 'submit',
+};
+
+const bdsTextFieldCss = () => `@charset "UTF-8";.bds-text-field__container,.bds-text-field__sublabel,.bds-text-field__actions,.bds-text-field__action,.bds-text-field__footer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-text-field [slot=prefix],.bds-text-field__sublabel{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs)}.bds-text-field{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--boreal-spacing-2xs);width:var(--bds-text-field-width, 100%);font-family:var(--boreal-typography-font-family-primary);color:var(--boreal-text-default)}.bds-text-field__container{padding:var(--boreal-spacing-1xs);padding-left:0;height:var(--boreal-layout-l);border:1px solid var(--boreal-stroke-default-light);border-radius:var(--boreal-radius-xs);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease;overflow:hidden}.bds-text-field__sublabel{gap:var(--boreal-spacing-3xs);padding-left:var(--boreal-spacing-xs);white-space:nowrap}.bds-text-field__sublabel em[class^=bds-icon-],.bds-text-field__sublabel em[class*=" bds-icon-"]{width:var(--boreal-icons-m);height:var(--boreal-icons-m);font-size:var(--boreal-typography-font-size-md);line-height:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-text-field [slot=prefix]{padding-left:var(--boreal-spacing-xs);overflow:hidden;white-space:nowrap;-ms-flex-negative:0;flex-shrink:0}.bds-text-field__control{min-width:0;width:100%;border:none;outline:none;background:transparent;padding:0;padding-left:var(--boreal-spacing-xs);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm)}.bds-text-field__control::-webkit-input-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control::-moz-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control:-ms-input-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control::-ms-input-placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control::placeholder{color:var(--boreal-text-default-light)}.bds-text-field__control:disabled{cursor:not-allowed}.bds-text-field__actions{padding-left:var(--boreal-spacing-xs);gap:var(--boreal-spacing-3xs)}.bds-text-field__action{-ms-flex-pack:center;justify-content:center;background:none;border:none;padding:var(--boreal-spacing-3xs);cursor:pointer;color:var(--boreal-icon-default-light);line-height:1;-webkit-transition:color 0.3s ease, opacity 0.3s ease;transition:color 0.3s ease, opacity 0.3s ease}.bds-text-field__action--clear em[class^=bds-icon-],.bds-text-field__action--clear em[class*=" bds-icon-"]{width:var(--boreal-icons-s);height:var(--boreal-icons-s);font-size:var(--boreal-typography-font-size-xs);line-height:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-text-field__action--password em[class^=bds-icon-],.bds-text-field__action--password em[class*=" bds-icon-"]{width:var(--boreal-icons-l);height:var(--boreal-icons-l);font-size:var(--boreal-typography-font-size-lg);line-height:1;-ms-flex-negative:0;flex-shrink:0;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-text-field__action:hover{color:var(--boreal-icon-default-dark)}.bds-text-field__action:focus-visible{-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-text-field__footer{-ms-flex-pack:justify;justify-content:space-between}.bds-text-field__char-count{-ms-flex-negative:0;flex-shrink:0;font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-xs);color:var(--boreal-text-default-light)}.bds-text-field--focused .bds-text-field__container{border-color:var(--boreal-stroke-focus);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-text-field--error .bds-text-field__container{border-color:var(--boreal-stroke-danger-base)}.bds-text-field--disabled{cursor:not-allowed}.bds-text-field--disabled .bds-text-field__container{background-color:var(--boreal-ui-default-lighter);border-color:var(--boreal-stroke-default-light)}.bds-text-field--disabled .bds-text-field__sublabel{color:var(--boreal-text-disabled)}.bds-text-field--disabled .bds-text-field__sublabel em[class^=bds-icon-],.bds-text-field--disabled .bds-text-field__sublabel em[class*=" bds-icon-"]{color:var(--boreal-icon-disabled)}.bds-text-field--disabled .bds-text-field__control{color:var(--boreal-icon-disabled)}.bds-text-field--readonly .bds-text-field__container{background-color:transparent;border:none}.bds-text-field--readonly .bds-text-field__control::-webkit-input-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control::-moz-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control:-ms-input-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control::-ms-input-placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--readonly .bds-text-field__control::placeholder{color:var(--boreal-text-default-darker)}.bds-text-field--plain .bds-text-field__container{border-color:transparent}.bds-text-field--plain.bds-text-field--focused .bds-text-field__container{border-color:var(--boreal-stroke-focus)}.bds-text-field--clear-on-hover .bds-text-field__action--clear{opacity:0;pointer-events:none}.bds-text-field--clear-on-hover:hover .bds-text-field__action--clear{opacity:1;pointer-events:auto}`;
+
+const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.bdsInput = index.createEvent(this, "bdsInput");
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        this.bdsFocus = index.createEvent(this, "bdsFocus");
+        this.bdsBlur = index.createEvent(this, "bdsBlur");
+        this.bdsClear = index.createEvent(this, "bdsClear");
+        this.bdsValidationChange = index.createEvent(this, "bdsValidationChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /** The name submitted with the form. */
+        this.name = '';
+        /** Disables the input. Also toggled by `formDisabledCallback` via the mixin. */
+        this.disabled = false;
+        /** Marks the input as required for form validation. */
+        this.required = false;
+        /** Mirrors `disabled` and the FACE `formDisabledCallback` result. Drives all disabled UI. */
+        this.isDisabled = false;
+        /** The current value of the input. */
+        this.value = '';
+        /** When `true`, applies the error visual state. */
+        this.error = false;
+        /** Message shown below the input when `error` is `true`. Replaces `helperText`. */
+        this.errorMessage = '';
+        /** Additional validators merged with the built-in ones. */
+        this.customValidators = [];
+        /** Controls when built-in validation runs: `'blur'` | `'input'` | `'submit'` | `'change'`. */
+        this.validationTiming = TEXT_FIELD_VALIDATION_TIMING.BLUR;
+        /** The input type. Use `'password'` to enable the visibility toggle. */
+        this.type = TEXT_FIELD_TYPES.TEXT;
+        /** Visual style of the input container. `'outline'` shows a border; `'plain'` hides it at rest. */
+        this.variant = TEXT_FIELD_VARIANTS.OUTLINE;
+        /** Native `placeholder` attribute forwarded to the inner `<input>`. */
+        this.placeholder = '';
+        /** Makes the input read-only. The value is still submitted with the form. */
+        this.readOnly = false;
+        /** Native `autocomplete` attribute forwarded to the inner `<input>`. */
+        this.autocomplete = 'off';
+        /** Regex the value must match to pass `patternMismatch` validation. Also forwarded as the native `pattern` attribute to the inner `<input>`. Empty string disables pattern validation. */
+        this.pattern = '';
+        /** Minimum character count. `0` means no minimum. */
+        this.minLength = 0;
+        /** Maximum character count. `0` means no maximum. */
+        this.maxLength = 0;
+        /** Label text rendered above the input. */
+        this.label = '';
+        /** Sublabel rendered inside the input container, before the text area. */
+        this.sublabel = '';
+        /** Icon font class rendered beside the sublabel inside the container (e.g. `bds-icon-settings`). */
+        this.icon = '';
+        /** Helper text shown below the input when there is no error. */
+        this.helperText = '';
+        /** Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop. */
+        this.info = '';
+        /** Shows a clear button when the input has a value. */
+        this.clearable = false;
+        /** Shows a clear button that is hidden at rest and revealed when the user hovers over the field. */
+        this.clearOnHover = false;
+        /** Maximum character count shown in the footer counter (e.g. `120` → `"45/120"`). Requires `counter`. */
+        this.charCount = 0;
+        /** Enables the character counter in the footer. Requires `charCount` to be set. */
+        this.counter = false;
+        /** Sets a custom width via the `--bds-text-field-width` CSS custom property. */
+        this.customWidth = '';
+        /** Tracks focus state to drive the `bds-text-field--focused` CSS modifier. */
+        this.focused = false;
+        /** Controls whether the password input renders as plain text. */
+        this.showPassword = false;
+        /** `true` after the user has blurred the input at least once. */
+        this.touched = false;
+        /** `true` once the value has been modified by the user. */
+        this.dirty = false;
+        /** Live character count of the current value. */
+        this.currentCharCount = 0;
+        /** `true` when the last triggered validation run returned invalid. Drives the error visual state. */
+        this.validationError = false;
+        /** Error message from the last failed validator. Shown in the footer when `validationError` is `true`. */
+        this.validationMessage = '';
+        this._valueAtFocus = '';
+        this._id = createId('bds-text-field');
+        this.invalidHandler = (e) => {
+            e.preventDefault();
+            this.validationError = true;
+            this.validationMessage = this.internals.validationMessage;
+            this.bdsValidationChange.emit({
+                valid: false,
+                validity: this.internals.validity,
+                value: this.value,
+                touched: this.touched,
+                dirty: this.dirty,
+            });
+        };
+    }
+    /**
+     * Returns `true` if the element's value passes all constraints; `false` otherwise.
+     * Also fires an `invalid` event if constraints are violated.
+     */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /**
+     * Returns `true` if the element's value passes all constraints; `false` otherwise.
+     * Shows the browser's native validation UI when constraints are violated.
+     */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(TEXT_FIELD_TYPES), TEXT_FIELD_TYPES.TEXT, this.el, 'type');
+        validateProps.validatePropValue(Object.values(TEXT_FIELD_VARIANTS), TEXT_FIELD_VARIANTS.OUTLINE, this.el, 'variant');
+        validateProps.validatePropValue(Object.values(TEXT_FIELD_VALIDATION_TIMING), TEXT_FIELD_VALIDATION_TIMING.BLUR, this.el, 'validationTiming');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.isDisabled = this.disabled;
+        this.currentCharCount = this.value.length;
+    }
+    componentDidLoad() {
+        this.el.addEventListener('invalid', this.invalidHandler);
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('invalid', this.invalidHandler);
+    }
+    onCustomValidatorsChange() {
+        this.updateValidity();
+    }
+    onValueChange(next) {
+        internals.setFormValue(this.internals, next);
+        this.currentCharCount = next.length;
+        this.updateValidity();
+        this.valueChange.emit(next);
+    }
+    formAssociatedCallback() {
+        internals.setFormValue(this.internals, this.value);
+        this.updateValidity();
+    }
+    formResetCallback() {
+        this.value = '';
+        this.touched = false;
+        this.dirty = false;
+        this.currentCharCount = 0;
+        this.validationError = false;
+        this.validationMessage = '';
+        internals.setFormValue(this.internals, null);
+        this.updateValidity();
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.value = typeof state === 'string' ? state : '';
+        internals.setFormValue(this.internals, this.value);
+        this.updateValidity();
+    }
+    updateValidity(emitEvent = false) {
+        const valid = internals.runValidators(this.internals, [...this.validators, ...this.customValidators], this.el);
+        if (emitEvent) {
+            this.validationError = !valid;
+            this.validationMessage = valid ? '' : this.internals.validationMessage;
+            this.bdsValidationChange.emit({
+                valid,
+                validity: this.internals.validity,
+                value: this.value,
+                touched: this.touched,
+                dirty: this.dirty,
+            });
+        }
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+        this.dirty = true;
+        this.bdsInput.emit({ value: this.value, event: e });
+        if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.INPUT) {
+            this.updateValidity(true);
+        }
+    }
+    handleChange(e) {
+        this.bdsChange.emit({ value: this.value, event: e });
+        if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.CHANGE) {
+            this.updateValidity(true);
+        }
+    }
+    handleFocus(e) {
+        this.focused = true;
+        this._valueAtFocus = this.value;
+        this.bdsFocus.emit({ event: e });
+    }
+    handleBlur(e) {
+        this.focused = false;
+        this.touched = true;
+        this.bdsBlur.emit({ event: e });
+        if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.BLUR) {
+            this.updateValidity(true);
+        }
+        else if (this.validationTiming === TEXT_FIELD_VALIDATION_TIMING.CHANGE && this.value !== this._valueAtFocus) {
+            this.updateValidity(true);
+        }
+    }
+    handleShowPassword() {
+        this.showPassword = !this.showPassword;
+    }
+    handleClear() {
+        this.value = '';
+        this.dirty = true;
+        this.validationError = false;
+        this.validationMessage = '';
+        this.bdsClear.emit();
+        this.el.querySelector('input')?.focus();
+    }
+    handleMouseDown(e) {
+        if (this.readOnly) {
+            e.preventDefault();
+        }
+    }
+    get validators() {
+        return [
+            {
+                key: 'valueMissing',
+                isValid: () => !this.required || this.value !== '',
+                message: 'This field is required. Please fill it out.',
+            },
+            {
+                key: 'tooShort',
+                isValid: () => this.minLength === 0 || this.value.length >= this.minLength,
+                message: `Please enter at least ${this.minLength} characters.`,
+            },
+            {
+                key: 'patternMismatch',
+                isValid: () => {
+                    if (this.pattern === '' || this.value === '')
+                        return true;
+                    try {
+                        return new RegExp(this.pattern).test(this.value);
+                    }
+                    catch {
+                        return true;
+                    }
+                },
+                message: 'Please match the requested format.',
+            },
+        ];
+    }
+    get effectiveMaxLength() {
+        if (this.maxLength !== 0)
+            return this.maxLength;
+        if (this.counter && this.charCount > 0)
+            return this.charCount;
+        return undefined;
+    }
+    get classMap() {
+        return {
+            'bds-text-field': true,
+            'bds-text-field--error': this.error || this.validationError,
+            'bds-text-field--disabled': this.isDisabled,
+            'bds-text-field--focused': this.focused,
+            'bds-text-field--readonly': this.readOnly,
+            'bds-text-field--plain': this.variant === TEXT_FIELD_VARIANTS.PLAIN,
+            'bds-text-field--clear-on-hover': this.clearOnHover,
+        };
+    }
+    get hostStyle() {
+        return this.customWidth !== '' ? { '--bds-text-field-width': this.customWidth } : undefined;
+    }
+    get iconClear() {
+        return this.clearable || this.clearOnHover ? ICONS.Close : '';
+    }
+    get showPasswordIcon() {
+        return this.showPassword ? ICONS.SightOn : ICONS.SightOff;
+    }
+    render() {
+        const labelId = `${this._id}-label`;
+        const helperId = `${this._id}-helper`;
+        const showClear = (this.clearable || this.clearOnHover) && this.value !== '' && !this.isDisabled && !this.readOnly;
+        const effectiveError = this.error || this.validationError;
+        const helperContent = this.error && this.errorMessage !== ''
+            ? this.errorMessage
+            : this.validationError && this.validationMessage !== ''
+                ? this.validationMessage
+                : this.helperText;
+        const showFooter = helperContent !== '' || (this.counter && this.charCount > 0);
+        const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
+        return (index.h(index.Host, { key: '8fcf734b92dfa2ad75a32bef27efea78bd61dd63', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (index.h("bds-typography", { key: 'd50b6407278dd93b52fbbdbbc5e999a1185d4649', id: labelId, variant: "label", htmlFor: this._id, isRequired: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), index.h("div", { key: '89dc5c7830197786e7dc67b87f64a0b63c8a8c84', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (index.h("span", { key: 'a4139e0ce3b3d37bb33d55b5811e439974ed9d53', class: "bds-text-field__sublabel" }, this.icon !== '' && index.h("em", { key: '5fc8f5a49b348fe07c63242243274946e21aa782', class: this.icon }), this.sublabel)), index.h("slot", { key: 'a8f62dba555a26aba3b1105402f0afca1378c83a', name: "prefix" }), index.h("input", { key: 'ba2161c8d56c42847c7006d1742a2b60613f4628', id: this._id, class: "bds-text-field__control", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": showFooter && helperContent !== '' ? helperId : undefined, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, type: this.type === TEXT_FIELD_TYPES.PASSWORD && this.showPassword ? TEXT_FIELD_TYPES.TEXT : this.type, value: this.value, disabled: this.isDisabled, readOnly: this.readOnly, tabIndex: this.readOnly ? -1 : undefined, placeholder: this.placeholder, autocomplete: this.autocomplete, pattern: this.pattern !== '' ? this.pattern : undefined, minLength: this.minLength !== 0 ? this.minLength : undefined, maxLength: this.effectiveMaxLength, onMouseDown: (e) => this.handleMouseDown(e), onInput: (e) => this.handleInput(e), onChange: (e) => this.handleChange(e), onFocus: (e) => this.handleFocus(e), onBlur: (e) => this.handleBlur(e) }), (showClear || this.type === TEXT_FIELD_TYPES.PASSWORD) && (index.h("div", { key: 'c9ae74b2be87e2759d60ad69c9c91b95bc199163', class: "bds-text-field__actions" }, showClear && (index.h("button", { key: 'd94534386505f9c54aabe892aec58d81b6a0ea94', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, index.h("em", { key: '7899ffad5be71b731ae8ead1d5601e3fc6b5f6a5', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (index.h("button", { key: '612aff7de193d9f61b955e686484c13baca3ff57', class: "bds-text-field__action bds-text-field__action--password", type: "button", "aria-label": this.showPassword ? ARIA_LABELS.HidePassword : ARIA_LABELS.ShowPassword, onClick: () => this.handleShowPassword() }, index.h("em", { key: 'e886085b840a351a7455a1adb685996835e47118', class: this.showPasswordIcon })))))), showFooter && (index.h("div", { key: '9b47bbaff802d0c4125e45c87f1e7366418dfdcc', class: "bds-text-field__footer" }, helperContent !== '' && (index.h("bds-typography", { key: '64265da85a16152af33b3f94c05e4d8562dc26df', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (index.h("span", { key: '2a264545ba46b8d6908adabe729a1256334535ef', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": [{
+                "onDisabledChange": 0
+            }],
+        "type": [{
+                "checkPropValues": 0
+            }],
+        "variant": [{
+                "checkPropValues": 0
+            }],
+        "validationTiming": [{
+                "checkPropValues": 0
+            }],
+        "customValidators": [{
+                "onCustomValidatorsChange": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+BdsTextField.style = bdsTextFieldCss();
+
+exports.bds_text_field = BdsTextField;

package/dist/cjs/bds-tooltip.cjs.entry.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var index = require('./index-BcSjvXJk.js');
+var anchored_mixin = require('./anchored.mixin-CnIwkaUi.js');
+require('./floating.mixin-Bje4320w.js');
+
+const bdsTooltipCss = () => `@charset "UTF-8";:root{--tooltip-arrow-size:var(--boreal-spacing-s);--tooltip-width:320px}.tooltip-content{position:fixed;margin:0;border:0;overflow:visible;border-radius:var(--boreal-radius-xs2);background:var(--boreal-ui-black);color:var(--boreal-text-inverse);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs);font-family:var(--boreal-typography-font-family-primary);border:var(--boreal-spacing-2xs) solid var(--boreal-ui-black);font-weight:var(--boreal-typography-font-weight-regular)}.tooltip-content--multiline{white-space:normal;max-width:var(--tooltip-width, 320px);word-break:break-word;text-align:center}.tooltip-arrow{position:absolute;width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);pointer-events:none;z-index:-1}.tooltip-arrow::before{content:"";position:absolute;width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);background:var(--boreal-ui-black);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.tooltip-content[data-placement^=top] .tooltip-arrow{bottom:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=top] .tooltip-arrow::before{top:0}.tooltip-content[data-placement^=bottom] .tooltip-arrow{top:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=bottom] .tooltip-arrow::before{top:0}.tooltip-content[data-placement^=left] .tooltip-arrow{right:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=left] .tooltip-arrow::before{left:0}.tooltip-content[data-placement^=right] .tooltip-arrow{left:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=right] .tooltip-arrow::before{left:0}`;
+
+const BdsTooltip = class extends index.Mixin(anchored_mixin.anchoredMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        /**
+         * If true, allows multiline content in the tooltip.
+         * @default false
+         */
+        this.multiline = false;
+        /**
+         * If true, disables the tooltip.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Override default options for the floating mixin.
+         * This can be overridden by passing a different object to the `floatingOptions` prop.
+         */
+        this.floatingOptions = {};
+        this.isVisible = false;
+    }
+    /**
+     * Returns the resolved options for the floating mixin, merging `floatingOptions`
+     * prop values with their defaults.
+     *
+     * @returns {FloatingMixinOptions} Resolved configuration used by the anchored mixin
+     * to position the tooltip.
+     * @override anchoredMixin.options
+     *
+     * @example
+     * // floatingOptions = { placement: 'top', hideArrow: true }
+     * this.options
+     * return { placement: 'top', offset: 8, arrow: undefined, strategy: 'fixed' }
+     */
+    get options() {
+        return {
+            placement: this.floatingOptions.placement ?? 'bottom',
+            offset: this.floatingOptions.offset ?? 8,
+            arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
+            strategy: 'fixed',
+        };
+    }
+    /**
+     * Returns the lifecycle hooks consumed by the anchored mixin to control
+     * tooltip visibility and positioning.
+     * @override anchoredMixin.hooks
+     *
+     * @returns {AnchoredHooks} Object containing the three hook callbacks:
+     * - `onPositionUpdate` — called after each positioning calculation.
+     * - `onBeforeShow` — called before the tooltip becomes visible; returning false cancels the show.
+     * - `onBeforeHide` — called before the tooltip is hidden; returning false cancels the hide.
+     */
+    get hooks() {
+        return {
+            onPositionUpdate: result => this.handlePosition(result),
+            onBeforeShow: () => this.validateShow(),
+            onBeforeHide: (el) => this.validateHide(el),
+            subscribeToTrigger: (el) => this.subscribe(el),
+        };
+    }
+    get canShowArrow() {
+        return !this.floatingOptions.hideArrow || false;
+    }
+    get getPlacement() {
+        return this.floatingOptions.placement || 'bottom';
+    }
+    /**
+     * Guard called by `onBeforeShow` to determine whether the tooltip is allowed to show.
+     *
+     * @returns {boolean} `true` if the tooltip is not disabled and may be shown; `false` otherwise.
+     */
+    validateShow() {
+        return !this.disabled;
+    }
+    /**
+     * Guard called by `onBeforeHide` to determine whether the tooltip is allowed to hide.
+     * When `stayOnHover` is enabled, hides are cancelled if the pointer is moving
+     * into the floating content element itself.
+     *
+     * @param target - The element the pointer is moving toward (relatedTarget of the mouseleave event).
+     * @returns {boolean} `true` if the tooltip should hide; `false` if the hide should be cancelled.
+     */
+    validateHide(target) {
+        if (this.floatingOptions.stayOnHover && target !== undefined && target.isConnected) {
+            const goingToFloating = this.floatingContent.contains(target) || this.floatingContent === target;
+            if (goingToFloating)
+                return false;
+        }
+        return true;
+    }
+    /**
+     * Callback for `onPositionUpdate`. Applies the resolved placement as a
+     * `data-placement` attribute on the floating content element and delegates
+     * arrow positioning to `setArrowPosition`.
+     *
+     * @param result - The positioning result produced by the floating middleware.
+     */
+    handlePosition(result) {
+        this.floatingContent.setAttribute('data-placement', result.placement);
+        this.setArrowPosition(result);
+    }
+    /**
+     * Applies the arrow element's `x` and `y` coordinates calculated by the
+     * floating middleware. Skips the update when the arrow element is not
+     * connected to the DOM or when middleware data is absent.
+     *
+     * @param result - The positioning result that may contain `middlewareData.arrow`
+     * with the computed `x` and `y` offsets for the arrow element.
+     */
+    setArrowPosition(result) {
+        if (result.middlewareData?.arrow && !this.disabled && this.arrowElement?.isConnected) {
+            const { x: arrowX, y: arrowY } = result.middlewareData.arrow;
+            Object.assign(this.arrowElement.style, {
+                left: arrowX != null ? `${arrowX}px` : '',
+                top: arrowY != null ? `${arrowY}px` : '',
+            });
+        }
+    }
+    get hasMultiline() {
+        return this.multiline !== undefined && this.multiline;
+    }
+    get tooltipStyles() {
+        return {
+            'tooltip-content': true,
+            'tooltip-content--multiline': this.hasMultiline,
+        };
+    }
+    subscribe(trigger) {
+        if (trigger === undefined)
+            return;
+        trigger.setAttribute('part', 'tooltip-trigger');
+        trigger.setAttribute('ariaDescribedBy', 'tooltip-content');
+        trigger.addEventListener('mouseenter', () => this.show());
+        trigger.addEventListener('mouseleave', (e) => this.hide(e.target));
+    }
+    render() {
+        const classes = this.tooltipStyles;
+        return (index.h(index.Host, { key: '65758ffb473363eadce15b09704224a95304dbf2', class: "tooltip" }, index.h("div", { key: 'd488e67b2da3c788ccf8eb9b9eeb273b9d1c58be', id: "tooltip-content", part: "tooltip-content", class: classes, popover: "manual", role: "tooltip", "aria-hidden": this.isVisible ? 'false' : 'true', "data-placement": this.getPlacement, "data-multiline": this.multiline, "data-hidearrow": this.canShowArrow, ref: el => (this.floatingContent = el) }, this.canShowArrow && (index.h("div", { key: 'de86ff5432b49a2e31d94c6c8e16f33327ef5baa', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '8428151ba6b9b835f721be33cc61b1bacdba7494' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+BdsTooltip.style = bdsTooltipCss();
+
+exports.bds_tooltip = BdsTooltip;

package/dist/cjs/bds-typography.cjs.entry.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-Cdb66Tqj.js');
-var attributes = require('./attributes-RPVEtBdj.js');
+var index = require('./index-BcSjvXJk.js');
+var states = require('./states-iIYiazaM.js');
+var attributes = require('./attributes-wIHueigW.js');
 
 const ALIGNMENT = {
     START: 'start'};
@@ -30,17 +31,17 @@ const FILENAME = 'download';
  */
 const VARIANT_CONFIG = {
     link: {
-        states: [attributes.STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
+        states: [states.COMPONENT_STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
         size: [SIZES.S, SIZES.M],
     },
     label: {
-        states: [attributes.STATES.DISABLED],
+        states: [states.COMPONENT_STATES.DISABLED],
         isRequired: true,
         canUseTooltip: true,
     },
     heading: { canUseTooltip: true },
     subheading: { canUseTooltip: true },
-    helper: { states: [attributes.STATES.ERROR] },
+    helper: { states: [states.COMPONENT_STATES.ERROR] },
     display: { size: [SIZES.XS, SIZES.S, SIZES.M, SIZES.L, SIZES.XL] },
 };
 /*
@@ -49,7 +50,7 @@ const VARIANT_CONFIG = {
 const getAttributesByTag = (comp, tagName) => {
     const ATTR_MAP = {
         a: {
-            href: comp.state !== attributes.STATES.DISABLED ? comp.sanitizedHref : null,
+            href: comp.state !== states.COMPONENT_STATES.DISABLED ? comp.sanitizedHref : null,
             target: comp.target,
             download: comp.isDownloadable ? comp.filename : null,
             rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,
@@ -61,7 +62,7 @@ const getAttributesByTag = (comp, tagName) => {
     return ATTR_MAP[tagName] || {};
 };
 
-const bdsTypographyCss = () => `.bds-typography{-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}`;
+const bdsTypographyCss = () => `@charset "UTF-8";.bds-typography{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__required-indicator{color:var(--boreal-icon-danger-base);font-weight:var(--boreal-typography-font-weight-regular)}.bds-typography__info-icon{color:var(--boreal-icon-default-light)}.bds-typography--heading,.bds-typography--subheading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--label{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-3xs)}.bds-typography--display{display:block}.bds-typography--caption,.bds-typography--helper,.bds-typography--link{display:inline-block}.bds-typography--caption{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-light)}.bds-typography--helper{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default-light)}.bds-typography--link{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-primary-base);text-decoration:none}.bds-typography--link:hover{text-decoration:underline}.bds-typography--link:visited{color:var(--boreal-text-primary-base)}.bds-typography--link:active{color:var(--boreal-text-primary-dark)}.bds-typography--link.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xs)}.bds-typography--link.bds-typography--size-md{font-size:var(--boreal-typography-font-size-sm)}.bds-typography--code{font-family:var(--boreal-typography-font-family-secondary);font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default);line-height:var(--boreal-typography-line-height-md);overflow-wrap:break-word;background-color:var(--boreal-bg-neutral);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);border-radius:var(--boreal-radius-xs);display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.bds-typography--label{font-size:var(--boreal-typography-font-size-xs);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-text-default-darker)}.bds-typography--display{font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography--display.bds-typography--size-sm{font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography--display.bds-typography--size-md{font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography--display.bds-typography--size-lg{font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--display.bds-typography--size-xl{font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl);font-weight:var(--boreal-typography-font-weight-light)}.bds-typography--heading{font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg);font-weight:var(--boreal-typography-font-weight-regular);color:var(--boreal-text-default)}.bds-typography h1.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-4xl);line-height:var(--boreal-typography-line-height-4xl)}.bds-typography h2.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-3xl);line-height:var(--boreal-typography-line-height-3xl)}.bds-typography h3.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-2xl);line-height:var(--boreal-typography-line-height-2xl)}.bds-typography h4.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-xl);line-height:var(--boreal-typography-line-height-xl)}.bds-typography h5.bds-typography--heading{font-weight:var(--boreal-typography-font-weight-regular);font-size:var(--boreal-typography-font-size-lg);line-height:var(--boreal-typography-line-height-lg)}.bds-typography h6.bds-typography--heading{font-size:var(--boreal-typography-font-size-md);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-md)}.bds-typography--subheading{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);font-weight:var(--boreal-typography-font-weight-semibold)}.bds-typography--align-start{text-align:start}.bds-typography--align-center{text-align:center}.bds-typography--align-end{text-align:end}.bds-typography--align-inherit{text-align:inherit}.bds-typography--error{color:var(--boreal-text-danger-base)}.bds-typography--disabled{color:var(--boreal-text-disabled);pointer-events:none;cursor:not-allowed}.bds-typography--disabled .bds-typography__required-indicator{color:var(--boreal-text-danger-light)}.bds-typography--ellipsis{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.bds-typography--ellipsis-multiline{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;width:100%}`;
 
 const BdsTypography = class {
     constructor(hostRef) {
@@ -72,7 +73,7 @@ const BdsTypography = class {
         /** Typography size token. */
         this.size = SIZES.M;
         /** Visual state (if supported by variant). */
-        this.state = attributes.STATES.DEFAULT;
+        this.state = states.COMPONENT_STATES.DEFAULT;
         /** Additional custom CSS class. */
         this.customClass = '';
         /** HTML tag used for rendering. */
@@ -128,7 +129,7 @@ const BdsTypography = class {
         const isInteractiveTag = ['a', 'label'].includes(this.getTagName);
         return {
             'aria-required': this.isRequired && isRequired,
-            'aria-disabled': this.state === attributes.STATES.DISABLED && isInteractiveTag,
+            'aria-disabled': this.state === states.COMPONENT_STATES.DISABLED && isInteractiveTag,
         };
     }
     getVariantStateStyles() {
@@ -153,7 +154,7 @@ const BdsTypography = class {
         };
         const classes = this.getVariantStateStyles();
         const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
-        return (index.h(index.Host, { key: 'e816237127a0bec2f223c3c11c405830b3bc530f', class: "bds-typography" }, index.h(TagName, { key: '5428ad8d55990feae5190e19c6372445f76d504b', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: '5f5b95afd7799c988607174d45dfdffe018438a8' }), this.isRequired && isRequired && (index.h("em", { key: '5d57fc3a0aed14887df9fb03f2b279204e99861c', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && index.h("em", { key: '9b89f3e48de66ebcd27755d9ec19ef261b73250e', class: "bds-typography__info-icon bds-icon-info-circle" }))));
+        return (index.h(index.Host, { key: '98e236475142f2be85fcc227cd507d6cb8648928', class: "bds-typography" }, index.h(TagName, { key: 'eed74e216dc0832b5f4808ba72e1374198f60e1a', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: 'cc073f2d2a3840970c62296379514884564c3473' }), this.isRequired && isRequired && (index.h("em", { key: '299a88d69856603b6e73af9567fa91b1a1e7434f', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (index.h("span", { key: 'c8fa478a8fbd4a70d0869b4c9d523a8a0e9803bf' }, index.h("em", { key: '0f6869a6dd7ab04b19acee773e54687dbd070af0', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }), index.h("bds-tooltip", { key: 'ec2dfc33b119bc3f60ec52e8bd10fdb16ea5cc2a' }, this.tooltipText))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {