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

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

@@ -0,0 +1,70 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* 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-grid-item {
+  --_col-span: var(--_col-base, 12);
+  grid-column-end: span var(--_col-span);
+  grid-row-end: span var(--_row-base, 1);
+}
+
+bds-grid-item[col-span=full] {
+  grid-column: 1/-1;
+}
+
+bds-grid-item[row-span=full] {
+  grid-row: 1/-1;
+}
+
+@media (min-width: 320px) {
+  bds-grid-item {
+    --_col-span: var(--_col-sm, var(--_col-base, 12));
+  }
+  bds-grid-item[col-span-sm=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 769px) {
+  bds-grid-item {
+    --_col-span: var(--_col-md, var(--_col-sm, var(--_col-base, 12)));
+  }
+  bds-grid-item[col-span-md=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 960px) {
+  bds-grid-item {
+    --_col-span: var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12))));
+  }
+  bds-grid-item[col-span-lg=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 1152px) {
+  bds-grid-item {
+    --_col-span: var(--_col-xl, var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12)))));
+  }
+  bds-grid-item[col-span-xl=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 1344px) {
+  bds-grid-item {
+    --_col-span: var(--_col-2xl, var(--_col-xl, var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12))))));
+  }
+  bds-grid-item[col-span-2xl=full] {
+    grid-column: 1/-1;
+  }
+}

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: 'e16ec21f8fcabbf3091ed3469a120aaff37f4274', style: this.getHostStyles() }, h("slot", { key: 'b1fa7e071660a4f4f50d9fd31ee9646069678d10' })));
+    }
+    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: '58ef2571b3c6d4fcc4ac85f8536bbb9168651e02', 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: 'fa95d799c99e48ac7b02602d62d79e9919d7b711', class: this.getStyles() }, this.layout !== DIALOG_LAYOUT.HEADERLESS && (h("div", { key: '7460a77b2caf914ddf871804ce6c37fbb186b9ef', class: "bds-dialog__header" }, this.getHeaderLeftElement(), this.getHeaderRightElement())), h("div", { key: '1537a32b06b9e5ca0329d360a15f407ac8bb6d4f', class: `bds-dialog__body ${this.contentPadding === 'none' ? 'bds-dialog--no-padding' : ''}` }, h("slot", { key: 'e45a2fd2507303ab1af63983ff1cb5a3db1b955b' })), this.layout !== DIALOG_LAYOUT.FOOTERLESS && (h("div", { key: 'c258f33a42fff5e88b2846c788bac219fa90fe63', class: "bds-dialog__footer" }, h("slot", { key: 'b64483b7004e01f2ecaa11fc4b144277a20d0204', 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: '953571ebcd84e1e6910f3fce9aa59ff1b00c1be7', 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: '435cde7702b5db7ddc5f055ab379ef264a8cac16', class: "popover-header" }, h("div", { key: 'a3ac8f2b6610090d5947dc299a9ce62d85265e86', class: "popover-header__content" }, h("span", { key: 'ed1cbb198c54ffba2c7ce22085cb43648d6b7f3d', class: "popover-header__icon" }, h("slot", { key: 'b3049ec3dc2ad99037a662553103facad38af4f9', name: "header-icon" })), h("span", { key: '591ccd19d65f3a485062be8e5e4acf57a3ff4539', class: "popover-header__title" }, h("slot", { key: '9b65d0180f3728906302426f6436034e80f1c783', name: "header-title" }))), this.closable && (h("bds-button", { key: '5e13390200231b50e4a9c38fb22c623bf28d105f', class: "popover-header__close", size: BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, h("em", { key: '20ea602f48d1f27ee0b10c929a4a2194304a35b2', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (h("div", { key: '551089a9b038a27277398dac47b8e72b2f3d9286', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("div", { key: '17a6a939f83dd930aafc416b48da124faa27a4e0', class: "popover-content", tabIndex: -1, part: "popover-content" }, h("slot", { key: 'ab7cfa10649128cc387a54cf052429425696269a' })), this.footer && (h("div", { key: '7cf9fa351928fd823a49541764cdd67bd2d57def', class: "popover-footer", onClick: (e) => e.stopPropagation() }, h("slot", { key: 'b6a20d06d0964f6dea85afdd40a46a6fb737bbac', name: "footer-helper" }), h("slot", { key: '379b2b43a1e937775149e686686da9e4554dd962', 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.
  *
@@ -54,8 +56,8 @@ export class BdsTooltip extends Mixin(anchoredMixin) {
      */
     get options() {
         return {
-            placement: this.floatingOptions.placement ?? 'bottom',
-            offset: this.floatingOptions.offset ?? 8,
+            placement: this.floatingOptions.placement ?? 'top',
+            offset: getOffset(this.floatingOptions?.hideArrow, this.floatingOptions.offset, OFFSET),
             arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
             strategy: 'fixed',
         };
@@ -82,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.
@@ -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: 'add483ba4072484f1f6d18271ecb74c46a449f41', class: "tooltip" }, h("div", { key: 'ede2a5f6230a4baacb36c24dd57be73fda63e438', id: "tooltip-content", part: "tooltip-content", class: classes, popover: "manual", role: "tooltip", "aria-hidden": this.isVisible ? 'false' : 'true', "data-placement": this.getPlacement, "data-multiline": this.multiline, "data-hidearrow": this.canShowArrow, ref: el => (this.floatingContent = el) }, this.canShowArrow && (h("div", { key: 'c8580171bc2c01eaca84aa1a029dce6f429359f8', class: "tooltip-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '10ead9bb5007414959d4aeacd8c0c1c52223f70d' }))));
     }
     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

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