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

package/dist/collection/components/helpers/{bds-divider.css → bds-divider/bds-divider.css}

@@ -14,23 +14,31 @@
 * 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-divider {
+  /**
+   * @prop --bds-divider-color: Custom color for the divider. Default is $boreal-ui-default-lighter.
+    * @prop --bds-divider-gap: Custom gap between dividers. Default is $boreal-spacing-3xs.
+   */
+}
 bds-divider[orientation=vertical] {
-  display: inline-block;
-  height: 100%;
+  display: flex;
+  align-self: stretch;
+  margin-inline: var(--bds-divider-gap, 0px);
 }
 bds-divider[orientation=horizontal] {
   display: block;
   width: 100%;
+  margin-block: var(--bds-divider-gap, 0px);
 }
 
 .bds-divider {
-  background-color: var(--boreal-ui-default-lighter);
+  background-color: var(--bds-divider-color, var(--boreal-ui-default-lighter));
 }
 .bds-divider--horizontal {
   width: 100%;
   height: var(--boreal-spacing-4xs);
 }
 .bds-divider--vertical {
+  flex: 1;
   width: var(--boreal-spacing-4xs);
-  height: 100%;
 }

package/dist/collection/components/helpers/{bds-divider.js → bds-divider/bds-divider.js}

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { DIVIDER_ORIENTATIONS } from "./types/enum";
-import { validatePropValue } from "../../utils/index";
+import { validatePropValue } from "../../../utils/index";
 /**
  * Divider component for creating visual separators between content sections.
  *
@@ -34,7 +34,7 @@ export class BdsDivider {
         this.checkPropValues();
     }
     render() {
-        return h("div", { key: 'd34f930e98129a75ca706f4695e40e577d5a12f6', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+        return h("div", { key: 'd89008b1a2cddddb925ee1e6e7c4cb7110ab6bd1', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
     }
     static get is() { return "bds-divider"; }
     static get originalStyleUrls() {
@@ -59,7 +59,7 @@ export class BdsDivider {
                         "IDivider": {
                             "location": "import",
                             "path": "./types/IDivider",
-                            "id": "src/components/helpers/types/IDivider.ts::IDivider",
+                            "id": "src/components/helpers/bds-divider/types/IDivider.ts::IDivider",
                             "referenceLocation": "IDivider"
                         }
                     }

package/dist/collection/components/helpers/bds-divider/types/IDivider.js

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

package/dist/collection/components/helpers/bds-divider/types/types.js

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

package/dist/collection/components/images-icons/bds-avatar/bds-avatar.js

@@ -87,7 +87,7 @@ export class BdsAvatar {
         const avatarAriaLabel = this.normalizedUsername.length > 0 ? `User name: ${this.normalizedUsername}` : 'User name';
         const showIcon = this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.ICON;
         const showName = this.normalizedUsername && (this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.NAME);
-        return (h(Host, { key: '8c3cc5b02c02997a8aad688ae043522d07bc3239', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '357ec2fbb0f4ad6c9b3fa54da78c55eab0a4f7f7', class: "bds-avatar__container" }, showIcon && (h("div", { key: '2dbc77e00bedf5e67f08337dad76eeca9fcffb28', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '6bbd987437cf03bc573363d86092349da5d12521', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: '05e0480670c5ba15b8518325910a661aefb32da8', class: "bds-avatar__name" }, this.normalizedUsername))));
+        return (h(Host, { key: '26a86e31e803b5c77f09fda1d9f228e3641f0a53', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '906e9708ac61caa1cbf21a9e8019aadaea010970', class: "bds-avatar__container" }, showIcon && (h("div", { key: 'b2962d2a61a5a6561f5cf7f817c3ca270ba42671', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '44b5aa4c4ea78479b83b2f39121ae767d0304182', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: 'e3b5af88572994fbecfb0bff46d4f6b417c74d16', class: "bds-avatar__name" }, this.normalizedUsername))));
     }
     static get is() { return "bds-avatar"; }
     static get originalStyleUrls() {

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

@@ -20,7 +20,7 @@ export class BdsGrid {
         this.checkPropValues();
     }
     render() {
-        return (h(Host, { key: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+        return (h(Host, { key: '52672cc265a59d6556eb4ae677c650b19696dbdc', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, h("slot", { key: '6c0f0b89777a754a91d273838940cd8721b79d5c' })));
     }
     static get is() { return "bds-grid"; }
     static get originalStyleUrls() {

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

@@ -48,7 +48,7 @@ export class BdsGridItem {
         return styles;
     }
     render() {
-        return (h(Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+        return (h(Host, { key: 'e16ec21f8fcabbf3091ed3469a120aaff37f4274', style: this.getHostStyles() }, h("slot", { key: 'b1fa7e071660a4f4f50d9fd31ee9646069678d10' })));
     }
     static get is() { return "bds-grid-item"; }
     static get originalStyleUrls() {

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: '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: '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: '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.js

@@ -285,7 +285,7 @@ export class BdsPopover extends Mixin(anchoredMixin) {
         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: '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-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: '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/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

@@ -148,7 +148,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: 'd29b535edeb7ede877c979ea812eb6c273affc0d', class: `bds-typography ${isDisabledState ? 'bds-typography--disabled-cursor' : ''}` }, h(TagName, { key: '3a36a1c47026a20d9c95e4c2d38e92caaa89b072', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '8a0ccd7824ac358e937dd6e2fb1c3eb592e27721' }), this.required && required && (h("em", { key: '5ce4cc221efcf9d5a71bbc39dbc449a3a29c16a6', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && (h("span", { key: '33dcca730b5a484aac8f6ddda383f7adb7dcee95', class: "bds-typography__info" }, h("span", { key: 'ff08b5e744d9584cff3b69f5eaa74238ad364e19', class: "bds-typography__info-icon bds-icon-info-circle", "aria-label": this.tooltipText }), h("bds-tooltip", { key: 'a88a158668a40ee3ff00ddeb4da496115e22558d' }, this.tooltipText))))));
     }
     static get is() { return "bds-typography"; }
     static get originalStyleUrls() {

package/dist/collection/mixins/anchored.mixin.js

@@ -170,9 +170,9 @@ export const anchoredMixin = (Base) => {
          * @param hideFn - Bound hide function
          */
         handleKeydown(e, showFn, hideFn) {
-            if (e.key === KEYBOARD.Enter.key || e.key === ' ')
+            if (e.key === KEYBOARD.Enter || e.key === KEYBOARD.Space)
                 showFn();
-            if (e.key === KEYBOARD.Escape.key)
+            if (e.key === KEYBOARD.Escape)
                 hideFn();
         }
         /**

package/dist/collection/mixins/links.mixin.js

@@ -92,8 +92,7 @@ export const WithLinks = (Base) => {
         handleLinkKeyDown(event) {
             if (!this.isLink)
                 return;
-            if (this.el.tagName.toLowerCase() !== 'a' &&
-                (event.key === KEYBOARD.Enter.key || event.key === KEYBOARD.Space.key)) {
+            if (this.el.tagName.toLowerCase() !== 'a' && (event.key === KEYBOARD.Enter || event.key === KEYBOARD.Space)) {
                 event.preventDefault();
                 this.handleLinkClick(new MouseEvent('click', { bubbles: true, cancelable: true }));
             }

package/dist/collection/mixins/menu-behavior.mixin.js

@@ -10,7 +10,6 @@ import { handleMenuKeyNavigation, resolveMenuItemRole, resolveAriaSelected, reso
  * - Computation of aria-selected and tabIndex attributes for accessibility.
  * - A method to handle keyboard navigation (Arrow keys, Enter, Space) within the menu context.
  *
- *
  * @typeParam B - The base constructor type.
  * @param {B} Base - The base component class to be extended.
  * @returns {MenuBehaviorMixin} - A class with injected menu behaviors.
@@ -57,12 +56,19 @@ export const MenuItemBehavior = (Base) => {
             this.selected = false;
             this.activeItem = false;
         }
+        /**
+         * Finds the closest parent element with a role of 'menu' or 'listbox'.
+         * @returns {HTMLElement | null} - The parent menu or listbox element, or null if not found.
+         */
+        get parent() {
+            return this.el.closest('[role="menu"], [role="listbox"]');
+        }
         /**
          * Detects the ARIA role of the nearest parent menu or listbox.
          * @returns {MenuRole | null} - 'menu', 'listbox', or null if not found.
          */
         get parentRole() {
-            const parent = this.el.closest('[role="menu"], [role="listbox"]');
+            const parent = this.parent;
             return parent !== null ? parent.getAttribute('role') : null;
         }
         /**
@@ -85,7 +91,7 @@ export const MenuItemBehavior = (Base) => {
          * @returns {number} 0 for focusable menu items, -1 otherwise.
          */
         get itemTabIndex() {
-            return resolveTabIndex(this.menuItemRole, this.disabled, this.selected, this.activeItem);
+            return resolveTabIndex(this.menuItemRole, this.disabled, this.activeItem);
         }
         /**
          * Processes keyboard events for arrow navigation and activation.
@@ -97,11 +103,11 @@ export const MenuItemBehavior = (Base) => {
          */
         handleKeyDownLogic(e, onActivate) {
             preventNavigationKeys(e);
-            if (e.key === KEYBOARD.Enter.key || e.key === KEYBOARD.Space.key) {
+            if (e.key === KEYBOARD.Enter || e.key === KEYBOARD.Space) {
                 onActivate();
                 return;
             }
-            const parent = this.el.closest("[role='menu'], [role='listbox']");
+            const parent = this.parent;
             if (parent === null)
                 return;
             const items = Array.from(parent.querySelectorAll(`${this.el.tagName.toLocaleLowerCase()}:not([disabled]):not([variant="label"])`));

package/dist/collection/types/index.js

@@ -3,6 +3,8 @@ export * from './form';
 export * from './size';
 export * from './states';
 export * from './stylesMap';
+export * from './orientation';
 export * from './IFormProps';
 export * from './menu';
 export * from './links';
+export * from './orientation';

package/dist/collection/types/orientation.js

@@ -0,0 +1,4 @@
+export const ORIENTATIONS = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};

package/dist/collection/utils/constants/common/Keys.js

@@ -1,28 +1,14 @@
 /**
- * Default keyboard keys.
- * Add more keys to the `KEYBOARD` object to add more keyboard shortcuts.
- * This prevents key name typing errors and provides a centralized definition of the keys available for implementation.
- * Can use this page to find the keycodes: https://keycode.info/
+ * Centralised keyboard key values used across components.
+ * Use these constants instead of raw string literals to prevent typos and keep key references consistent.
+ * Each value matches the `KeyboardEvent.key` string as defined by the W3C UI Events specification.
  */
 export const KEYBOARD = {
-    Enter: {
-        key: 'Enter',
-        code: 13,
-    },
-    Escape: {
-        key: 'Escape',
-        code: 27,
-    },
-    Space: {
-        key: ' ',
-        code: 32,
-    },
-    ArrowUp: {
-        key: 'ArrowUp',
-        code: 38,
-    },
-    ArrowDown: {
-        key: 'ArrowDown',
-        code: 40,
-    },
+    Enter: 'Enter',
+    Escape: 'Escape',
+    Space: ' ',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
 };

package/dist/collection/utils/menu/menu-item.utils.js

@@ -25,20 +25,18 @@ export function resolveAriaSelected(role, selected) {
  * Resolves the tabIndex attribute for keyboard navigation.
  * @param {MenuItemRole} role - The role of the item.
  * @param {boolean} disabled - Whether the item is currently disabled.
- * @param {boolean} selected - Whether the item is currently selected.
  * @param {boolean} active - Whether the item is currently active.
  * @returns {number} - Returns 0 for focusable menu items, or -1 for disabled/options.
  * @example
  * const index = resolveTabIndex('menuitem', false); // returns 0
  * const indexDisabled = resolveTabIndex('menuitem', true); // returns -1
  */
-export function resolveTabIndex(role, disabled, selected, active) {
+export function resolveTabIndex(role, disabled, active) {
     if (disabled)
         return -1;
-    if (role === 'option')
-        return selected || active ? 0 : -1;
-    if (role === 'menuitem')
+    if (role === 'option' || role === 'menuitem') {
         return active ? 0 : -1;
+    }
     return -1;
 }
 /**
@@ -46,6 +44,7 @@ export function resolveTabIndex(role, disabled, selected, active) {
  * @param {KeyboardEvent} event - The keyboard event object from the listener.
  * @param {HTMLElement[]} items - An array of focusable HTML elements within the menu.
  * @param {number} currentIndex - The index of the currently focused item.
+ * @param {boolean} selected - The current selection state of the item (used for activation logic).
  * @returns {void}
  * @example
  * handleMenuKeyNavigation(event, menuItems, 2);
@@ -55,16 +54,18 @@ export function handleMenuKeyNavigation(event, items, currentIndex) {
         return;
     let nextIndex = -1;
     switch (event.key) {
-        case KEYBOARD.ArrowDown.key:
+        case KEYBOARD.ArrowDown:
             nextIndex = (currentIndex + 1) % items.length;
             break;
-        case KEYBOARD.ArrowUp.key:
+        case KEYBOARD.ArrowUp:
             nextIndex = (currentIndex - 1 + items.length) % items.length;
             break;
         default:
             return;
     }
+    items.forEach(item => item.removeAttribute('active-item'));
     items[nextIndex].focus();
+    items[nextIndex].setAttribute('active-item', '');
 }
 /** Prevents default browser behavior for specific navigation keys.
  * @param {KeyboardEvent} e - The keyboard event to evaluate.
@@ -74,7 +75,7 @@ export function handleMenuKeyNavigation(event, items, currentIndex) {
  * preventNavigationKeys(event);
  */
 export function preventNavigationKeys(e) {
-    const navigationKeys = [KEYBOARD.ArrowDown.key, KEYBOARD.ArrowUp.key, KEYBOARD.Enter.key, KEYBOARD.Space.key];
+    const navigationKeys = [KEYBOARD.ArrowDown, KEYBOARD.ArrowUp, KEYBOARD.Enter, KEYBOARD.Space];
     if (navigationKeys.includes(e.key)) {
         e.preventDefault();
     }

package/dist/collection/utils/testing/helpers.js

@@ -14,3 +14,13 @@ export function assertExists(condition, message) {
         throw new Error(message);
     }
 }
+/**
+ * Dispatches a `keydown` event on the given element.
+ *
+ * @param el The target element.
+ * @param key The `KeyboardEvent.key` value to dispatch.
+ * @param init Optional overrides merged on top of the defaults (`bubbles: true`, `cancelable: true`).
+ */
+export function dispatchKey(el, key, init = {}) {
+    el.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, cancelable: true, ...init, key }));
+}

