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

package/dist/esm/bds-list-menu-item.entry.js

@@ -0,0 +1,466 @@
+import { M as Mixin, r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { C as COMPONENT_STATES } from './states-Bfazyxqi.js';
+import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+import { K as KEYBOARD } from './Keys-CzYQb3pP.js';
+
+/**
+ * Resolves the appropriate ARIA role for a menu item.
+ * @param {MenuRole} role - The role of the parent menu container ('menu' or 'listbox').
+ * @returns {MenuItemRole} - Returns 'menuitem' if parent is 'menu', otherwise 'option'.
+ * @example
+ * const itemRole = resolveMenuItemRole('menu'); // returns 'menuitem'
+ */
+function resolveMenuItemRole(role) {
+    return role === 'menu' ? 'menuitem' : 'option';
+}
+/**
+ * Determines the aria-selected value based on the item's role and state.
+ * @param {MenuItemRole} role - The role of the item ('menuitem' or 'option').
+ * @param {boolean} selected - The current selection state of the item.
+ * @returns {string | null} - Returns the string representation of the boolean if role is 'option', otherwise null.
+ * @example
+ * const attr = resolveAriaSelected('option', true); // returns 'true'
+ * const attrNull = resolveAriaSelected('menuitem', true); // returns null
+ */
+function resolveAriaSelected(role, selected) {
+    return role === 'option' ? String(selected) : null;
+}
+/**
+ * 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
+ */
+function resolveTabIndex(role, disabled, selected, active) {
+    if (disabled)
+        return -1;
+    if (role === 'option')
+        return selected || active ? 0 : -1;
+    if (role === 'menuitem')
+        return active ? 0 : -1;
+    return -1;
+}
+/**
+ * Manages focus and activation through keyboard events.
+ * @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.
+ * @returns {void}
+ * @example
+ * handleMenuKeyNavigation(event, menuItems, 2);
+ */
+function handleMenuKeyNavigation(event, items, currentIndex) {
+    if (items.length === 0 || currentIndex === -1)
+        return;
+    let nextIndex = -1;
+    switch (event.key) {
+        case KEYBOARD.ArrowDown.key:
+            nextIndex = (currentIndex + 1) % items.length;
+            break;
+        case KEYBOARD.ArrowUp.key:
+            nextIndex = (currentIndex - 1 + items.length) % items.length;
+            break;
+        default:
+            return;
+    }
+    items[nextIndex].focus();
+}
+/** Prevents default browser behavior for specific navigation keys.
+ * @param {KeyboardEvent} e - The keyboard event to evaluate.
+ * @returns {void}
+ * @example
+ * // Inside a keydown listener:
+ * preventNavigationKeys(event);
+ */
+function preventNavigationKeys(e) {
+    const navigationKeys = [KEYBOARD.ArrowDown.key, KEYBOARD.ArrowUp.key, KEYBOARD.Enter.key, KEYBOARD.Space.key];
+    if (navigationKeys.includes(e.key)) {
+        e.preventDefault();
+    }
+}
+
+/**
+ * A Mixin that provides menu item behaviors, including ARIA roles,
+ * focus management, and keyboard navigation logic.
+ * This mixin is designed to be used with Stencil components that represent items within a menu or listbox,
+ * allowing them to automatically adapt their behavior based on the context of their parent container.
+ *
+ * The mixin includes:
+ * - Dynamic ARIA role resolution based on the nearest parent menu or listbox.
+ * - 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.
+ *
+ * @example
+ * ```tsx
+ * import { Component, h } from '@stencil/core';
+ * import { MenuItemBehavior } from '@/mixins/menu-behavior.mixin';
+ *
+ * @Component({
+ *  tag: 'my-menu-item',
+ *  styleUrl: 'my-menu-item.scss',
+ * })
+ * export class MyMenuItem extends Mixin(MenuItemBehavior) {
+ *   @Element() el!: HTMLElement;
+ *   @Prop() disabled: boolean = false;
+ *   @Prop() selected: boolean = false;
+ *
+ *   private handleKeyDown = (e: KeyboardEvent) => {
+ *     if (this.disabled) return;
+ *     this.handleKeyDownLogic(e, () => this.handleSelection());
+ *   };
+ *
+ *  render() {
+ *   return (
+ *    <Host
+ *      role={this.menuItemRole}
+ *      aria-selected={this.ariaSelected}
+ *      tabIndex={ this.itemTabIndex}
+ *      onKeyDown={this.handleKeyDown} >
+ *      <slot />
+ *    </Host>
+ *   );
+ *  }
+ * } ```
+ *
+ *
+ */
+const MenuItemBehavior = (Base) => {
+    class MenuBehaviorMixin extends Base {
+        constructor() {
+            super(...arguments);
+            this.disabled = false;
+            this.selected = false;
+            this.activeItem = false;
+        }
+        /**
+         * 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"]');
+            return parent !== null ? parent.getAttribute('role') : null;
+        }
+        /**
+         * Resolves the specific item role ('menuitem' or 'option').
+         * Defaults to 'menuitem' if no parent is detected.
+         * @returns {MenuItemRole}
+         */
+        get menuItemRole() {
+            return resolveMenuItemRole(this.parentRole || 'menu');
+        }
+        /**
+         * Returns the 'aria-selected' value as a string for listbox options.
+         * @returns {string | null}
+         */
+        get ariaSelected() {
+            return resolveAriaSelected(this.menuItemRole, this.selected);
+        }
+        /**
+         * Calculates the tabIndex for the item.
+         * @returns {number} 0 for focusable menu items, -1 otherwise.
+         */
+        get itemTabIndex() {
+            return resolveTabIndex(this.menuItemRole, this.disabled, this.selected, this.activeItem);
+        }
+        /**
+         * Processes keyboard events for arrow navigation and activation.
+         * @param {KeyboardEvent} e - The native keyboard event.
+         * @param {() => void} onActivate - Function to execute when Enter or Space is pressed.
+         * @example
+         * // Inside a component's keydown listener:
+         * this.handleKeyDownLogic(event, () => this.emitSelection());
+         */
+        handleKeyDownLogic(e, onActivate) {
+            preventNavigationKeys(e);
+            if (e.key === KEYBOARD.Enter.key || e.key === KEYBOARD.Space.key) {
+                onActivate();
+                return;
+            }
+            const parent = this.el.closest("[role='menu'], [role='listbox']");
+            if (parent === null)
+                return;
+            const items = Array.from(parent.querySelectorAll(`${this.el.tagName.toLocaleLowerCase()}:not([disabled]):not([variant="label"])`));
+            const currentIndex = items.indexOf(this.el);
+            handleMenuKeyNavigation(e, items, currentIndex);
+        }
+    }
+    return MenuBehaviorMixin;
+};
+
+/**
+ * Creates a mixin that adds link-related properties and behaviors to a base class.
+ * It provides computed attributes for links, handles keyboard interactions, and sanitizes URLs to ensure security.
+ * It allows components to easily handle link attributes and execute link events.
+ *
+ * This mixin includes:
+ *  - `href`: The URL the link points to.
+ *  - `newTab`: Whether the link should open in a new tab.
+ *  - `downloadable`: Whether the link should be treated as a download.
+ *  - `filename`: The filename to use when downloading.
+ *  - `getLinkAttributes`: A computed property that returns the appropriate attributes for the link based on its state and props.
+ *  - `handleLinkKeyDown`: A method to handle keyboard interactions for accessibility.
+ *  - `handleLinkClick`: A method to manage click behavior, including external links and downloads.
+ *  - `sanitizeUrl`: A utility method to sanitize URLs and prevent XSS vulnerabilities.
+ *
+ * @typeParam T - The base constructor type to extend.
+ * @param {T} Base - The base component class to be extended.
+ * @returns {WithLinks} - A class with injected link behaviors.
+ *
+ * @example
+ * ```tsx
+ *  import { Component, h } from '@stencil/core';
+ *  import { WithLinks } from '@/mixins/links.mixin';
+ *
+ * @Component({
+ *  tag: 'my-link',
+ *  styleUrl: 'my-link.scss',
+ *  })
+ *  class MyLink extends Mixin(WithLinks) {
+ *    @Element() el!: HTMLElement;
+ *    @Prop() href: string = '';
+ *    @Prop() newTab: boolean = false;
+ *    @Prop() downloadable: boolean = false;
+ *    @Prop() filename: string = '';
+ *    @Prop() disabled: boolean = false;
+ *
+ *    private handleKeyDown = (e: KeyboardEvent) => {
+ *      if (this.disabled) return;
+ *      this.handleLinkKeyDown(e);
+ *    };
+ *
+ *   render() {
+ *    return (
+ *      <Host
+ *      {...this.getLinkAttributes}
+ *      onKeyDown={this.handleKeyDown} >
+ *      <slot />
+ *      </Host>
+ *    );
+ *    }
+ * } ```
+ *
+ */
+const WithLinks = (Base) => {
+    class WithLinks extends Base {
+        constructor() {
+            super(...arguments);
+            this.href = '';
+            this.newTab = false;
+            this.download = '';
+        }
+        get isLink() {
+            return this.href !== '' || this.download !== '';
+        }
+        /**
+         * Computes the appropriate link attributes based on the component's props and state.
+         * It handles external links, new tab behavior, and download attributes while ensuring accessibility.
+         * @returns {LinksAttrs} - The computed link attributes.
+         * */
+        get linkAttributes() {
+            const attributes = {};
+            if (!this.isLink)
+                return attributes;
+            const sanitizedHref = this.sanitizeUrl(this.href);
+            attributes.href = sanitizedHref;
+            attributes.target = this.newTab ? '_blank' : '_self';
+            attributes.rel =
+                this._isExternalLink(sanitizedHref) || this.newTab || this.download !== '' ? 'noopener noreferrer' : '';
+            attributes.download = this.download !== '' ? this.download : undefined;
+            if (this.el.tagName.toLowerCase() !== 'a') {
+                attributes.role = 'link';
+                attributes.tabindex = '0';
+            }
+            return attributes;
+        }
+        _isExternalLink(url) {
+            const isExternal = /^https?:\/\//.test(url) && !url.includes(window.location.hostname);
+            return isExternal;
+        }
+        /** Keydown handler to allow keyboard interaction with the link */
+        handleLinkKeyDown(event) {
+            if (!this.isLink)
+                return;
+            if (this.el.tagName.toLowerCase() !== 'a' &&
+                (event.key === KEYBOARD.Enter.key || event.key === KEYBOARD.Space.key)) {
+                event.preventDefault();
+                this.handleLinkClick(new MouseEvent('click', { bubbles: true, cancelable: true }));
+            }
+        }
+        /** Click handler to manage link behavior, including external links and downloads */
+        handleLinkClick(event) {
+            if (!this.isLink) {
+                event.preventDefault();
+                return;
+            }
+            const attributes = this.linkAttributes;
+            if (attributes.download !== '' && attributes.download !== undefined) {
+                event.preventDefault();
+                const logger = document.createElement('a');
+                logger.href = attributes.download || '';
+                logger.download = attributes.download;
+                logger.style.display = 'none';
+                document.body.appendChild(logger);
+                console.log('Initiating download:', logger.href);
+                logger.click();
+                document.body.removeChild(logger);
+            }
+            if (this.el.tagName.toLowerCase() !== 'a') {
+                if (attributes.target === '_blank') {
+                    window.open(attributes.href, '_blank', attributes.rel);
+                }
+                else {
+                    window.location.href = attributes.href || '';
+                }
+                event.preventDefault();
+            }
+        }
+        /** Sanitizes the URL to prevent XSS vulnerabilities. It removes dangerous protocols and ensures valid URLs.
+         * @param {string} url - The URL to sanitize.
+         * @returns {string} - The sanitized URL, or an empty string if the URL is deemed unsafe.
+         * @example
+         * const safeUrl = sanitizeUrl('https://example.com'); // returns 'https://example.com'
+         * const unsafeUrl = sanitizeUrl('javascript:alert(1)'); // returns ''
+         */
+        sanitizeUrl(url) {
+            const sanitized = url.trim().toLowerCase();
+            if (sanitized.startsWith('javascript:') || sanitized.startsWith('data:') || sanitized.includes('\0')) {
+                return '';
+            }
+            if (!sanitized.startsWith('http://') &&
+                !sanitized.startsWith('https://') &&
+                !sanitized.startsWith('mailto:') &&
+                !sanitized.startsWith('tel:') &&
+                !sanitized.startsWith('/') &&
+                !sanitized.startsWith('#')) {
+                return sanitized.startsWith('://') ? '' : `https://${url}`;
+            }
+            return url;
+        }
+    }
+    return WithLinks;
+};
+
+const LIST_MENU_ITEM_VARIANTS = {
+    LABEL: 'label',
+    BUTTON: 'button',
+};
+
+const bdsListMenuItemCss = () => `@charset "UTF-8";.bds-list-item,.bds-list-item__content,.bds-list-item__content--left,.bds-list-item__content--right{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-list-item{font-family:var(--boreal-typography-font-family-primary);-ms-flex-item-align:stretch;align-self:stretch;color:var(--boreal-text-default);width:100%;font-size:var(--boreal-typography-font-size-sm);font-style:normal;font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm)}.bds-list-item__content{-ms-flex-pack:justify;justify-content:space-between;width:100%;gap:var(--boreal-spacing-3xs)}.bds-list-item__content [class*=bds-icon-]{font-size:var(--boreal-typography-font-size-md)}.bds-list-item--button{cursor:pointer;padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-list-item--button:not(.bds-list-item--disabled):hover:not([selected]){background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-list-item--button:not(.bds-list-item--disabled):focus,.bds-list-item--button:not(.bds-list-item--disabled):focus-visible{outline:none;-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);z-index:1}.bds-list-item--button:not(.bds-list-item--disabled):active,.bds-list-item--button:not(.bds-list-item--disabled).bds-list-item--state-active{-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;background-color:var(--boreal-ui-default-lighter)}.bds-list-item--selected{background-color:var(--boreal-ui-primary-lighter)}.bds-list-item--disabled{color:var(--boreal-text-disabled);cursor:not-allowed}.bds-list-item--label{cursor:default;padding:var(--boreal-spacing-3xs) 0}.bds-list-item--label .bds-typography label{color:var(--boreal-text-default-light)}`;
+
+const BdsListMenuItem = class extends Mixin(MenuItemBehavior, WithLinks) {
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.bdsSelect = createEvent(this, "bdsSelect");
+        /**
+         * Defines the visual style of the list menu item.
+         * - 'button': A standard clickable item.
+         * - 'label': A non-interactive label, typically used for grouping items.
+         */
+        this.variant = LIST_MENU_ITEM_VARIANTS.BUTTON;
+        /** The name of the list menu item */
+        this.name = '';
+        /** Disabled state item */
+        this.disabled = false;
+        /** Selected item state */
+        this.selected = false;
+        /** Value associated with the menu item */
+        this.value = '';
+        /** Active state item */
+        this.activeItem = false;
+        /** Link behavior props */
+        this.href = '';
+        /** Opens the link in a new tab if true */
+        this.newTab = false;
+        /** Makes the link downloadable if true */
+        this.download = '';
+        /** State to manage click and keyboard interaction states */
+        this.currentState = COMPONENT_STATES.DEFAULT;
+        /** Event to notify when the menu item is clicked */
+        this.handleClick = (e) => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            if (this.isLink) {
+                this.handleLinkClick(e);
+                return;
+            }
+            this.bdsSelect.emit({
+                value: this.value,
+                selected: !this.selected,
+            });
+        };
+        /** Event to handle keydown navigation and trigger click */
+        this.handleKeyDown = (e) => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            this.handleKeyDownLogic(e, () => this.handleClick(e));
+            // If the item is a link, we dont activate this animation
+            if (!this.isLink || this.linkAttributes.download !== undefined) {
+                this.currentState =
+                    e.key === KEYBOARD.Enter.key || e.key === KEYBOARD.Space.key ? COMPONENT_STATES.ACTIVE : this.currentState;
+            }
+        };
+        /** Event to handle keyup navigation and reset active state */
+        this.handleKeyUp = () => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            this.currentState = COMPONENT_STATES.DEFAULT;
+        };
+    }
+    checkPropsVariant() {
+        validatePropValue(Object.values(LIST_MENU_ITEM_VARIANTS), LIST_MENU_ITEM_VARIANTS.BUTTON, this.el, 'variant');
+    }
+    /** Lifecycle method called before the component is loaded */
+    componentWillLoad() {
+        this.checkPropsVariant();
+    }
+    /** Checks if the variant is a label */
+    get isLabelVariant() {
+        return this.variant === LIST_MENU_ITEM_VARIANTS.LABEL;
+    }
+    /** Returns the class map for the list menu item */
+    get classMap() {
+        return {
+            'bds-list-item': true,
+            'bds-list-item--disabled': this.disabled,
+            'bds-list-item--selected': this.selected,
+            [`bds-list-item--state-${this.currentState}`]: true,
+            [`bds-list-item--${this.variant}`]: true,
+        };
+    }
+    /** Return the render for the label variant of the list menu item */
+    renderTypeLabel() {
+        return (h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, h("slot", { name: "left-content" }), " ", h("slot", null)));
+    }
+    /** Return the render for the button variant of the list menu item */
+    renderTypeButton() {
+        return (h("div", { class: "bds-list-item__content" }, h("div", { class: "bds-list-item__content--left" }, h("slot", { name: "left-content" }), h("slot", null)), h("div", { class: "bds-list-item__content--right" }, h("slot", { name: "right-content" }))));
+    }
+    /** Main render */
+    render() {
+        let renderItem = this.renderTypeButton();
+        if (this.isLabelVariant)
+            renderItem = this.renderTypeLabel();
+        const linkAttributes = this.isLink ? { ...this.linkAttributes, tabindex: this.activeItem ? 0 : -1 } : {};
+        return (h(Host, { key: 'ccf9e4a413fd0f13e38f040a0da92493c84d5ae2', class: this.classMap, role: this.isLabelVariant ? 'presentation' : this.menuItemRole, "aria-selected": this.ariaSelected, tabIndex: this.isLabelVariant ? -1 : this.itemTabIndex, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, ...linkAttributes }, renderItem));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "variant": [{
+                "checkPropsVariant": 0
+            }]
+    }; }
+};
+BdsListMenuItem.style = bdsListMenuItemCss();
+
+export { BdsListMenuItem as bds_list_menu_item };

