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

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

@@ -0,0 +1,186 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var formAssociated_mixin = require('./form-associated.mixin-DXwvF_vW.js');
+var attributes = require('./attributes-wIHueigW.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({});
+        formAssociated_mixin.setFormValue(this.internals, null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.isChecked = state === this.value;
+        this.internals.setValidity({});
+        this.syncFormValue();
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    syncFormValue() {
+        formAssociated_mixin.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: '8aa5ec26708ce8eb834020353e2e01e882cefad6', ...this.inheritedAttributes, onClick: this.handleClick, onKeyDown: this.handleKeyDown, class: blockClass }, index.h("div", { key: 'a62ae102ba2167be5e03758c5bfc6197e8f3b73c', part: "container", class: this.containerClasses }, this.canShowLabel && (index.h("bds-typography", { key: 'c6129d113b083f9db5bad181f5a8cf1ae161b593', variant: "label", class: `${blockClass}__label`, htmlFor: this._id, required: this.required, tooltipText: this.info }, this.label)), index.h("label", { key: '570a0637d106b24823d39945e1b7a68a4cec4f36', class: `${blockClass}__switch`, htmlFor: this._id, onClick: e => e.preventDefault() }, index.h("input", { key: '197a94215e42e7a8a9d5a5652ad1163b501799ab', 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: '09ac81f91f9dc92c4e4cac593db4be4697243ce0', class: `${blockClass}__slider ${blockClass}__slider--round` }))), helperContent !== '' && (index.h("bds-typography", { key: '4a35755ec9e280dfedb839826683f1272c76223d', 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,320 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var getOffset = require('./getOffset-m4hBgyVP.js');
+var states = require('./states-BweP5Vpu.js');
+var attributes = require('./attributes-wIHueigW.js');
+require('./floating.mixin-Bje4320w.js');
+require('./Keys-DbIXSJF2.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 ?? 'bottom',
+            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 || '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: '7ba6db9103d172c519e4f9bd3e8743ba506057f1', class: "tooltip" }, index.h("div", { key: 'bea4019c3c4d0d1ac605e3c7d5e35564c8173c9e', 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: 'f598c2b54709269fcb1d3335d86400cc3ab4a177', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '2a18a5c6839c21ec3c0a9f82b6117bded3c08b26' }))));
+    }
+    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.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: 'a9b61038ed68ce72e8a96845ac3c082a6b635053', class: `bds-typography ${isDisabledState ? 'bds-typography--disabled-cursor' : ''}` }, index.h(TagName, { key: '3966152c29dd0af270676ab7af0aaf811b48624a', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, index.h("slot", { key: 'fe090f9278feac140d0d4b979912b332da5d6ec8' }), this.required && required && (index.h("em", { key: 'ccfd67dda34d927778ccf59a40cae185952f2495', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (index.h("span", { key: '720ef78bd2e638e0d0be56918483fe227a011f5e' }, index.h("em", { key: '5e064aaed2633b33677e12774dead52ee0871f4a', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }, index.h("bds-tooltip", { key: '9ec65063f105cec050f01348a64e7b9f5fa8e968' }, 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;

package/dist/cjs/boreal-web-components.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BcSjvXJk.js');
+var index = require('./index-CwYIVC9N.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -40,7 +40,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["bds-text-field.cjs",[[836,"bds-text-field",{"name":[513],"disabled":[516],"required":[516],"value":[1537],"error":[516],"errorMessage":[1,"error-message"],"customValidators":[16],"validationTiming":[1,"validation-timing"],"type":[513],"variant":[513],"placeholder":[1],"readOnly":[4,"readonly"],"autocomplete":[1],"pattern":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"label":[1],"sublabel":[1],"icon":[1],"helperText":[1,"helper-text"],"info":[1],"clearable":[4],"clearOnHover":[4,"clear-on-hover"],"charCount":[2,"char-count"],"counter":[4],"customWidth":[1,"custom-width"],"isDisabled":[32],"focused":[32],"showPassword":[32],"touched":[32],"dirty":[32],"currentCharCount":[32],"validationError":[32],"validationMessage":[32],"checkValidity":[64],"reportValidity":[64]},null,{"disabled":[{"onDisabledChange":0}],"type":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"validationTiming":[{"checkPropValues":0}],"customValidators":[{"onCustomValidatorsChange":0}],"value":[{"onValueChange":0}]}]]],["bds-dialog.cjs",[[772,"bds-dialog",{"active":[1540],"preventClose":[4,"prevent-close"],"height":[1],"width":[1],"layout":[1],"contentPadding":[1,"content-padding"],"backdropClose":[4,"backdrop-close"],"escapeClose":[4,"escape-close"],"size":[1],"variant":[1],"titleDialog":[1,"title-dialog"],"maximizable":[4],"closable":[4],"open":[64],"close":[64]},null,{"active":[{"handleIsOpenChange":0}]}]]],["bds-popover.cjs",[[772,"bds-popover",{"floatingOptions":[16],"disabled":[4],"width":[8],"header":[4],"footer":[4],"closable":[4],"isVisible":[32]}]]],["bds-banner.cjs",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"closeBanner":[64]}]]],["bds-checkbox.cjs",[[836,"bds-checkbox",{"name":[513],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"error":[516],"value":[1],"label":[1],"isDisabled":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-flag.cjs",[[0,"bds-flag",{"alignFlag":[1,"align-flag"],"callSign":[4,"call-sign"],"country":[1],"customFlags":[16],"identifier":[1],"label":[4],"shape":[1],"shortName":[4,"short-name"]},null,{"alignFlag":[{"checkPropValues":0}],"identifier":[{"checkPropValues":0}],"shape":[{"checkPropValues":0}]}]]],["bds-spinner.cjs",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-typography.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"isRequired":[516,"is-required"],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"isDownloadable":[4,"is-downloadable"],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}]]],["bds-button.cjs",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-tooltip.cjs",[[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
+  return index.bootstrapLazy([["bds-list-menu-item.cjs",[[772,"bds-list-menu-item",{"variant":[513],"name":[1],"disabled":[516],"selected":[516],"value":[513],"activeItem":[516,"active-item"],"href":[1],"newTab":[4,"new-tab"],"download":[1],"currentState":[32]},null,{"variant":[{"checkPropsVariant":0}]}]]],["bds-text-field.cjs",[[836,"bds-text-field",{"name":[513],"disabled":[516],"required":[516],"value":[1537],"error":[516],"errorMessage":[1,"error-message"],"customValidators":[16],"validationTiming":[1,"validation-timing"],"type":[513],"variant":[513],"placeholder":[1],"readOnly":[4,"readonly"],"autocomplete":[1],"pattern":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"label":[1],"sublabel":[1],"icon":[1],"helperText":[1,"helper-text"],"info":[1],"clearable":[4],"clearOnHover":[4,"clear-on-hover"],"charCount":[2,"char-count"],"counter":[4],"customWidth":[1,"custom-width"],"isDisabled":[32],"focused":[32],"showPassword":[32],"touched":[32],"dirty":[32],"currentCharCount":[32],"validationError":[32],"validationMessage":[32],"checkValidity":[64],"reportValidity":[64]},null,{"disabled":[{"onDisabledChange":0}],"type":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"validationTiming":[{"checkPropValues":0}],"customValidators":[{"onCustomValidatorsChange":0}],"value":[{"onValueChange":0}]}]]],["bds-toggle.cjs",[[576,"bds-toggle",{"name":[513],"disabled":[516],"required":[516],"info":[1],"error":[516],"errorMessage":[513,"error-message"],"checked":[516],"placement":[513],"label":[513],"helperText":[513,"helper-text"],"value":[1],"isDisabled":[32],"validationError":[32],"validationMessage":[32],"isChecked":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-dialog.cjs",[[772,"bds-dialog",{"active":[1540],"preventClose":[4,"prevent-close"],"height":[1],"width":[1],"layout":[1],"contentPadding":[1,"content-padding"],"backdropClose":[4,"backdrop-close"],"escapeClose":[4,"escape-close"],"size":[1],"variant":[1],"titleDialog":[1,"title-dialog"],"maximizable":[4],"closable":[4],"open":[64],"close":[64]},null,{"active":[{"handleIsOpenChange":0}]}]]],["bds-popover.cjs",[[772,"bds-popover",{"floatingOptions":[16],"disabled":[4],"width":[8],"header":[4],"footer":[4],"closable":[4],"isVisible":[32]}]]],["bds-avatar.cjs",[[0,"bds-avatar",{"username":[1],"variant":[1],"background":[1],"initialsColor":[1,"initials-color"]}]]],["bds-badge.cjs",[[260,"bds-badge",{"variant":[1],"disabled":[4]},null,{"variant":[{"checkPropValues":0}]}]]],["bds-banner.cjs",[[260,"bds-banner",{"variant":[1],"closable":[4],"closeButtonLabel":[1,"close-button-label"],"isClosing":[32],"isOpen":[32],"open":[64],"close":[64]}]]],["bds-checkbox.cjs",[[836,"bds-checkbox",{"name":[513],"disabled":[516],"required":[516],"checked":[1540],"indeterminate":[1540],"error":[516],"value":[1],"label":[1],"isDisabled":[32]},null,{"checked":[{"onCheckedChange":0}],"disabled":[{"onDisabledChange":0}]}]]],["bds-divider.cjs",[[0,"bds-divider",{"orientation":[513]},null,{"orientation":[{"checkPropValues":0}]}]]],["bds-flag.cjs",[[0,"bds-flag",{"alignFlag":[1,"align-flag"],"callSign":[4,"call-sign"],"country":[1],"customFlags":[16],"identifier":[1],"label":[4],"shape":[1],"shortName":[4,"short-name"]},null,{"alignFlag":[{"checkPropValues":0}],"identifier":[{"checkPropValues":0}],"shape":[{"checkPropValues":0}]}]]],["bds-grid.cjs",[[260,"bds-grid",{"layout":[1],"rowGap":[1,"row-gap"]},null,{"layout":[{"checkPropValues":0}]}]]],["bds-grid-item.cjs",[[260,"bds-grid-item",{"colSpan":[520,"col-span"],"colSpanSm":[520,"col-span-sm"],"colSpanMd":[520,"col-span-md"],"colSpanLg":[520,"col-span-lg"],"colSpanXl":[520,"col-span-xl"],"colSpan2xl":[520,"col-span-2xl"],"rowSpan":[520,"row-span"],"offset":[514]},null,{"colSpan":[{"checkPropValues":0}],"colSpanSm":[{"checkPropValues":0}],"colSpanMd":[{"checkPropValues":0}],"colSpanLg":[{"checkPropValues":0}],"colSpanXl":[{"checkPropValues":0}],"colSpan2xl":[{"checkPropValues":0}],"rowSpan":[{"checkPropValues":0}],"offset":[{"checkPropValues":0}]}]]],["bds-list-menu.cjs",[[260,"bds-list-menu",{"multiple":[4],"menuRole":[1,"menu-role"],"selectedValues":[32],"getSelectedValues":[64],"setSelectedValues":[64]},[[0,"bdsSelect","handleItemClick"]]]]],["bds-spinner.cjs",[[0,"bds-spinner",{"size":[1],"label":[1]},null,{"size":[{"checkPropValues":0}]}]]],["bds-status.cjs",[[260,"bds-status",{"state":[1],"indicator":[1]},null,{"state":[{"checkPropValues":0}],"indicator":[{"checkPropValues":0}]}]]],["bds-tag.cjs",[[260,"bds-tag",{"multiselect":[4],"selected":[4],"closeButtonLabel":[1,"close-button-label"],"color":[1],"readonly":[4],"disabled":[4],"internalSelected":[32]},null,{"color":[{"checkPropValues":0}],"selected":[{"syncSelectedFromProp":0}]}]]],["bds-button.cjs",[[324,"bds-button",{"label":[1],"disabled":[4],"name":[1],"type":[1],"color":[1],"variant":[1],"size":[1],"loading":[4],"disclosure":[4],"currentState":[32]},null,{"type":[{"checkPropValues":0}],"color":[{"checkPropValues":0}],"variant":[{"checkPropValues":0}],"size":[{"checkPropValues":0}]}]]],["bds-tooltip_2.cjs",[[260,"bds-typography",{"variant":[513],"size":[513],"state":[513],"customClass":[1,"custom-class"],"element":[1],"align":[1],"ellipsis":[4],"maxLines":[2,"max-lines"],"tooltipText":[1,"tooltip-text"],"required":[516],"htmlFor":[1,"html-for"],"href":[1],"target":[1],"downloadable":[4],"filename":[1],"sanitizedHref":[32]},null,{"href":[{"updateSanitizedHref":0}]}],[772,"bds-tooltip",{"multiline":[4],"disabled":[4],"floatingOptions":[16],"isVisible":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;