package/dist/esm/Keys-DlYG-OVB.js

@@ -0,0 +1,16 @@
+/**
+ * Centralised keyboard key values used across components.
+ * Use these constants instead of raw string literals to prevent typos and keep key references consistent.
+ * Each value matches the `KeyboardEvent.key` string as defined by the W3C UI Events specification.
+ */
+const KEYBOARD = {
+    Enter: 'Enter',
+    Escape: 'Escape',
+    Space: ' ',
+    ArrowUp: 'ArrowUp',
+    ArrowDown: 'ArrowDown',
+    ArrowLeft: 'ArrowLeft',
+    ArrowRight: 'ArrowRight',
+};
+
+export { KEYBOARD as K };

package/dist/esm/Logger-iq2UuV7c.js

@@ -0,0 +1,49 @@
+/**
+ * Default implementation of the logger service.
+ * This class is responsible for logging errors, warnings and messages to the DevTools console.
+ */
+class Logger {
+    /**
+     * Throw a normalized error with the component name and the message.
+     * @param component Is the name of the component that is throwing the error.
+     * @param message Is the message of the error.
+     * @throws Error with the component name and the message.
+     * @example
+     * const logger = new Logger();
+     * logger.error('MyComponent', 'This is an error');
+     * // Throws an error with the message "[MyComponent]: This is an error"
+     */
+    error(component, message) {
+        throw new Error(`[${component}]: ${message}`);
+    }
+    /**
+     * Log a warning with the component name and the message.
+     * @param component Is the name of the component that is throwing the warning.
+     * @param message Is the message of the warning.
+     * @example
+     * const logger = new Logger();
+     * logger.warn('MyComponent', 'This is a warning');
+     * // Logs a warning with the message "[MyComponent]: This is a warning"
+     */
+    warn(component, message) {
+        console.warn(`[${component}]: ${message}`);
+    }
+    /**
+     * Log a message with the component name and the message.
+     * @param component Is the name of the component that is logging the message.
+     * @param message Is the message of the message.
+     * @example
+     * const logger = new Logger();
+     * logger.log('MyComponent', 'This is a message');
+     * // Logs a message with the message "[MyComponent]: This is a message"
+     * @example
+     * const logger = new Logger();
+     * logger.log('MyComponent', 'This is a message');
+     * // Logs a message with the message "[MyComponent]: This is a message"
+     */
+    log(component, message) {
+        console.log(`[${component}]: ${message}`);
+    }
+}
+
+export { Logger as L };