package/dist/esm/bds-list-menu.entry.js

@@ -0,0 +1,128 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+
+const bdsListMenuCss = () => `@charset "UTF-8";:host{display:block}.bds-list-menu{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-width:350px}`;
+
+const BdsListMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsChange = createEvent(this, "bdsChange");
+        this.bdsClicked = createEvent(this, "bdsClicked");
+        /** If true, allows multiple items to be selected. Default is false (single selection). */
+        this.multiple = false;
+        /** Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'. */
+        this.menuRole = 'menu';
+        /** State to manage selected values */
+        this.selectedValues = [];
+    }
+    /**
+     * Retrieves the currently selected value(s) programmatically.
+     * @method getSelectedValues
+     * @returns {Promise<string | string[]>} The selected value(s) based on the 'multiple' prop.
+     */
+    async getSelectedValues() {
+        return this.multiple ? this.selectedValues : this.selectedValues[0];
+    }
+    /**
+     * Sets the selected values programmatically.
+     * Useful for initializing the menu from an external data source or form reset.
+     * @method setSelectedValues
+     * @param {string | string[]} values - The value or values to be marked as selected.
+     */
+    async setSelectedValues(values) {
+        if (this.multiple) {
+            this.selectedValues = Array.isArray(values) ? values : [values];
+        }
+        else {
+            this.selectedValues = values !== null ? [values] : [];
+        }
+        this.updateChildrenState();
+    }
+    /** Handles the click event on a menu item, updating the selection state accordingly. */
+    handleItemClick(event) {
+        const { value, selected } = event.detail;
+        if (this.menuRole === 'listbox') {
+            if (this.multiple) {
+                this.handleMultipleSelection(value, selected);
+            }
+            else {
+                this.handleSingleSelection(value, selected);
+            }
+            this.bdsChange.emit(this.multiple ? this.selectedValues : this.selectedValues[0] || undefined);
+            this.updateChildrenState();
+        }
+        else {
+            this.bdsClicked.emit(event.target);
+        }
+    }
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    componentWillLoad() {
+        this.initialSelectedValues();
+        this.updateActiveState();
+    }
+    /** Get all child menu items */
+    get childItems() {
+        const items = Array.from(this.el.querySelectorAll('bds-list-menu-item'));
+        return items;
+    }
+    /** First clickable element  */
+    get firstEnabledItem() {
+        const items = this.childItems;
+        const firstEnabled = items.find(item => !item.disabled && item.variant !== 'label');
+        return firstEnabled;
+    }
+    /** Updates the active state of the menu items based on the current selection. */
+    updateActiveState() {
+        const firstEnabled = this.firstEnabledItem;
+        const items = this.childItems;
+        const hasSelection = items.some(item => item.selected && !item.disabled);
+        if (!hasSelection && firstEnabled !== undefined) {
+            firstEnabled.setAttribute('active-item', '');
+        }
+    }
+    /** Handles selection logic for multiple selection mode. */
+    handleMultipleSelection(value, selected) {
+        this.selectedValues = selected
+            ? [...this.selectedValues, value]
+            : this.selectedValues.filter(v => v !== value);
+    }
+    /** Handles selection logic for single selection mode. */
+    handleSingleSelection(value, selected) {
+        this.selectedValues = selected ? [value] : [];
+    }
+    /** Updates the state of child menu items based on the current selection. */
+    updateChildrenState() {
+        const items = this.childItems;
+        items.forEach((item) => {
+            if (item.value !== undefined) {
+                const isSelected = this.selectedValues.includes(item.value);
+                item.selected = isSelected;
+                if (isSelected)
+                    item.setAttribute('active-item', '');
+                else
+                    item.removeAttribute('active-item');
+            }
+        });
+        if (this.selectedValues.length === 0)
+            this.updateActiveState();
+    }
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    initialSelectedValues() {
+        const nodes = Array.from(this.el.querySelectorAll('bds-list-menu-item[selected]'));
+        if (nodes.length > 0) {
+            const initialSelected = Array.from(nodes);
+            const values = initialSelected.map(item => {
+                return item.getAttribute('value') || '';
+            });
+            this.selectedValues = this.multiple ? values : [values[0]];
+            this.updateChildrenState();
+        }
+    }
+    /** Renders the component with a slot for menu items. */
+    render() {
+        return (h(Host, { key: '30f57283c4f8ee82833217c0281f0df6e6126d26', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.multiple ? 'true' : 'false' }, h("slot", { key: '3d39f6022a967a57b6d95d889ad5aadd5ba7aa96' })));
+    }
+    get el() { return getElement(this); }
+};
+BdsListMenu.style = bdsListMenuCss();
+
+export { BdsListMenu as bds_list_menu };

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

