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

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

@@ -1,8 +1,10 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
-var internals = require('./internals-X77qKxsK.js');
-var validateProps = require('./validateProps-BNOBk1Xs.js');
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var internals = require('./internals-D8x7GMfR.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
 
 /**
  * Centralized list of `aria-label` values used by interactive elements.
@@ -26,17 +28,6 @@ const ICONS = {
     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',
@@ -54,7 +45,7 @@ const TEXT_FIELD_VALIDATION_TIMING = {
 
 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) {
+const BdsTextField = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -141,7 +132,7 @@ const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
         /** 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._id = BaseAttributes.createId('bds-text-field');
         this.invalidHandler = (e) => {
             e.preventDefault();
             this.validationError = true;
@@ -343,7 +334,7 @@ const BdsTextField = class extends index.Mixin(internals.formAssociatedMixin) {
                 : 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))))));
+        return (index.h(index.Host, { key: '5f52a0a9553efa1ec140b9edc4d3d332b9b306bc', class: this.classMap, style: this.hostStyle, tabIndex: -1, onFocus: () => !this.readOnly && this.el.querySelector('input')?.focus() }, this.label !== '' && (index.h("bds-typography", { key: 'eea2b4211cb13cc24baa650239ceca1168933eb5', id: labelId, variant: "label", htmlFor: this._id, required: this.required, tooltipText: this.info !== '' ? this.info : undefined, state: typographyState }, this.label)), index.h("div", { key: '17d9e4b5f7e0d64a7e6e73200073db9e2d89b601', class: "bds-text-field__container" }, (this.icon !== '' || this.sublabel !== '') && (index.h("span", { key: '5557471fd0b5b49a1bb856ea4c1b901ca96039e6', class: "bds-text-field__sublabel" }, this.icon !== '' && index.h("em", { key: 'e213979d268b2fce51a0a090b82dff0552515a8c', class: this.icon }), this.sublabel)), index.h("slot", { key: '828b889037a40e562bf45a4b502988542b815701', name: "prefix" }), index.h("input", { key: 'b842de768f53b095b65fc60da7a0cfabfbcc87d1', 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: '19ffb36c88f72645969fed69eb8368647ea8071c', class: "bds-text-field__actions" }, showClear && (index.h("button", { key: '1adbe2d791fa48cbc6d0b9d71bda40f01f77efe4', class: "bds-text-field__action bds-text-field__action--clear", type: "button", "aria-label": ARIA_LABELS.Clear, onClick: () => this.handleClear() }, index.h("em", { key: '72e94a903896a8f0d04569ffb4b692c5fe37c621', class: this.iconClear }))), this.type === TEXT_FIELD_TYPES.PASSWORD && (index.h("button", { key: '795a85ad395254a8dbac151eb225aeb0d0d9266a', 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: 'e84632218e25422ce5ba64ad6efc40a94310a0c5', class: this.showPasswordIcon })))))), showFooter && (index.h("div", { key: 'ef98f783b7cd1ccf37d04a209d1bcf4b87ca048a', class: "bds-text-field__footer" }, helperContent !== '' && (index.h("bds-typography", { key: 'c560b15810400be0710368c089294a6ee51746b1', id: helperId, variant: "helper", state: typographyState }, helperContent)), this.counter && this.charCount > 0 && (index.h("span", { key: 'e4f7d33f2e3bf588f30ccb7165a9b385d8f5a8e3', class: "bds-text-field__char-count" }, this.currentCharCount, "/", this.charCount))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -0,0 +1,187 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
+var attributes = require('./attributes-CgRFplrN.js');
+var internals = require('./internals-D8x7GMfR.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+
+const TOGGLE_PLACEMENT = {
+    LEFT: 'left',
+    RIGHT: 'right',
+};
+
+const bdsToggleCss = () => `@charset "UTF-8";.bds-toggle{font-family:var(--boreal-typography-font-family-primary);display:inline-block}.bds-toggle__container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs);outline:none;width:-webkit-max-content;width:-moz-max-content;width:max-content}.bds-toggle__container:focus{outline:none}.bds-toggle__container--inverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.bds-toggle:active,.bds-toggle:focus-visible{outline:none}.bds-toggle:active .bds-toggle__input:not([disabled])+.bds-toggle__slider,.bds-toggle:focus-visible .bds-toggle__input:not([disabled])+.bds-toggle__slider{-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-toggle .bds-toggle__input:active:not([disabled])+.bds-toggle__slider,.bds-toggle .bds-toggle__input:focus-visible:not([disabled])+.bds-toggle__slider{-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-toggle:hover:not(:active):not([checked]):not([disabled]) .bds-toggle__slider,.bds-toggle:hover:not(:active):focus-within:not([checked]) .bds-toggle__slider{-webkit-box-shadow:0 1px 2px 0 var(--boreal-stroke-default-light);box-shadow:0 1px 2px 0 var(--boreal-stroke-default-light)}.bds-toggle__switch{position:relative;display:inline-block;width:var(--boreal-spacing-3xl);height:var(--boreal-spacing-l)}.bds-toggle__input{opacity:0;width:0;height:0}.bds-toggle__input:not(:checked)+.bds-toggle__slider{border:1px solid var(--boreal-stroke-default-light)}.bds-toggle__input:checked+.bds-toggle__slider{background-color:var(--boreal-ui-primary-base)}.bds-toggle__input:checked+.bds-toggle__slider::before{-webkit-transform:translateX(var(--boreal-spacing-l));-ms-transform:translateX(var(--boreal-spacing-l));transform:translateX(var(--boreal-spacing-l))}.bds-toggle__input:disabled+.bds-toggle__slider{background-color:var(--boreal-ui-disabled);cursor:default}.bds-toggle__input:disabled+.bds-toggle__slider::before{background-color:var(--boreal-icon-default-light)}.bds-toggle__input:disabled:checked+.bds-toggle__slider{background-color:var(--boreal-ui-primary-light)}.bds-toggle__input:disabled:checked+.bds-toggle__slider::before{background-color:var(--boreal-icon-inverse)}.bds-toggle__slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--boreal-ui-base-light);-webkit-transition:all 0.4s, border-color 0s;transition:all 0.4s, border-color 0s}.bds-toggle__slider::before{position:absolute;content:"";height:var(--boreal-typography-font-size-md);width:var(--boreal-typography-font-size-md);left:var(--boreal-spacing-2xs);background-color:var(--boreal-text-inverse);bottom:0;top:0;margin:auto;-webkit-transition:0.3s;transition:0.3s}.bds-toggle__slider--round{border-radius:var(--boreal-radius-m)}.bds-toggle__slider--round::before{border-radius:var(--boreal-radius-full)}.bds-toggle__label{font-size:var(--boreal-typography-font-size-sm);color:var(--boreal-text-default)}.bds-toggle__helper-text{display:-ms-flexbox;display:flex;position:relative;color:var(--boreal-text-default-light);font-size:var(--boreal-typography-font-size-xs);margin-top:var(--boreal-spacing-2xs)}`;
+
+const BdsToggle = class extends index.Mixin(formAssociated_mixin.formAssociatedMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        this.inheritedAttributes = {};
+        /** Disables the control. Defaults to `false`. */
+        this.disabled = false;
+        /** Marks the control as required for form submission. Defaults to `false`. */
+        this.required = false;
+        /** Tooltip content attached to the label. Rendered via `bds-typography` `tooltipText` prop. */
+        this.info = '';
+        /** When `true`, applies the error visual state. */
+        this.error = false;
+        /** Message shown below the input when `error` is `true`. Replaces `helperText`. */
+        this.errorMessage = '';
+        // ---------------------------------------------------------------------------
+        // Props
+        // ---------------------------------------------------------------------------
+        /** Whether the toggle is on. Defaults to `false`. */
+        this.checked = false;
+        /**
+         * Position of the label relative to the switch.
+         * Accepts `TOGGLE_PLACEMENT` values. Defaults to `TOGGLE_PLACEMENT.LEFT`.
+         */
+        this.placement = TOGGLE_PLACEMENT.LEFT;
+        /** Label displayed next to the toggle. Defaults to `""`. */
+        this.label = '';
+        /** Help text displayed below the toggle. Defaults to `""`. */
+        this.helperText = '';
+        /**
+         * Value submitted with the form data when checked.
+         * Behaves like the `value` attribute of a native `<input type="checkbox">`. Defaults to `"on"`.
+         */
+        this.value = 'on';
+        this._id = BaseAttributes.createId('bds-toggle');
+        // ---------------------------------------------------------------------------
+        // State
+        // ---------------------------------------------------------------------------
+        /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+        this.isDisabled = false;
+        /** `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 = '';
+        /** Local mirror of the `checked` prop, kept in sync via `@Watch` and `formStateRestoreCallback`. */
+        this.isChecked = false;
+        this.handleClick = () => this.toggle();
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        this.handleInvalid = (e) => {
+            e.preventDefault();
+            this.validate();
+        };
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.isChecked = this.checked || false;
+        this.isDisabled = this.disabled || false;
+        this.inheritedAttributes = { ...attributes.inheritAriaAttributes(this.el) };
+        this.syncFormValue();
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    onCheckedChange(newValue) {
+        this.isChecked = newValue;
+        this.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks
+    // ---------------------------------------------------------------------------
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+    }
+    formResetCallback() {
+        this.isChecked = false;
+        this.internals.setValidity({});
+        internals.setFormValue(this.internals, null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.isChecked = state === this.value;
+        this.internals.setValidity({});
+        this.syncFormValue();
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    syncFormValue() {
+        internals.setFormValue(this.internals, this.isChecked ? this.value : null);
+    }
+    validate() {
+        if (!this.isDisabled && this.required && !this.isChecked) {
+            const input = this.el.querySelector('input');
+            this.validationError = true;
+            this.validationMessage = 'This field is required';
+            this.internals.setValidity({ valueMissing: true }, this.validationMessage, input ?? this.el);
+        }
+        else {
+            this.validationError = false;
+            this.validationMessage = '';
+            this.internals.setValidity({});
+        }
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.isChecked = !this.isChecked;
+        this.syncFormValue();
+        this.validate();
+        this.valueChange.emit(this.isChecked);
+        this.bdsChange.emit({ checked: this.isChecked, value: this.value });
+    }
+    get containerClasses() {
+        return {
+            [`bds-toggle__container`]: true,
+            [`bds-toggle__container--inverse`]: this.placement === TOGGLE_PLACEMENT.RIGHT,
+            [`bds-toggle__container--checked`]: this.isChecked,
+            [`bds-toggle__container--disabled`]: this.isDisabled,
+        };
+    }
+    get canShowLabel() {
+        return this.label !== undefined && this.label.trim() !== '' && this.label !== undefined && this.label !== null;
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    render() {
+        const blockClass = 'bds-toggle';
+        const effectiveError = this.error || this.validationError;
+        const typographyState = this.isDisabled ? 'disabled' : effectiveError ? 'error' : 'default';
+        const helperContent = this.error && this.errorMessage !== ''
+            ? this.errorMessage
+            : this.validationError && this.validationMessage !== ''
+                ? this.validationMessage
+                : this.helperText;
+        return (index.h(index.Host, { key: 'b5d27825358eaadb5cbca86e48488350e6099d8f', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, index.h("div", { key: '9b7bb4c4551beb61ed72c9ee4a4d7ee14e746c4e', part: "container", class: this.containerClasses }, this.canShowLabel && (index.h("bds-typography", { key: 'a95e1b66d8452b983002348b9456aa0c3674b202', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), index.h("label", { key: '954125135521cd6e65c2e6c3dfa41216e6f52dd3', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, index.h("input", { key: 'c3e0ee266aba0bd6e8ca7fb2d3efaeb412161806', class: `${blockClass}__input`, "aria-invalid": this.error || this.validationError ? 'true' : undefined, "aria-label": this.label || null, id: this._id, type: "checkbox", name: this.name, required: this.required, disabled: this.isDisabled, checked: this.isChecked, onInvalid: this.handleInvalid }), index.h("span", { key: '68912685234edb7c6ec972231c7f951531862f7c', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (index.h("bds-typography", { key: '3e5645d234edc1f3efe7805260def2c74bc7cd44', class: `${blockClass}__helper-text`, variant: "helper", state: typographyState, onClick: e => e.stopPropagation() }, helperContent))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": [{
+                "onCheckedChange": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+BdsToggle.style = bdsToggleCss();
+
+exports.bds_toggle = BdsToggle;

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

@@ -0,0 +1,321 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var getOffset = require('./getOffset-k4ezB-eT.js');
+var states = require('./states-BweP5Vpu.js');
+var attributes = require('./attributes-CgRFplrN.js');
+require('./Logger-DnziItRH.js');
+require('./floating.mixin-Bje4320w.js');
+require('./Keys-rKl2za5q.js');
+
+const ALIGNMENT = {
+    START: 'start'};
+
+const SIZES = {
+    XS: 'xs',
+    S: 'sm',
+    M: 'md',
+    L: 'lg',
+    XL: 'xl',
+};
+
+const OFFSET = 4;
+
+const bdsTooltipCss = () => `@charset "UTF-8";:root{--tooltip-arrow-size:var(--boreal-spacing-s);--tooltip-width:320px}.tooltip-content{position:fixed;margin: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);-webkit-transform-origin:center;transform-origin:center;inset:0}.tooltip-content[data-placement^=top] .tooltip-arrow{bottom:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=bottom] .tooltip-arrow{top:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=left] .tooltip-arrow{right:calc(var(--tooltip-arrow-size) / -2)}.tooltip-content[data-placement^=right] .tooltip-arrow{left:calc(var(--tooltip-arrow-size) / -2)}`;
+
+const BdsTooltip = class extends index.Mixin(getOffset.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 ?? 'top',
+            offset: getOffset.getOffset(this.floatingOptions?.hideArrow, this.floatingOptions.offset, OFFSET),
+            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 || 'top';
+    }
+    /**
+     * 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: 'add483ba4072484f1f6d18271ecb74c46a449f41', class: "tooltip" }, index.h("div", { key: 'ede2a5f6230a4baacb36c24dd57be73fda63e438', 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: 'c8580171bc2c01eaca84aa1a029dce6f429359f8', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '10ead9bb5007414959d4aeacd8c0c1c52223f70d' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+BdsTooltip.style = bdsTooltipCss();
+
+const VARIANT_TYPOGRAPHY = {
+    DISPLAY: 'display',
+    LINK: 'link'};
+const TAG_ELEMENT = {
+    P: 'p',
+    A: 'a'};
+
+/*
+ * LINK consts
+ */
+const FILENAME = 'download';
+/*
+ * Variant map to apply size, state, etc, styles based on variant type
+ */
+const VARIANT_CONFIG = {
+    link: {
+        states: [states.COMPONENT_STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
+        size: [SIZES.S, SIZES.M],
+    },
+    label: {
+        states: [states.COMPONENT_STATES.DISABLED],
+        required: true,
+        canUseTooltip: true,
+    },
+    heading: { canUseTooltip: true },
+    subheading: { canUseTooltip: true },
+    helper: { states: [states.COMPONENT_STATES.ERROR] },
+    display: { size: [SIZES.XS, SIZES.S, SIZES.M, SIZES.L, SIZES.XL] },
+};
+/*
+ * ATTRIBUTE MAP
+ */
+const getAttributesByTag = (comp, tagName) => {
+    const ATTR_MAP = {
+        a: {
+            href: comp.state !== states.COMPONENT_STATES.DISABLED ? comp.sanitizedHref : null,
+            target: comp.target,
+            download: comp.downloadable ? comp.filename : null,
+            rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,
+        },
+        label: {
+            htmlFor: comp.htmlFor,
+        },
+    };
+    return ATTR_MAP[tagName] || {};
+};
+
+const bdsTypographyCss = () => `@charset "UTF-8";.bds-typography__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}bds-typography.bds-typography--disabled-cursor{cursor:not-allowed}.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) {
+        index.registerInstance(this, hostRef);
+        this.inheritedAttributes = {};
+        /** Typography visual variant. */
+        this.variant = VARIANT_TYPOGRAPHY.DISPLAY;
+        /** Typography size token. */
+        this.size = SIZES.M;
+        /** Visual state (if supported by variant). */
+        this.state = states.COMPONENT_STATES.DEFAULT;
+        /** Additional custom CSS class. */
+        this.customClass = '';
+        /** HTML tag used for rendering. */
+        this.element = TAG_ELEMENT.P;
+        /** Text alignment. */
+        this.align = ALIGNMENT.START;
+        /** Enables text ellipsis. */
+        this.ellipsis = false;
+        /** Max lines when ellipsis is enabled. */
+        this.maxLines = 1;
+        /** Tooltip text (variant must support it). */
+        this.tooltipText = '';
+        /** Marks the field as required. */
+        this.required = false;
+        /** For attribute when rendered as a label. */
+        this.htmlFor = undefined;
+        /** Link href when rendered as anchor. */
+        this.href = null;
+        /** Anchor target. */
+        this.target = null;
+        /** Enables download behavior for anchor. */
+        this.downloadable = false;
+        /** Suggested download filename. */
+        this.filename = FILENAME;
+        /** Sanitized href for security. */
+        this.sanitizedHref = '';
+    }
+    async updateSanitizedHref() {
+        if (this.getTagName === 'a' && this.href !== null) {
+            const { sanitizeUrl } = await Promise.resolve().then(function () { return require('./index-CD9v53WJ.js'); }).then(function (n) { return n.index; });
+            this.sanitizedHref = sanitizeUrl(this.href);
+        }
+        else
+            this.sanitizedHref = '';
+    }
+    async componentWillLoad() {
+        if (this.getTagName === TAG_ELEMENT.A && this.href !== null)
+            await this.updateSanitizedHref();
+        this.inheritedAttributes = {
+            ...attributes.inheritAriaAttributes(this.el),
+        };
+    }
+    get getTagName() {
+        if (this.variant === VARIANT_TYPOGRAPHY.LINK)
+            return TAG_ELEMENT.A;
+        return this.element.toLowerCase();
+    }
+    getVariantConfig() {
+        return VARIANT_CONFIG[this.variant] ?? {};
+    }
+    getAccessibilityTags() {
+        const { required = false } = this.getVariantConfig();
+        const isInteractiveTag = ['a', 'label'].includes(this.getTagName);
+        return {
+            'aria-required': this.required && required,
+            'aria-disabled': this.state === states.COMPONENT_STATES.DISABLED && isInteractiveTag,
+        };
+    }
+    getVariantStateStyles() {
+        const config = this.getVariantConfig();
+        return {
+            [`bds-typography--${this.variant}`]: true,
+            [`bds-typography--align-${this.align}`]: true,
+            [`bds-typography--${this.state}`]: !!(config?.states && config?.states.includes(this.state)),
+            [`bds-typography--size-${this.size}`]: !!(config?.size && config?.size.includes(this.size)),
+            'bds-typography--required': !!(config?.required && this.required),
+            'bds-typography--ellipsis': this.ellipsis && this.maxLines <= 1,
+            'bds-typography--ellipsis-multiline': this.ellipsis && this.maxLines > 1,
+            [this.customClass]: this.customClass !== '',
+        };
+    }
+    render() {
+        const TagName = this.getTagName;
+        const attributes = {
+            ...getAttributesByTag(this, TagName),
+            ...this.inheritedAttributes,
+            ...this.getAccessibilityTags(),
+        };
+        const classes = this.getVariantStateStyles();
+        const { canUseTooltip = null, required = null } = this.getVariantConfig();
+        const isDisabledState = this.state === states.COMPONENT_STATES.DISABLED;
+        return (index.h(index.Host, { key: 'd29b535edeb7ede877c979ea812eb6c273affc0d', class: `bds-typography ${isDisabledState ? 'bds-typography--disabled-cursor' : ''}` }, index.h(TagName, { key: '3a36a1c47026a20d9c95e4c2d38e92caaa89b072', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: '8a0ccd7824ac358e937dd6e2fb1c3eb592e27721' }), this.required && required && (index.h("em", { key: '5ce4cc221efcf9d5a71bbc39dbc449a3a29c16a6', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (index.h("span", { key: '33dcca730b5a484aac8f6ddda383f7adb7dcee95', class: "bds-typography__info" }, index.h("span", { key: 'ff08b5e744d9584cff3b69f5eaa74238ad364e19', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }), index.h("bds-tooltip", { key: 'a88a158668a40ee3ff00ddeb4da496115e22558d' }, this.tooltipText))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "href": [{
+                "updateSanitizedHref": 0
+            }]
+    }; }
+};
+BdsTypography.style = bdsTypographyCss();
+
+exports.bds_tooltip = BdsTooltip;
+exports.bds_typography = BdsTypography;