package/dist/esm/{attributes-CaHOghy5.js → attributes-U9yfbs7i.js}

@@ -73,6 +73,9 @@ const ariaAttributes = [
 ];
 const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter(attr => !ignoreList.includes(attr));
+    }
     return inheritAttributes(el, attributesToInherit);
 };
 

package/dist/esm/bds-avatar.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
-import { a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
+import { a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
 import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
 
 const AVATAR_VARIANT = {
@@ -78,7 +78,7 @@ const BdsAvatar = class {
         const avatarAriaLabel = this.normalizedUsername.length > 0 ? `User name: ${this.normalizedUsername}` : 'User name';
         const showIcon = this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.ICON;
         const showName = this.normalizedUsername && (this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.NAME);
-        return (h(Host, { key: '8c3cc5b02c02997a8aad688ae043522d07bc3239', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '357ec2fbb0f4ad6c9b3fa54da78c55eab0a4f7f7', class: "bds-avatar__container" }, showIcon && (h("div", { key: '2dbc77e00bedf5e67f08337dad76eeca9fcffb28', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '6bbd987437cf03bc573363d86092349da5d12521', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: '05e0480670c5ba15b8518325910a661aefb32da8', class: "bds-avatar__name" }, this.normalizedUsername))));
+        return (h(Host, { key: '26a86e31e803b5c77f09fda1d9f228e3641f0a53', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '906e9708ac61caa1cbf21a9e8019aadaea010970', class: "bds-avatar__container" }, showIcon && (h("div", { key: 'b2962d2a61a5a6561f5cf7f817c3ca270ba42671', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '44b5aa4c4ea78479b83b2f39121ae767d0304182', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: 'e3b5af88572994fbecfb0bff46d4f6b417c74d16', class: "bds-avatar__name" }, this.normalizedUsername))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bds-badge.entry.js

@@ -34,7 +34,7 @@ const BdsBadge = class {
         };
     }
     render() {
-        return (h(Host, { key: 'fd04d8986fd170056769871a07f838c3cf200108', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0186c80b8fbce04a7c96949ca39ecf0319abf352', name: "icon" }), h("slot", { key: 'd79b91a4c5b93280c977dce033e0e05fad2c7524' })));
+        return (h(Host, { key: 'f686ff59037a77660bc82262b9374193dface206', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '5089ac4144f7fdd1023ee3561010859b6b96ef3b', name: "icon" }), h("slot", { key: '44addf6e20aa27f1ed3df4ab728b5a0a37cc2f20' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/bds-banner.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, g as getElement } from './index-BqJlOB6b.js';
 import { S as STATUS_VARIANT } from './states-Bfazyxqi.js';
-import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes-CaHOghy5.js';
+import { i as inheritAttributes, a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
 
 const bdsBannerCss = () => `@charset "UTF-8";.bds-banner{position:relative;display:-ms-flexbox;display:flex;border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-info-base);border-radius:var(--boreal-radius-xs);border-left:0;font-family:var(--boreal-typography-font-family-primary);height:100%;-webkit-transition:opacity 0.3s ease-out;transition:opacity 0.3s ease-out}.bds-banner__vertical-line{width:var(--boreal-spacing-2xs);border-top-left-radius:var(--boreal-radius-xs);border-bottom-left-radius:var(--boreal-radius-xs);background-color:var(--boreal-stroke-info-base)}.bds-banner__container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;gap:var(--boreal-spacing-xs);padding:var(--boreal-spacing-s)}.bds-banner__content{width:100%}.bds-banner__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md)}.bds-banner__body{padding-top:var(--boreal-spacing-2xs);font-size:var(--boreal-typography-font-size-sm);line-height:var(--boreal-typography-line-height-sm)}.bds-banner__actions{padding-top:var(--boreal-spacing-s);min-height:0px}.bds-banner__actions:empty{display:none}.bds-banner__status-icon{font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);margin-top:var(--boreal-spacing-3xs)}.bds-banner__close-icon{background:none;border:none;-ms-flex-item-align:start;align-self:start;font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md);color:var(--boreal-neutral-base);cursor:pointer}.bds-banner--info{border-color:var(--boreal-stroke-info-base);background-color:var(--boreal-ui-info-lighter)}.bds-banner--info .bds-banner__vertical-line{background-color:var(--boreal-stroke-info-base)}.bds-banner--info .bds-banner__status-icon{color:var(--boreal-stroke-info-base)}.bds-banner--success{border-color:var(--boreal-stroke-success-base);background-color:var(--boreal-ui-success-lighter)}.bds-banner--success .bds-banner__vertical-line{background-color:var(--boreal-stroke-success-base)}.bds-banner--success .bds-banner__status-icon{color:var(--boreal-stroke-success-base)}.bds-banner--warning{border-color:var(--boreal-stroke-warning);background-color:var(--boreal-ui-warning-lighter)}.bds-banner--warning .bds-banner__vertical-line{background-color:var(--boreal-stroke-warning)}.bds-banner--warning .bds-banner__status-icon{color:var(--boreal-stroke-warning)}.bds-banner--danger{border-color:var(--boreal-stroke-danger-base);background-color:var(--boreal-ui-danger-lighter)}.bds-banner--danger .bds-banner__vertical-line{background-color:var(--boreal-stroke-danger-base)}.bds-banner--danger .bds-banner__status-icon{color:var(--boreal-stroke-danger-base)}.bds-banner--closing{opacity:0}.bds-banner--hidden{display:none}`;
 
@@ -107,7 +107,7 @@ const BdsBanner = class {
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { key: '1a07d4c50cb16abf16a6202fc0a6453028030c94', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '2fa91a3e46f6660cb80302bc56619c107f3cf1a9' }, h("div", { key: '406c8ce24b6c8d9467f83baea3c521ef823b7ff6', class: "bds-banner__vertical-line" }), h("div", { key: '1a2c84c6480397e179a212056e0d9896a4ffcd5c', class: "bds-banner__container" }, h("div", { key: 'c3a259dae39176720f74fb4961b01166956f8e5c', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '6d24dc0d611b85a0c9f524f29948552607fc124f', "aria-hidden": "true", class: iconName })), h("div", { key: '6c4af02b7d783417cd016c81214ae4ae9a9040ff', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '74d4b78b0e6a058c48d2681b0d49742266f6653d', class: "bds-banner__title" }, h("slot", { key: '65baf563140619dd68ba6da5b1a2e61acfae61e6', name: "title" })), h("div", { key: 'a24a1af35cf217bcdadff0a9c2d3bbef8d21e232', class: "bds-banner__body" }, h("slot", { key: '5ea6dd31fbcf8eb9fd06426a2e98e36c537857b1' })), h("div", { key: '41cc79e73c212e381f8bfca997d62710f94e6ba4', class: "bds-banner__actions" }, h("slot", { key: '0266cc63e42d35a7fcbb836dfe7d11c47f192321', name: "actions" }))), this.closable && closeIcon)))));
+        return (h(Host, { key: 'e5ece2606d360add80831cb5cff99c07bb6fe9a6', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '1f25dabb048e75db7f9b155ed660ee3c07b878e7' }, h("div", { key: '363d11782e11ab9e34c30981653da02d62753611', class: "bds-banner__vertical-line" }), h("div", { key: '256f0e83e848d7e50b851524364314ac8a15f195', class: "bds-banner__container" }, h("div", { key: '3f16aa2ab24f0621e754276032dea90ba7a2fcae', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '1ee1cd86ac8e6fe63d77ab815f3467623e3701bf', "aria-hidden": "true", class: iconName })), h("div", { key: 'b56334ec515aa5036143a21e17ccbab0284edd52', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '454a4dd729fa18675c9db2a8101732688b15d4d7', class: "bds-banner__title" }, h("slot", { key: '06d51ebe3e862210035d98b2ecde35ba9872309f', name: "title" })), h("div", { key: '773524e70efc9e2412c3ca71913cc1f4da80a493', class: "bds-banner__body" }, h("slot", { key: '483f4358227e080db9ee884e6462743042a17bfe' })), h("div", { key: '6180025c2b07adc050d716269f76783f3f8164d2', class: "bds-banner__actions" }, h("slot", { key: '4e45498d447a003859421f98d884f289fc18e084', name: "actions" }))), this.closable && closeIcon)))));
     }
     get el() { return getElement(this); }
 };