@@ -1,9 +1,12 @@
-import { M as Mixin, r as registerInstance, h, a as Host, g as getElement } from './index-D4EFsvs1.js';
-import { a as anchoredMixin } from './anchored.mixin-Y3MkGc2X.js';
+import { M as Mixin, r as registerInstance, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { a as anchoredMixin, g as getOffset } from './getOffset-DKPjeBHi.js';
 import { B as BUTTON_SIZES } from './enum-C8mRvnTA.js';
 import './floating.mixin-DCXSEEVH.js';
+import './Keys-CzYQb3pP.js';
 
-const bdsPopoverCss = () => `@charset "UTF-8";:root{--popover-arrow-size:var(--boreal-spacing-s);--popover-width:320px}.popover{position:fixed;margin:0;overflow:visible;border-radius:var(--boreal-radius-xs2);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs);font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular);background:var(--boreal-ui-inverse);-webkit-filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:transparent;cursor:auto}.popover-content{position:relative;padding:var(--boreal-spacing-s)}.popover[popover]:not(:popover-open){display:none}.popover-header{border-bottom:var(--boreal-stroke-default-light) solid 1px;padding:var(--boreal-spacing-m) var(--boreal-spacing-xs) var(--boreal-spacing-m) var(--boreal-spacing-s);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover-header__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.popover-header__title{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.popover-header__icon{font-size:var(--boreal-typography-font-size-md);margin-right:var(--boreal-spacing-3xs)}.popover-header__close{margin-left:var(--boreal-spacing-s)}.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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover .popover-arrow{position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);pointer-events:none}.popover .popover-arrow::before{content:"";position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);background:var(--boreal-ui-inverse);-webkit-transform:rotate(45deg);transform:rotate(45deg)}.popover[data-placement^=top] .popover-arrow{bottom:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=top] .popover-arrow::before{top:0}.popover[data-placement^=bottom] .popover-arrow{top:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=bottom] .popover-arrow::before{top:0}.popover[data-placement^=left] .popover-arrow{right:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=left] .popover-arrow::before{left:0}.popover[data-placement^=right] .popover-arrow{left:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=right] .popover-arrow::before{left:0}`;
+const OFFSET = 11;
+
+const bdsPopoverCss = () => `@charset "UTF-8";:root{--popover-arrow-size:var(--boreal-spacing-s);--popover-width:320px}.popover{position:fixed;margin:0;overflow:visible;border-radius:var(--boreal-radius-xs2);font-size:var(--boreal-typography-font-size-xs);line-height:var(--boreal-typography-line-height-xs);font-family:var(--boreal-typography-font-family-primary);font-weight:var(--boreal-typography-font-weight-regular);background:var(--boreal-ui-inverse);-webkit-filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));filter:drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.15));-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;border:transparent;cursor:auto}.popover-content{position:relative;padding:var(--boreal-spacing-s)}.popover[popover]:not(:popover-open){display:none}.popover-header{border-bottom:var(--boreal-stroke-default-light) solid 1px;padding:var(--boreal-spacing-m) var(--boreal-spacing-xs) var(--boreal-spacing-m) var(--boreal-spacing-s);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover-header__content{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.popover-header__title{font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.popover-header__icon{font-size:var(--boreal-typography-font-size-md);margin-right:var(--boreal-spacing-3xs)}.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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between}.popover .popover-arrow{position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);pointer-events:none}.popover .popover-arrow::before{content:"";position:absolute;width:var(--popover-arrow-size);height:var(--popover-arrow-size);background:var(--boreal-ui-inverse);-webkit-transform:rotate(45deg);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{bottom:0}.popover[data-placement^=bottom] .popover-arrow{top:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=bottom] .popover-arrow::before{bottom:0}.popover[data-placement^=left] .popover-arrow{right:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=left] .popover-arrow::before{left:0}.popover[data-placement^=right] .popover-arrow{left:calc(var(--popover-arrow-size) / -2)}.popover[data-placement^=right] .popover-arrow::before{left:0}`;
 
 const BdsPopover = class extends Mixin(anchoredMixin) {
     constructor(hostRef) {
@@ -55,7 +58,7 @@ const BdsPopover = class 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,
@@ -122,7 +125,13 @@ const BdsPopover = class 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` : '',
@@ -136,7 +145,7 @@ const BdsPopover = class 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();
@@ -260,7 +269,7 @@ const BdsPopover = class 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" })))));
     }
     get el() { return getElement(this); }
 };