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

package/dist/collection/components/layouts/bds-grid/grid-item/bds-grid-item.js

@@ -0,0 +1,306 @@
+import { h, Host } from "@stencil/core";
+import { GRID_ITEM_COL_SPAN } from "./types";
+import { validateNumericProp } from "../../../../utils/index";
+/**
+ * Grid item child of `bds-grid`. Must be a direct child of `bds-grid`.
+ *
+ * @slot - Item content. The grid item manages position only — content styling is
+ *   the responsibility of the slotted element.
+ */
+export class BdsGridItem {
+    constructor() {
+        /** Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`). */
+        this.colSpan = GRID_ITEM_COL_SPAN.DEFAULT;
+        /** Column offset: shifts the item right by N columns (0–11). */
+        this.offset = 0;
+    }
+    checkPropValues() {
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.DEFAULT, this.el, 'colSpan');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.SM_MAX, this.el, 'colSpanSm');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.MD_MAX, this.el, 'colSpanMd');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.LG_MAX, this.el, 'colSpanLg');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.XL_MAX, this.el, 'colSpanXl');
+        validateNumericProp(1, GRID_ITEM_COL_SPAN.XXL_MAX, this.el, 'colSpan2xl');
+        validateNumericProp(1, undefined, this.el, 'rowSpan');
+        validateNumericProp(GRID_ITEM_COL_SPAN.OFFSET_MIN, GRID_ITEM_COL_SPAN.OFFSET_MAX, this.el, 'offset');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    getHostStyles() {
+        const styles = {};
+        if (this.colSpan !== 'full')
+            styles['--_col-base'] = String(this.colSpan);
+        if (this.colSpanSm !== undefined && this.colSpanSm !== 'full')
+            styles['--_col-sm'] = String(this.colSpanSm);
+        if (this.colSpanMd !== undefined && this.colSpanMd !== 'full')
+            styles['--_col-md'] = String(this.colSpanMd);
+        if (this.colSpanLg !== undefined && this.colSpanLg !== 'full')
+            styles['--_col-lg'] = String(this.colSpanLg);
+        if (this.colSpanXl !== undefined && this.colSpanXl !== 'full')
+            styles['--_col-xl'] = String(this.colSpanXl);
+        if (this.colSpan2xl !== undefined && this.colSpan2xl !== 'full')
+            styles['--_col-2xl'] = String(this.colSpan2xl);
+        if (this.rowSpan !== undefined && this.rowSpan !== 'full')
+            styles['--_row-base'] = String(this.rowSpan);
+        if (this.offset > 0)
+            styles['grid-column-start'] = String(Number(this.offset) + 1);
+        return styles;
+    }
+    render() {
+        return (h(Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+    }
+    static get is() { return "bds-grid-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-grid-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-grid-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "colSpan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpan']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column span at all breakpoints (fallback). `'full'` spans all columns (`grid-column: 1 / -1`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span",
+                "defaultValue": "GRID_ITEM_COL_SPAN.DEFAULT"
+            },
+            "colSpanSm": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanSm']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `sm` breakpoint (\u2265320px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-sm"
+            },
+            "colSpanMd": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanMd']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `md` breakpoint (\u2265769px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-md"
+            },
+            "colSpanLg": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanLg']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `lg` breakpoint (\u2265960px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-lg"
+            },
+            "colSpanXl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpanXl']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `xl` breakpoint (\u22651152px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-xl"
+            },
+            "colSpan2xl": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['colSpan2xl']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Override col-span at the `2xl` breakpoint (\u22651344px)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "col-span-2xl"
+            },
+            "rowSpan": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['rowSpan']",
+                    "resolved": "\"full\" | number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Row span. `'full'` maps to `grid-row: 1 / -1`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "row-span"
+            },
+            "offset": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGridItem['offset']",
+                    "resolved": "number",
+                    "references": {
+                        "IGridItem": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid-item/types/index.ts::IGridItem",
+                            "referenceLocation": "IGridItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Column offset: shifts the item right by N columns (0\u201311)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "offset",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "colSpan",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanSm",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanMd",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanLg",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpanXl",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "colSpan2xl",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "rowSpan",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "offset",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/layouts/bds-grid/grid-item/types/IGridItem.js

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

package/dist/collection/components/layouts/bds-grid/grid-item/types/enum.js

@@ -0,0 +1,10 @@
+export const GRID_ITEM_COL_SPAN = {
+    SM_MAX: 4,
+    MD_MAX: 8,
+    LG_MAX: 12,
+    XL_MAX: 12,
+    XXL_MAX: 12,
+    DEFAULT: 12,
+    OFFSET_MIN: 0,
+    OFFSET_MAX: 11,
+};

package/dist/collection/components/layouts/bds-grid/grid-item/types/index.js

@@ -0,0 +1,3 @@
+export * from './IGridItem';
+export * from './types';
+export * from './enum';

package/dist/collection/components/layouts/bds-grid/grid-item/types/types.js

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

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

@@ -148,7 +148,8 @@ export class BdsDialog extends Mixin(backdropMixin) {
      * otherwise, the hide will be triggered after the transition ends.
      */
     transitionBeforeClose() {
-        this.active = false;
+        if (this.active)
+            this.active = false;
         this.removeTransitionAnimation('enter');
         const { transitionDuration } = getComputedStyle(this.dialogElement);
         const duration = parseFloat(transitionDuration);
@@ -200,10 +201,10 @@ export class BdsDialog extends Mixin(backdropMixin) {
     }
     render() {
         const inheritedAriaAttr = this.inheritedAttributes;
-        return (h("dialog", { key: '0cc772f12b48d93bf8304597580157400846eb3a', onClick: e => this.handleBackdropClick(e), onKeyDown: e => this.handleKeydown(e), onTransitionEnd: this.onDialogTransitionEnd, ref: el => {
+        return (h("dialog", { key: '73f9b2516aa414e3016e8a18b5f0d2de7f46a09a', 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: '43fe62c1ddf4537008058d4e1e178a164db98d45', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (h("div", { key: '2404606784ae0f915191d5994716eaef6682ba9f', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), h("div", { key: 'fe00d0e4ebf041a2734d40245c098ecfd80deb0b', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, h("slot", { key: 'd00c4e8bd26f392003e0de17551177615d26b74a' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (h("div", { key: 'ce63e120119b918e0ec1b1d55a71ce2ef11ed4d9', class: "bds-dialog__footer" }, h("slot", { key: 'ffd76edb35b7fcfd68861d0364e9f94059f5da92', name: "footer" }))))));
+            }, 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" }))))));
     }
     static get is() { return "bds-dialog"; }
     static get originalStyleUrls() {

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

@@ -65,6 +65,19 @@
 .popover-header__close {
   margin-left: var(--boreal-spacing-s);
 }
+.popover-header__close .bds-button {
+  margin: 0;
+  padding: 0;
+  width: var(--boreal-spacing-ml);
+  height: var(--boreal-spacing-ml);
+}
+.popover-header__close .bds-button__content {
+  width: var(--boreal-spacing-ml);
+  height: var(--boreal-spacing-ml);
+}
+.popover-header__close em {
+  font-size: var(--boreal-typography-font-size-xs);
+}
 .popover-footer {
   border-top: var(--boreal-stroke-default-light) solid 1px;
   padding: var(--boreal-spacing-s) var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);
@@ -85,20 +98,21 @@
   height: var(--popover-arrow-size);
   background: var(--boreal-ui-inverse);
   transform: rotate(45deg);
+  inset: 0;
 }
 
 .popover[data-placement^=top] .popover-arrow {
   bottom: calc(var(--popover-arrow-size) / -2);
 }
 .popover[data-placement^=top] .popover-arrow::before {
-  top: 0;
+  bottom: 0;
 }
 
 .popover[data-placement^=bottom] .popover-arrow {
   top: calc(var(--popover-arrow-size) / -2);
 }
 .popover[data-placement^=bottom] .popover-arrow::before {
-  top: 0;
+  bottom: 0;
 }
 
 .popover[data-placement^=left] .popover-arrow {

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

@@ -1,6 +1,8 @@
 import { Host, Mixin, h } from "@stencil/core";
 import { anchoredMixin } from "../../../mixins/anchored.mixin";
 import { BUTTON_SIZES } from "../../actions/bds-button/types/enum";
+import { OFFSET } from "./constants/Offset";
+import { getOffset } from "../../../utils/helpers/overlays/getOffset";
 /**
  *
  * @slot - Default slot for the popover body content.
@@ -72,7 +74,7 @@ export class BdsPopover extends Mixin(anchoredMixin) {
     get options() {
         return {
             placement: this.floatingOptions.placement ?? 'bottom',
-            offset: this.floatingOptions.offset ?? 16,
+            offset: getOffset(this.floatingOptions?.hideArrow, this.floatingOptions?.offset, OFFSET),
             arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
             strategy: 'fixed',
             shift: true,
@@ -139,7 +141,13 @@ export class BdsPopover extends Mixin(anchoredMixin) {
      */
     setArrowPosition(result) {
         if (result.middlewareData?.arrow && !this.disabled && this.arrowElement?.isConnected) {
-            const { x: arrowX, y: arrowY } = result.middlewareData.arrow;
+            const placement = this.floatingOptions.placement;
+            const arrowData = result.middlewareData.arrow;
+            const isStartPlacement = placement === 'top-start' || placement === 'bottom-start';
+            let arrowX = arrowData.x || undefined;
+            if (isStartPlacement)
+                arrowX = arrowData.x ? 20 : undefined;
+            const arrowY = result.middlewareData.arrow.y;
             Object.assign(this.arrowElement.style, {
                 left: arrowX != null ? `${arrowX}px` : '',
                 top: arrowY != null ? `${arrowY}px` : '',
@@ -153,7 +161,7 @@ export class BdsPopover extends Mixin(anchoredMixin) {
      */
     handleClickOutside(e) {
         const target = e.target;
-        const clickedInsideTrigger = this.el.contains(target);
+        const clickedInsideTrigger = this.listenTarget?.contains(target) || this.trigger?.contains(target) || this.triggerSlot?.contains(target);
         const clickedInsideFloating = this.floatingContent.contains(target) || this.floatingContent === target;
         if (!clickedInsideTrigger && !clickedInsideFloating) {
             this.hide();
@@ -277,7 +285,7 @@ export class BdsPopover extends Mixin(anchoredMixin) {
         this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
     }
     render() {
-        return (h(Host, { key: 'e00cacf63369fc0c409d003aaf495eeef1af424c' }, h("div", { key: '0262e5dc2789d817c1332d12d598b7f6bb71a188', 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: '63156ddf954e2c2b6452184f060ea502b9798d2f', class: "popover-header" }, h("div", { key: '1183b88e3352637d9fce99d160c3d1df56b6010b', class: "popover-header__content" }, h("span", { key: '48dcc7ac417bddfd9f19e388e32833d6930a566c', class: "popover-header__icon" }, h("slot", { key: 'a852564051439b09b30f8f0f054c29ccb6c4f722', name: "header-icon" })), h("span", { key: 'aaaef66cd3454c4dd3bd4be7e0613187943f49b0', class: "popover-header__title" }, h("slot", { key: '231224f3e9115e300998942aecfd07ae7b45dda7', name: "header-title" }))), this.closable && (h("bds-button", { key: '67ccc016aa89d0627812ad80ad1121bdb3e25692', class: "popover-header__close", size: BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, h("em", { key: '40cdcbf5e9ca75e55f45cdce3db6af2ed5088298', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (h("div", { key: 'a8bd41e82c5f4a0d7fe7a02287c29140490118e4', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("div", { key: 'a205d8490fb192ebf0c75388775a8247b06d4431', class: "popover-content", tabIndex: -1, part: "popover-content" }, h("slot", { key: 'e3447f0022c0c78a28d176df5d85ff05daea8bd6' })), this.footer && (h("div", { key: 'd16a93b4c702e342c89a7192b9a528f39e035601', class: "popover-footer", onClick: (e) => e.stopPropagation() }, h("slot", { key: '0c046c725771991b981b5baf090c1ecc023987c6', name: "footer-helper" }), h("slot", { key: '3f4391e420d411b0ae84df6fe29d4fc9e96fc206', name: "footer-button" }))))));
+        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" })))));
     }
     static get is() { return "bds-popover"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1 @@
+export const OFFSET = 11;

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

@@ -22,7 +22,6 @@
 .tooltip-content {
   position: fixed;
   margin: 0;
-  border: 0;
   overflow: visible;
   border-radius: var(--boreal-radius-xs2);
   background: var(--boreal-ui-black);
@@ -55,32 +54,22 @@
   height: var(--tooltip-arrow-size);
   background: var(--boreal-ui-black);
   transform: rotate(45deg);
+  transform-origin: center;
+  inset: 0;
 }
 
 .tooltip-content[data-placement^=top] .tooltip-arrow {
   bottom: calc(var(--tooltip-arrow-size) / -2);
 }
-.tooltip-content[data-placement^=top] .tooltip-arrow::before {
-  top: 0;
-}
 
 .tooltip-content[data-placement^=bottom] .tooltip-arrow {
   top: calc(var(--tooltip-arrow-size) / -2);
 }
-.tooltip-content[data-placement^=bottom] .tooltip-arrow::before {
-  top: 0;
-}
 
 .tooltip-content[data-placement^=left] .tooltip-arrow {
   right: calc(var(--tooltip-arrow-size) / -2);
 }
-.tooltip-content[data-placement^=left] .tooltip-arrow::before {
-  left: 0;
-}
 
 .tooltip-content[data-placement^=right] .tooltip-arrow {
   left: calc(var(--tooltip-arrow-size) / -2);
-}
-.tooltip-content[data-placement^=right] .tooltip-arrow::before {
-  left: 0;
 }

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

@@ -1,5 +1,7 @@
 import { Host, Mixin, h } from "@stencil/core";
 import { anchoredMixin } from "../../../mixins/anchored.mixin";
+import { OFFSET } from "./constants/Offset";
+import { getOffset } from "../../../utils/helpers/overlays/getOffset";
 /**
  * Tooltip component that displays a short label anchored to a trigger element on hover.
  *
@@ -55,7 +57,7 @@ export class BdsTooltip extends Mixin(anchoredMixin) {
     get options() {
         return {
             placement: this.floatingOptions.placement ?? 'bottom',
-            offset: this.floatingOptions.offset ?? 8,
+            offset: getOffset(this.floatingOptions?.hideArrow, this.floatingOptions.offset, OFFSET),
             arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
             strategy: 'fixed',
         };
@@ -155,7 +157,7 @@ export class BdsTooltip extends Mixin(anchoredMixin) {
     }
     render() {
         const classes = this.tooltipStyles;
-        return (h(Host, { key: '65758ffb473363eadce15b09704224a95304dbf2', class: "tooltip" }, h("div", { key: 'd488e67b2da3c788ccf8eb9b9eeb273b9d1c58be', id: "tooltip-content", part: "tooltip-content", class: classes, popover: "manual", role: "tooltip", "aria-hidden": this.isVisible ? 'false' : 'true', "data-placement": this.getPlacement, "data-multiline": this.multiline, "data-hidearrow": this.canShowArrow, ref: el => (this.floatingContent = el) }, this.canShowArrow && (h("div", { key: 'de86ff5432b49a2e31d94c6c8e16f33327ef5baa', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '8428151ba6b9b835f721be33cc61b1bacdba7494' }))));
+        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' }))));
     }
     static get is() { return "bds-tooltip"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1 @@
+export const OFFSET = 4;

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

@@ -14,6 +14,10 @@
 * 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.
 */
+bds-typography.bds-typography--disabled-cursor {
+  cursor: not-allowed;
+}
+
 .bds-typography {
   display: flex;
   box-sizing: border-box;