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

package/dist/collection/components/navigation/bds-breadcrumb-item/bds-breadcrumb-item.js

@@ -0,0 +1,369 @@
+import { h } from "@stencil/core";
+/**
+ * @summary Breadcrumb navigation item component that represents a single step within a breadcrumb navigation trail.
+ *
+ * @slot - The text content of the breadcrumb item, can include simple text or text with icons.
+ */
+export class BdsBreadcrumbItem {
+    constructor() {
+        /**
+         * Marks this breadcrumb item as the current page.
+         *
+         * When true, the item is non-interactive and has aria-current="page".
+         *
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Enables router-based navigation instead of native link navigation.
+         *
+         * @default false
+         */
+        this.router = false;
+        /**
+         * Internal prop controlled by the parent breadcrumb.
+         * Indicates that this item is part of a collapsed range.
+         *
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * Internal prop controlled by the parent breadcrumb.
+         * Renders the collapse indicator ("...") for hidden items.
+         *
+         * @default false
+         */
+        this.showCollapse = false;
+        /**
+         * URL for the breadcrumb link.
+         *
+         * @default ''
+         */
+        this.href = '';
+        /**
+         * Specifies where to open the linked document.
+         *
+         * @default '_self'
+         */
+        this.target = '_self';
+        /**
+         * Enables download behavior for the link.
+         *
+         * @default false
+         */
+        this.downloadable = false;
+        /**
+         * Suggested filename for the downloaded file.
+         *
+         * @default 'filename'
+         */
+        this.filename = 'filename';
+        /**
+         * Relationship between the current document and the linked resource.
+         *
+         * @default ''
+         */
+        this.rel = '';
+    }
+    handleClick(event) {
+        if (this.active) {
+            event.preventDefault();
+            return;
+        }
+        if (this.router)
+            event.preventDefault();
+        this.bdsClick.emit({ element: this.el, href: this.href, router: this.router });
+    }
+    get breadcrumbItem() {
+        return this.href !== '' && !this.active ? (h("bds-typography", { onClick: e => this.handleClick(e), href: this.href, target: this.target, downloadable: this.downloadable, filename: this.filename, rel: this.rel, variant: "link", element: "a", class: "bds-breadcrumb-item__text" }, h("slot", null))) : (h("span", { class: "bds-breadcrumb-item__text", onClick: e => this.handleClick(e) }, h("slot", null)));
+    }
+    handleCollapseClick(e) {
+        e.preventDefault();
+        this.bdsClickCollapse.emit({ element: this.collapsedRef });
+    }
+    get cssClasses() {
+        return {
+            ['bds-breadcrumb-item']: true,
+            ['bds-breadcrumb-item--active']: this.active,
+            ['bds-breadcrumb-item--collapsed']: this.collapsed,
+        };
+    }
+    render() {
+        return (h("li", { key: 'bca5cb70296f745ae669b5cd7f88e8252979fe9b', class: this.cssClasses, "aria-current": this.active ? 'page' : null }, this.breadcrumbItem, this.showCollapse && (h("bds-typography", { key: '9ed493f2a5112d5cf20c0a02d48ea8a8c69eb991', class: "bds-breadcrumb-item bds-breadcrumb-item__collapse-indicator", ref: collapsedEl => (this.collapsedRef = collapsedEl), onClick: e => this.handleCollapseClick(e), onKeyDown: (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    this.handleCollapseClick(e);
+                }
+            }, variant: "link", element: "a" }, "..."))));
+    }
+    static get is() { return "bds-breadcrumb-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-breadcrumb-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-breadcrumb-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Marks this breadcrumb item as the current page.\n\nWhen true, the item is non-interactive and has aria-current=\"page\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "router": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables router-based navigation instead of native link navigation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "router",
+                "defaultValue": "false"
+            },
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Internal prop controlled by the parent breadcrumb.\nIndicates that this item is part of a collapsed range."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "showCollapse": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Internal prop controlled by the parent breadcrumb.\nRenders the collapse indicator (\"...\") for hidden items."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-collapse",
+                "defaultValue": "false"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "URL for the breadcrumb link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "''"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_parent' | '_self' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'_self'"
+                        }],
+                    "text": "Specifies where to open the linked document."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "'_self'"
+            },
+            "downloadable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enables download behavior for the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "downloadable",
+                "defaultValue": "false"
+            },
+            "filename": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'filename'"
+                        }],
+                    "text": "Suggested filename for the downloaded file."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filename",
+                "defaultValue": "'filename'"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "''"
+                        }],
+                    "text": "Relationship between the current document and the linked resource."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsClick",
+                "name": "bdsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a breadcrumb item is clicked."
+                },
+                "complexType": {
+                    "original": "BdsClickItemEvent",
+                    "resolved": "{ element: HTMLBdsBreadcrumbItemElement; href?: string; router: boolean; }",
+                    "references": {
+                        "BdsClickItemEvent": {
+                            "location": "import",
+                            "path": "./types/IBreadcrumbItem",
+                            "id": "src/components/navigation/bds-breadcrumb-item/types/IBreadcrumbItem.ts::BdsClickItemEvent",
+                            "referenceLocation": "BdsClickItemEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "bdsClickCollapse",
+                "name": "bdsClickCollapse",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the collapse indicator (\"...\") is activated."
+                },
+                "complexType": {
+                    "original": "BdsClickCollapseEvent",
+                    "resolved": "{ element: HTMLElement; }",
+                    "references": {
+                        "BdsClickCollapseEvent": {
+                            "location": "import",
+                            "path": "./types/IBreadcrumbItem",
+                            "id": "src/components/navigation/bds-breadcrumb-item/types/IBreadcrumbItem.ts::BdsClickCollapseEvent",
+                            "referenceLocation": "BdsClickCollapseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/navigation/bds-breadcrumb-item/types/IBreadcrumbItem.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/overlays/bds-dialog/bds-dialog.css

@@ -90,7 +90,7 @@ bds-dialog dialog {
   border: none;
   border-radius: var(--boreal-radius-xs);
   background-color: var(--boreal-white);
-  box-shadow: 0 8px 12px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-l);
   align-self: center;
   justify-self: center;
 }

package/dist/collection/components/overlays/bds-dialog/bds-dialog.js

@@ -201,10 +201,10 @@ export class BdsDialog extends Mixin(backdropMixin) {
     }
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (h("dialog", { key: '73f9b2516aa414e3016e8a18b5f0d2de7f46a09a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+        return (h("dialog", { key: 'de042f49b5eaaf2a0a0f305570d04321959b9fcb', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
                 if (el !== undefined)
                     this.dialogElement = el;
-            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, h("div", { key: 'ef900b6a99ed650db043fb8123c90c3cd7322ec6', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (h("div", { key: '81d96f353eef6bd9f38baba8702b88599d6c02a3', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), h("div", { key: 'd36d2c112a87e885e53bd4a8740530ac7b196980', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, h("slot", { key: 'c296c8e91a44d7f40284586b3b425a6b87964cdd' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (h("div", { key: '98c17852b5dc519207c66850c38d679d31d27b5b', class: "bds-dialog__footer" }, h("slot", { key: '159426b4095804e6da864d86a0f6ef7a8e2197e3', name: "footer" }))))));
+            }, style: { ...this.getFixedSize() }, ...(this.titleDialog.length > 0 && { 'aria-labelledby': 'bds-dialog-title' }), ...inheritedAriaAttr }, h("div", { key: 'fef08504c053ca1f6188526ff0af517f767a4349', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (h("div", { key: '399281c7b7caa7a167677b26dc3ef338b987a09d', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), h("div", { key: 'dc4bc6d37b7c3928b6d5d15b56456340ac02cbfa', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, h("slot", { key: 'e6f01fe42e2b57bc94986ca232d5a8860e5236ef' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (h("div", { key: '80d7a6432bd127635a45b482d71b58973089b87d', class: "bds-dialog__footer" }, h("slot", { key: '8e5ec1341161020313712e64195bf9df68bbe340', name: "footer" }))))));
     }
     static get is() { return "bds-dialog"; }
     static get originalStyleUrls() {

package/dist/collection/components/overlays/bds-popover/bds-popover.js

@@ -236,11 +236,11 @@ export class BdsPopover extends Mixin(anchoredMixin) {
             const listenTarget = nativeEl ?? parentBds;
             this.listenTarget = listenTarget;
             this.listenTarget.addEventListener('click', (evt) => this.handleShow(evt));
-            this.listenTarget.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+            this.listenTarget.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.show(), () => this.hide()));
         }
         else {
             this.trigger.addEventListener('click', (evt) => this.handleShow(evt));
-            this.trigger.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+            this.trigger.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.show(), () => this.hide()));
         }
     }
     /**
@@ -280,12 +280,20 @@ export class BdsPopover extends Mixin(anchoredMixin) {
     get hasFooterSlot() {
         return this.el.querySelector('[slot="footer"]') !== null;
     }
+    /** Programmatically opens the popover, running the full show lifecycle. */
+    async openPopover() {
+        this.show();
+    }
+    /** Programmatically closes the popover, running the full hide lifecycle. */
+    async closePopover() {
+        this.hide();
+    }
     disconnectedCallback() {
         this.listenTarget.removeEventListener('click', (evt) => this.handleShow(evt));
         this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
     }
     render() {
-        return (h(Host, { key: 'd9bdf356fc8aa99312073be3589cf50f4bd1afbe', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (h("div", { key: 'a9172eb13620a218c1a37bd52eddaa6f9b53739c', class: "popover-header" }, h("div", { key: '3b8774f0f8f461ce164220d53c48139e95a1b8f5', class: "popover-header__content" }, h("span", { key: '86cc8cedf2c7970834a61c8374fc23d67417c2dd', class: "popover-header__icon" }, h("slot", { key: '1e356d9b87672942ef4d19f33f5de9c707d02cb2', name: "header-icon" })), h("span", { key: 'c014a7a269a4cc79841d4350e7e8efc4fc39cb06', class: "popover-header__title" }, h("slot", { key: '39ce847785bbad57635834c7957146b89245438e', name: "header-title" }))), this.closable && (h("bds-button", { key: 'a54358b74d8d29f5afeaa9f6fe1f07343f6784c6', class: "popover-header__close", size: BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, h("em", { key: 'efdca5b8e1f0560a15e063e832f1aeb9c754a820', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (h("div", { key: '16870352c06b06de9b67e542e9e1753c7e3bff66', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("div", { key: 'b5dddeeedcc5ba9d107af57a25d9ca350a0621a8', class: "popover-content", tabIndex: -1, part: "popover-content" }, h("slot", { key: '4bfc174186ab356747175464922c0d6b09d6b608' })), this.footer && (h("div", { key: '8476df1ee6751d6cba4cc52efad6675ea74bdc18', class: "popover-footer", onClick: (e) => e.stopPropagation() }, h("slot", { key: 'de60d356d96ae56c8e0a1349f6bafa87700998c6', name: "footer-helper" }), h("slot", { key: '21e59115a077f31b7b05aeea29cd23394642dd4d', name: "footer-button" })))));
+        return (h(Host, { key: '1145ed2dd0b348768e488601c1fb107d324722d6', class: "popover", style: { width: this.popoverWidth }, popover: "manual", role: "tooltip", "data-placement": this.getPlacement, "data-hidearrow": this.canShowArrow, "aria-hidden": this.isVisible ? 'false' : 'true', onClick: (e) => this.handleContentClick(e), ref: el => (this.floatingContent = el) }, this.header && (h("div", { key: '17f0abca3fb63dec5cc653f04fe9f9b66f8726c7', class: "popover-header" }, h("div", { key: '2a75d8bc515b5a570d205b3ed0165fa90f499e72', class: "popover-header__content" }, h("span", { key: 'e4e3c86e939a164bbf1d66e27ae81ad79e72f622', class: "popover-header__icon" }, h("slot", { key: 'dae8e922f5764e0df061d00e1610d10b9b566c1b', name: "header-icon" })), h("span", { key: '2c5712ba18797e4afd646116049bceb7bc947304', class: "popover-header__title" }, h("slot", { key: '3f50071dd0967d019af5df4b42ba74fda8506288', name: "header-title" }))), this.closable && (h("bds-button", { key: '9a2cea30f338e9f9e43b86ded9307b23380d061c', class: "popover-header__close", size: BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, h("em", { key: 'f58e153416d703d86a2dd6e040fc7d4db4a3493c', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (h("div", { key: 'e52f80b940678fb20fdde853ebc3f21e2bfc05eb', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("div", { key: '3bcaf09c7d1e4760f220241352dead7f7d67a576', class: "popover-content", tabIndex: -1, part: "popover-content" }, h("slot", { key: '2b9308edf77812d1055f76266304466261563fe0' })), this.footer && (h("div", { key: '33e39c5c515bddcf0339e4af834026436e475035', class: "popover-footer", onClick: (e) => e.stopPropagation() }, h("slot", { key: '4155b26aef0e05a4b3c1f8692b6e8fb41b556eed', name: "footer-helper" }), h("slot", { key: 'd05f3fe0bcebd6082ad19b217805fe657c78166c', name: "footer-button" })))));
     }
     static get is() { return "bds-popover"; }
     static get originalStyleUrls() {
@@ -461,5 +469,43 @@ export class BdsPopover extends Mixin(anchoredMixin) {
             "isVisible": {}
         };
     }
+    static get methods() {
+        return {
+            "openPopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically opens the popover, running the full show lifecycle.",
+                    "tags": []
+                }
+            },
+            "closePopover": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically closes the popover, running the full hide lifecycle.",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
 }

package/dist/collection/components/overlays/bds-tooltip/bds-tooltip.js

@@ -56,7 +56,7 @@ export class BdsTooltip extends Mixin(anchoredMixin) {
      */
     get options() {
         return {
-            placement: this.floatingOptions.placement ?? 'bottom',
+            placement: this.floatingOptions.placement ?? 'top',
             offset: getOffset(this.floatingOptions?.hideArrow, this.floatingOptions.offset, OFFSET),
             arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
             strategy: 'fixed',
@@ -84,7 +84,7 @@ export class BdsTooltip extends Mixin(anchoredMixin) {
         return !this.floatingOptions.hideArrow || false;
     }
     get getPlacement() {
-        return this.floatingOptions.placement || 'bottom';
+        return this.floatingOptions.placement || 'top';
     }
     /**
      * Guard called by `onBeforeShow` to determine whether the tooltip is allowed to show.
@@ -157,7 +157,7 @@ export class BdsTooltip extends Mixin(anchoredMixin) {
     }
     render() {
         const classes = this.tooltipStyles;
-        return (h(Host, { key: '7ba6db9103d172c519e4f9bd3e8743ba506057f1', class: "tooltip" }, 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 && (h("div", { key: 'f598c2b54709269fcb1d3335d86400cc3ab4a177', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '2a18a5c6839c21ec3c0a9f82b6117bded3c08b26' }))));
+        return (h(Host, { key: 'd86d09d733df866cd6575dc5b2b6cd8f9193de19', class: "tooltip" }, h("div", { key: 'f277bed354746928e0bca3a85103b70437a34692', 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 && (h("div", { key: 'c22acfac98e8ebb09a0d967d2a82d438d43cecb2', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '373a096f06baf800e958e39dd606994c1ca23ac1' }))));
     }
     static get is() { return "bds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/titles-text/bds-typography/bds-typography.css

@@ -10,6 +10,11 @@
 /**
  * TODO: Refactor to use styleguidelines this work as first draft
  **/
+.bds-typography__info {
+  display: inline-flex;
+  align-items: center;
+}
+
 /**
 * This file contains mixins and functions for common interactions styles such as focus rings and transitions.
 * These are used across multiple components to ensure consistency in interaction feedback.

package/dist/collection/components/titles-text/bds-typography/bds-typography.js

@@ -11,52 +11,6 @@ import { FILENAME, getAttributesByTag, VARIANT_CONFIG } from "./utils/bds-typogr
  * @summary A comprehensive typography component that supports multiple text variants, sizes, alignments, states, and link functionality.
  *
  * @slot - The text displayed in the typography.
- *
- * @attr {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
- * @attr {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
- * @attr {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
- * @attr {string} align - The text alignment. Options: start, center, end, inherit
- * @attr {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
- * @attr {boolean} required - Shows a required indicator when used with `label` variant.
- * @attr {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
- * @attr {number} max-lines - Maximum number of lines to show before truncating with ellipsis.
- * @attr {string} href - URL when the typography is an `a` element and a `link` variant.
- * @attr {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
- * @attr {boolean} downloadable - Makes the `link` download a file.
- * @attr {string} filename - Suggested filename when downloading a file from the `link`.
- * @attr {string} html-for - The for attribute when rendered as a label
- * @attr {string} tooltip-text - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
- * @attr {string} custom-class - Additional custom CSS class
- *
- * @property {string} variant - The variant of the typography for styling the text. Options: label, display, heading, subheading, helper, link, code, caption
- * @property {string} element - Defines the HTML element. For `heading` variant, the text size adjusts to the HTML heading level (`h1` through `h6`).
- * @property {string} state - The state of the typography. Only available for the `helper` and `label` variants. Options: default, error, disabled, hover, active, focus, visited
- * @property {string} align - The text alignment. Options: start, center, end, inherit
- * @property {string} size - The size of the typography. For `display` variant all options are available (`xl`, `lg`, `md`, `sm`), while for `link` variant only `md` and `sm` are available.
- * @property {boolean} required - Shows a required indicator when used with `label` variant.
- * @property {boolean} ellipsis - Truncates text with an ellipsis when it overflows.
- * @property {number} maxLines - Maximum number of lines to show before truncating with ellipsis.
- * @property {string} href - URL when the typography is an `a` element and a `link` variant.
- * @property {string} target - Specifies where to open the link. Options: _self, _blank, _top, _parent
- * @property {boolean} downloadable - Makes the `link` download a file.
- * @property {string} filename - Suggested filename when downloading a file from the `link`.
- * @property {string} htmlFor - The for attribute when rendered as a label
- * @property {string} tooltipText - Text to display inside the tooltip when hovering the info icon. Only applicable for `heading`, `subheading`, and `label` variants.
- * @property {string} customClass - Additional custom CSS class
- *
- * @default 'display' - Default variant value
- * @default 'p' - Default element value
- * @default 'start' - Default align value
- * @default 'md' - Default size value
- * @default 'default' - Default state value
- * @default false - Default required state
- * @default false - Default ellipsis state
- * @default 1 - Default maxLines value
- * @default '' - Default href value
- * @default '' - Default target value
- * @default false - Default downloadable state
- * @default 'download' - Default filename value
- * @default '' - Default tooltipText value
  */
 export class BdsTypography {
     constructor() {
@@ -67,6 +21,8 @@ export class BdsTypography {
         this.size = SIZES.M;
         /** Visual state (if supported by variant). */
         this.state = COMPONENT_STATES.DEFAULT;
+        /** Relationship between the current document and the linked resource. */
+        this.rel = '';
         /** Additional custom CSS class. */
         this.customClass = '';
         /** HTML tag used for rendering. */
@@ -148,7 +104,7 @@ export class BdsTypography {
         const classes = this.getVariantStateStyles();
         const { canUseTooltip = null, required = null } = this.getVariantConfig();
         const isDisabledState = this.state === COMPONENT_STATES.DISABLED;
-        return (h(Host, { key: 'a9b61038ed68ce72e8a96845ac3c082a6b635053', class: `bds-typography ${isDisabledState ? 'bds-typography--disabled-cursor' : ''}` }, h(TagName, { key: '3966152c29dd0af270676ab7af0aaf811b48624a', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: 'fe090f9278feac140d0d4b979912b332da5d6ec8' }), this.required && required && (h("em", { key: 'ccfd67dda34d927778ccf59a40cae185952f2495', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (h("span", { key: '720ef78bd2e638e0d0be56918483fe227a011f5e' }, h("em", { key: '5e064aaed2633b33677e12774dead52ee0871f4a', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }, h("bds-tooltip", { key: '9ec65063f105cec050f01348a64e7b9f5fa8e968' }, this.tooltipText)))))));
+        return (h(Host, { key: 'ab4e3734b72e12d49cd91b82da34c9a74a806fb1', class: `bds-typography ${isDisabledState ? 'bds-typography--disabled-cursor' : ''}` }, h(TagName, { key: '166bf124185b9c713afbca95b61a54356a214537', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '5bc61723dd8942560c7308f0d3a4ba330d06695d' }), this.required && required && (h("em", { key: 'f30ff90c2600b262b155dbcbfaba63c1e54b68e9', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (h("span", { key: '0639b26cdb61369b7fecb2267ff3b543f139564b', class: "bds-typography__info" }, h("span", { key: 'e007db27b60782daf0863022573b61dfc2b3f9cf', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }), h("bds-tooltip", { key: '9ad52be88f97084406613d990ef7d75607837bb8' }, this.tooltipText))))));
     }
     static get is() { return "bds-typography"; }
     static get originalStyleUrls() {
@@ -244,6 +200,33 @@ export class BdsTypography {
                 "attribute": "state",
                 "defaultValue": "COMPONENT_STATES.DEFAULT"
             },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ITypography['rel']",
+                    "resolved": "string",
+                    "references": {
+                        "ITypography": {
+                            "location": "import",
+                            "path": "./types/ITypography",
+                            "id": "src/components/titles-text/bds-typography/types/ITypography.ts::ITypography",
+                            "referenceLocation": "ITypography"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Relationship between the current document and the linked resource."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel",
+                "defaultValue": "''"
+            },
             "customClass": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/titles-text/bds-typography/utils/bds-typography-utils.js

@@ -31,7 +31,7 @@ export const getAttributesByTag = (comp, tagName) => {
             href: comp.state !== COMPONENT_STATES.DISABLED ? comp.sanitizedHref : null,
             target: comp.target,
             download: comp.downloadable ? comp.filename : null,
-            rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,
+            rel: comp.target === '_blank' ? 'noopener noreferrer' : comp.rel,
         },
         label: {
             htmlFor: comp.htmlFor,