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

package/dist/cjs/bds-grid-item.cjs.entry.js

@@ -0,0 +1,93 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+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,
+};
+
+const bdsGridItemCss = () => `@charset "UTF-8";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}}`;
+
+const BdsGridItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** 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() {
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.DEFAULT, this.el, 'colSpan');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.SM_MAX, this.el, 'colSpanSm');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.MD_MAX, this.el, 'colSpanMd');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.LG_MAX, this.el, 'colSpanLg');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.XL_MAX, this.el, 'colSpanXl');
+        validateProps.validateNumericProp(1, GRID_ITEM_COL_SPAN.XXL_MAX, this.el, 'colSpan2xl');
+        validateProps.validateNumericProp(1, undefined, this.el, 'rowSpan');
+        validateProps.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 (index.h(index.Host, { key: '3e3465db3dcedd8d2f2cbb6035ff859b45841461', style: this.getHostStyles() }, index.h("slot", { key: 'db935ab4c60fb1d70df5ba03cbb7ee97944de6fa' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "colSpan": [{
+                "checkPropValues": 0
+            }],
+        "colSpanSm": [{
+                "checkPropValues": 0
+            }],
+        "colSpanMd": [{
+                "checkPropValues": 0
+            }],
+        "colSpanLg": [{
+                "checkPropValues": 0
+            }],
+        "colSpanXl": [{
+                "checkPropValues": 0
+            }],
+        "colSpan2xl": [{
+                "checkPropValues": 0
+            }],
+        "rowSpan": [{
+                "checkPropValues": 0
+            }],
+        "offset": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsGridItem.style = bdsGridItemCss();
+
+exports.bds_grid_item = BdsGridItem;

package/dist/cjs/bds-grid.cjs.entry.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const GRID_LAYOUT = {
+    FIXED: 'fixed',
+    FLUID: 'fluid',
+};
+
+const bdsGridCss = () => `@charset "UTF-8";bds-grid{--bds-grid-columns:var(--boreal-grid-columns-sm);--bds-grid-gutter:var(--boreal-grid-gutter-sm);--bds-grid-margin:var(--boreal-grid-margin-sm);display:grid;grid-template-columns:repeat(var(--bds-grid-columns), 1fr);gap:var(--bds-grid-gutter);padding-inline:var(--bds-grid-margin);-webkit-margin-start:var(--bds-grid-nav-offset, 0px);margin-inline-start:var(--bds-grid-nav-offset, 0px);-webkit-box-sizing:border-box;box-sizing:border-box}@media (min-width: 769px){bds-grid{--bds-grid-columns:var(--boreal-grid-columns-md)}}@media (min-width: 960px){bds-grid{--bds-grid-columns:var(--boreal-grid-columns-lg);--bds-grid-margin:var(--boreal-grid-margin-lg)}}@media (min-width: 1152px){bds-grid{--bds-grid-gutter:var(--boreal-grid-gutter-xl);--bds-grid-margin:var(--boreal-grid-margin-xl)}}@media (min-width: 1344px){bds-grid{--bds-grid-margin:var(--boreal-grid-margin-2xl)}}bds-grid.bds-grid--fixed{max-width:calc(var(--boreal-grid-fixed-max-columns-width) + 2 * var(--bds-grid-margin));margin-inline:auto}`;
+
+const BdsGrid = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** `'fluid'` fills full width; `'fixed'` caps the column area at 960px and centres the container. */
+        this.layout = GRID_LAYOUT.FLUID;
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(GRID_LAYOUT), GRID_LAYOUT.FLUID, this.el, 'layout');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, index.h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "layout": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsGrid.style = bdsGridCss();
+
+exports.bds_grid = BdsGrid;

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

@@ -0,0 +1,468 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var states = require('./states-BweP5Vpu.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+var Keys = require('./Keys-DbIXSJF2.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 Keys.KEYBOARD.ArrowDown.key:
+            nextIndex = (currentIndex + 1) % items.length;
+            break;
+        case Keys.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 = [Keys.KEYBOARD.ArrowDown.key, Keys.KEYBOARD.ArrowUp.key, Keys.KEYBOARD.Enter.key, Keys.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 === Keys.KEYBOARD.Enter.key || e.key === Keys.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 === Keys.KEYBOARD.Enter.key || event.key === Keys.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 index.Mixin(MenuItemBehavior, WithLinks) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        this.bdsSelect = index.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 = states.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 === Keys.KEYBOARD.Enter.key || e.key === Keys.KEYBOARD.Space.key ? states.COMPONENT_STATES.ACTIVE : this.currentState;
+            }
+        };
+        /** Event to handle keyup navigation and reset active state */
+        this.handleKeyUp = () => {
+            if (this.disabled || this.isLabelVariant)
+                return;
+            this.currentState = states.COMPONENT_STATES.DEFAULT;
+        };
+    }
+    checkPropsVariant() {
+        validateProps.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 (index.h("bds-typography", { variant: "label", element: "label", align: "start", role: "presentation" }, index.h("slot", { name: "left-content" }), " ", index.h("slot", null)));
+    }
+    /** Return the render for the button variant of the list menu item */
+    renderTypeButton() {
+        return (index.h("div", { class: "bds-list-item__content" }, index.h("div", { class: "bds-list-item__content--left" }, index.h("slot", { name: "left-content" }), index.h("slot", null)), index.h("div", { class: "bds-list-item__content--right" }, index.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 (index.h(index.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 index.getElement(this); }
+    static get watchers() { return {
+        "variant": [{
+                "checkPropsVariant": 0
+            }]
+    }; }
+};
+BdsListMenuItem.style = bdsListMenuItemCss();
+
+exports.bds_list_menu_item = BdsListMenuItem;