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

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

@@ -0,0 +1,197 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+import { M as MENU_ROLES } from './menu-dz9-Q2N8.js';
+import { a as inheritAriaAttributes } from './attributes-U9yfbs7i.js';
+import { v as validatePropValue } from './validateProps-kGnB15Lz.js';
+
+const LIST_MENU_SELECTION_MODE = {
+    SINGLE: 'single',
+    MULTIPLE: 'multiple',
+};
+
+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:var(--bds-list-menu-max-width, 350px);background-color:var(--boreal-ui-inverse);font-family:var(--boreal-typography-font-family-primary)}.bds-list-menu__content{max-height:var(--bds-list-menu-max-height, 240px);overflow-y:auto;padding:var(--boreal-spacing-2xs)}.bds-list-menu__select-controls{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;border-bottom:var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter);margin-bottom:var(--boreal-spacing-3xs)}.bds-list-menu__header:not(:empty),.bds-list-menu__footer:not(:empty){padding:var(--boreal-spacing-xs) 0}.bds-list-menu__header:not(:empty){border-bottom:var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter)}.bds-list-menu__footer:not(:empty){border-top:var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter)}`;
+
+const BdsListMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsChange = createEvent(this, "bdsChange");
+        this.bdsSelect = createEvent(this, "bdsSelect");
+        // Object to store inherited aria attributes
+        this.inheritedAttributes = {};
+        /** The selection mode of the menu. Can be 'SINGLE' or 'MULTIPLE'. Default is 'SINGLE'. */
+        this.selectionMode = LIST_MENU_SELECTION_MODE.SINGLE;
+        /** Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'. */
+        this.menuRole = MENU_ROLES.MENU;
+        /** Determines if the menu items have selectall/deselectall controls */
+        this.selectControls = false;
+        /** State to manage selected values */
+        this.selectedValues = [];
+    }
+    /** Verify props to be valid */
+    checkProps() {
+        validatePropValue(Object.values(MENU_ROLES), MENU_ROLES.MENU, this.el, 'menuRole');
+        validatePropValue(Object.values(LIST_MENU_SELECTION_MODE), LIST_MENU_SELECTION_MODE.SINGLE, this.el, 'selectionMode');
+    }
+    /**
+     * 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.isMultiple ? 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.isMultiple) {
+            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 === MENU_ROLES.LISTBOX) {
+            if (this.isMultiple) {
+                this.handleMultipleSelection(value, selected);
+            }
+            else {
+                this.handleSingleSelection(value, selected);
+            }
+            this.updateChildrenState(event.target);
+            this.bdsChange.emit(this.isMultiple ? this.selectedValues : this.selectedValues[0] || undefined);
+        }
+        else {
+            const itemClicked = event.target;
+            const indexItem = this.childItems.indexOf(itemClicked);
+            this.bdsSelect.emit({
+                value,
+                index: indexItem,
+                checked: itemClicked.checkable ? itemClicked.selected : false,
+                element: itemClicked,
+            });
+        }
+    }
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    componentWillLoad() {
+        this.checkProps();
+        this.initialSelectedValues();
+        this.updateActiveState();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el, ['aria-multiselectable']),
+        };
+    }
+    /** 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;
+    }
+    get isMultiple() {
+        return this.selectionMode === LIST_MENU_SELECTION_MODE.MULTIPLE;
+    }
+    /** 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(item) {
+        const items = this.childItems;
+        items.forEach((item) => {
+            if (item.value !== undefined) {
+                const isSelected = this.selectedValues.includes(item.value);
+                item.selected = isSelected;
+                item.removeAttribute('active-item');
+            }
+        });
+        this.setActiveItem(item);
+    }
+    /** activate item based on interaction */
+    setActiveItem(lastItemInteracted) {
+        let itemToActivate;
+        if (lastItemInteracted !== undefined) {
+            itemToActivate = lastItemInteracted;
+        }
+        else if (this.selectedValues.length > 0) {
+            const selectedValue = this.selectedValues[0];
+            itemToActivate = this.childItems.find(item => item.value === selectedValue);
+        }
+        else {
+            itemToActivate = this.firstEnabledItem;
+        }
+        if (itemToActivate !== undefined) {
+            itemToActivate.setAttribute('active-item', '');
+        }
+    }
+    /** 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.isMultiple ? values : [values[0]];
+            this.updateChildrenState();
+        }
+    }
+    /** Handles the toggle of select/deselect all controls, updating the selection state accordingly. */
+    handleToggleSelect(selectAll) {
+        const allValues = this.childItems
+            .filter(item => !item.disabled && item.variant !== 'label' && item.value !== undefined)
+            .map(item => item.value);
+        this.selectedValues = selectAll ? allValues : [];
+        this.updateChildrenState();
+        this.bdsChange.emit(this.selectedValues);
+    }
+    /** Renders the select/deselect all controls if applicable based on the props. */
+    renderSelectControls() {
+        if (this.selectControls && this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple) {
+            return (h("div", { class: "bds-list-menu__select-controls" }, h("bds-button", { name: "Select all", variant: "plain", onBdsClick: () => this.handleToggleSelect(true) }, "Select All"), h("bds-button", { name: "Deselect all", variant: "plain", onBdsClick: () => this.handleToggleSelect(false) }, "Deselect All")));
+        }
+        return null;
+    }
+    /** Renders the component with a slot for menu items. */
+    render() {
+        const inheritedAriaAttr = this.inheritedAttributes;
+        return (h(Host, { key: '88d9e41f1116555df02ca6e883b9e50f024c69b9', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.menuRole === MENU_ROLES.LISTBOX && this.isMultiple ? 'true' : 'false', ...inheritedAriaAttr }, h("slot", { key: '2f1730a1b5c456477d2b86f35b596d11e1b79f5c', name: "banner-content" }), h("div", { key: '58b6944a60ce62a8832e41a853d2621b6fc6deae', class: "bds-list-menu__header" }, h("slot", { key: '1a292f12ca27104fd0496477a051a1ad3bcec83e', name: "header-content" })), this.renderSelectControls(), h("div", { key: '9a21f481ca5a3e6b484c0bcc5501097dfceb61c3', class: "bds-list-menu__content" }, h("slot", { key: '43f684cb30333a5d571b4d05a4c8627703297473' })), h("div", { key: 'dbc3a62e055792283fef80ff4514167d079c355d', class: "bds-list-menu__footer" }, h("slot", { key: '8d504757a49bedf5a5ec150ed16ef5c9e7723ee1', name: "footer-content" }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectionMode": [{
+                "checkProps": 0
+            }],
+        "menuRole": [{
+                "checkProps": 0
+            }]
+    }; }
+};
+BdsListMenu.style = bdsListMenuCss();
+
+export { BdsListMenu as bds_list_menu };

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

@@ -1,9 +1,13 @@
-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 { B as BUTTON_SIZES } from './enum-C8mRvnTA.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-BYS3c13B.js';
+import { B as BUTTON_SIZES } from './enum-DlVzZK7o.js';
+import './Logger-iq2UuV7c.js';
 import './floating.mixin-DCXSEEVH.js';
+import './Keys-DlYG-OVB.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 +59,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 +126,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 +146,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 +270,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: '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" })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bds-radio-button.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+
+const bdsRadioButtonCss = () => `@charset "UTF-8";.bds-radio-button__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio-button{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:100%;gap:var(--boreal-spacing-2xs);padding:var(--boreal-spacing-2xs) var(--boreal-spacing-s);border:1px solid transparent;border-radius:var(--boreal-radius-s);background-color:var(--boreal-ui-default-base);color:var(--boreal-text-default);cursor:pointer;outline:none;-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-radio-button input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio-button:hover:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error){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-radio-button:focus-visible,.bds-radio-button:focus{z-index:1;background-color:var(--boreal-ui-default-lighter);-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);outline:none}.bds-radio-button:active:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error){z-index:1;background-color:var(--boreal-ui-default-lighter);-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}.bds-radio-button--checked{background-color:var(--boreal-ui-inverse);border-color:var(--boreal-stroke-primary-base);color:var(--boreal-text-primary-base)}.bds-radio-button--checked:hover,.bds-radio-button--checked:focus-visible,.bds-radio-button--checked:focus,.bds-radio-button--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-radio-button--error{background-color:var(--boreal-ui-inverse);color:var(--boreal-text-danger-base)}.bds-radio-button--error:hover,.bds-radio-button--error:focus-visible,.bds-radio-button--error:focus,.bds-radio-button--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-radio-button--error.bds-radio-button--checked{border-color:var(--boreal-stroke-danger-base)}.bds-radio-button--disabled{cursor:not-allowed;pointer-events:none;background-color:var(--boreal-ui-inverse);color:var(--boreal-text-disabled)}.bds-radio-button--disabled.bds-radio-button--checked{border-color:var(--boreal-stroke-primary-light);color:var(--boreal-text-primary-light)}.bds-radio-button__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-sm)}.bds-radio-button__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bds-radio-button__icon:empty{display:none}.bds-radio-button__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}`;
+
+const BdsRadioButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsChange = createEvent(this, "bdsChange");
+        /** Whether this button is selected. Managed by bds-radio-group; can be set directly when used standalone. */
+        this.checked = false;
+        /** Disables the button, preventing interaction and selection. */
+        this.disabled = false;
+        /** Shows error styling on the button. Propagated by bds-radio-group. */
+        this.error = false;
+        /** Value submitted with the form when this button is selected. */
+        this.value = 'on';
+        /** Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone. */
+        this.name = '';
+        /** Label text displayed inside the button. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.handleClick = () => this.select();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.select();
+            }
+        };
+    }
+    componentDidLoad() {
+        this.el.setAttribute('role', 'radio');
+        this.el.setAttribute('aria-checked', String(this.checked));
+        this.el.setAttribute('tabindex', '-1');
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.el.setAttribute('aria-checked', 'true');
+        this.bdsChange.emit({ checked: true, value: this.value });
+    }
+    get classMap() {
+        return {
+            'bds-radio-button': true,
+            'bds-radio-button--checked': this.checked,
+            'bds-radio-button--error': this.error,
+            'bds-radio-button--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: '63fe01baf9bf2318441f3a742ba857a540f4d7d0', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: '19fd44e41ef583131da77206f9e0c987132a5cc4', type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: 'cfbe81b25b71aeda4786b6073c9b16bcc819bf7b', class: "bds-radio-button__icon" }, h("slot", { key: 'ffa28a8602ea92c990b3e365d6cd421975f896fc', name: "icon" })), h("span", { key: 'c0a6512f836a00718ee71d5542b714900357ac82', class: "bds-radio-button__label" }, this.label || h("slot", { key: '29c89fa661270a7cc5ee69eb5c7cbc594af05d40' })), this.info && (h("span", { key: '74c3d43733ac679427e1b4fdbfcb4e72dae335a8', class: "bds-radio-button__info" }, h("span", { key: '567d225444acc5384df916a16a35867592327895', class: "bds-radio-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: '8120fe06d5a0f85d03205abc54f3e8112946ad4f' }, this.info)))));
+    }
+    get el() { return getElement(this); }
+};
+BdsRadioButton.style = bdsRadioButtonCss();
+
+export { BdsRadioButton as bds_radio_button };

package/dist/esm/bds-radio-card.entry.js

@@ -0,0 +1,74 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-BqJlOB6b.js';
+
+const bdsRadioCardCss = () => `@charset "UTF-8";.bds-radio-card--transition{-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-radio-card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;font-family:var(--boreal-typography-font-family-primary);background-color:var(--boreal-ui-inverse);padding:var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);border-radius:var(--boreal-radius-xs);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light)}.bds-radio-card:hover{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-radio-card:focus-within,.bds-radio-card:focus{background-color:var(--boreal-ui-default-lighter);-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)}.bds-radio-card:focus-visible{outline:none}.bds-radio-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio-card__container{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-xs);-ms-flex-align:start;align-items:flex-start}.bds-radio-card__button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:var(--bds-radio-button-size, 18px);height:var(--bds-radio-button-size, 18px);margin-top:var(--boreal-spacing-2xs);border-radius:var(--boreal-radius-full);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-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-radio-card__dot{width:var(--bds-radio-dot-size, 10px);height:var(--bds-radio-dot-size, 10px);border-radius:var(--boreal-radius-full);background-color:transparent;-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-radio-card__header{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-3xs);color:var(--boreal-text-default)}.bds-radio-card__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-radio-card__info-icon{font-size:var(--boreal-typography-font-size-xs);color:var(--boreal-icon-default-light)}.bds-radio-card__icon:empty{display:none}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__container{-ms-flex-align:center;align-items:center}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__content{height:var(--boreal-spacing-l)}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__button{margin-top:0}.bds-radio-card--checked{border-color:var(--boreal-stroke-primary-base)}.bds-radio-card--checked:hover,.bds-radio-card--checked:focus,.bds-radio-card--checked:focus-within,.bds-radio-card--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-radio-card--checked .bds-radio-card__button{border-color:var(--boreal-stroke-primary-base)}.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-primary-base)}.bds-radio-card--checked .bds-radio-card__header,.bds-radio-card--checked .bds-radio-card__description{color:var(--boreal-text-primary-base)}.bds-radio-card--disabled{pointer-events:none}.bds-radio-card--disabled .bds-radio-card__header,.bds-radio-card--disabled .bds-radio-card__description{color:var(--boreal-text-disabled)}.bds-radio-card--disabled:not(.bds-radio-card--checked) .bds-radio-card__button{background-color:var(--boreal-ui-disabled)}.bds-radio-card--disabled.bds-radio-card--checked,.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__button{border-color:var(--boreal-ui-primary-light)}.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-primary-light)}.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__header,.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__description{color:var(--boreal-ui-primary-light)}.bds-radio-card--error{border-color:var(--boreal-stroke-danger-base)}.bds-radio-card--error:hover,.bds-radio-card--error:focus,.bds-radio-card--error:focus-within,.bds-radio-card--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-radio-card--error .bds-radio-card__header,.bds-radio-card--error .bds-radio-card__description{color:var(--boreal-text-danger-base)}.bds-radio-card--error .bds-radio-card__button{border-color:var(--boreal-stroke-danger-base)}.bds-radio-card--error.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-danger-base)}`;
+
+const BdsRadioCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bdsChange = createEvent(this, "bdsChange");
+        /**
+         * Value submitted with the form when this radio is selected.
+         */
+        this.value = 'on';
+        /**
+         * Tooltip content attached to the radio card content. If empty, the info icon will not be rendered.
+         */
+        this.info = '';
+        /**
+         * Name attribute stamped by the parent bds-radio-group. Set directly when used standalone.
+         */
+        this.name = '';
+        /**
+         * Label text displayed next to the radio indicator. Falls back to the default slot when empty.
+         */
+        this.label = '';
+        /**
+         * Whether this radio card is selected. Managed by bds-radio-group; can be set directly when used standalone.
+         */
+        this.checked = false;
+        /**
+         * Disables the radio card, preventing it from being selected and interacted with.
+         */
+        this.disabled = false;
+        /**
+         * Whether the radio card is in an error state.
+         */
+        this.error = false;
+        this.handleClick = () => this.select();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.select();
+            }
+        };
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.bdsChange.emit({ checked: true, value: this.value });
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.el.classList.add('bds-radio-card--transition');
+        });
+    }
+    get isError() {
+        return this.error && !this.disabled;
+    }
+    get hostClasses() {
+        return {
+            'bds-radio-card': true,
+            'bds-radio-card--disabled': this.disabled,
+            'bds-radio-card--checked': this.checked,
+            'bds-radio-card--error': this.isError,
+        };
+    }
+    render() {
+        return (h(Host, { key: '4cdff470403b54e66ad92434ab229406d8e8ef2b', class: this.hostClasses, role: "radio", "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.isError ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '2019eb2a3aa666c3115dfe0c9fd1fed2a18e02de', class: "bds-radio-card__container" }, h("input", { key: 'd3e47807abff5bfe0ae1d61e8cdda12d047449e5', class: "bds-radio-card__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '091b3ad34ffc7335c07e899645ebb944e0629fe6', class: "bds-radio-card__button" }, h("span", { key: '1e717309877f85d8c8d3d635714664c997ab4097', class: "bds-radio-card__dot" })), h("div", { key: 'dfc0604e2acbb5db112e410029d057f66e23d71f', class: "bds-radio-card__content" }, h("div", { key: '8206a03a6095600fafbc70e1ce43ed85b4204441', class: "bds-radio-card__header" }, h("div", { key: 'a93dc203f940d4b03622f4896f2799d6379e3e01', class: "bds-radio-card__icon" }, h("slot", { key: 'a410dff923959aef7695fa4e72b2cb8d4a551ba1', name: "icon" })), h("div", { key: 'fb598d2bc0e231171454974041998eea8ee9c1b3', class: "bds-radio-card__title" }, this.label || h("slot", { key: '98d45578384b5132140c4ff1db0964f4f19a6faa' }))), h("bds-typography", { key: 'ff6f0f7b6d293f73b1d2beb3d1f6998889dbb868', variant: "helper" }, h("slot", { key: '73529f1e31f946f0da04334cbf65ff439b74c0d4', name: "description" })))), this.info && (h("span", { key: '7bf6f3803b50675cc9dec6256a938dfb45bbdee1', class: "bds-radio-card__info-icon", "aria-label": this.info }, h("em", { key: 'f472d256e753650c94739c0fb2218e5cf62f0543', class: "bds-icon-info-circle" }, h("bds-tooltip", { key: '3e2fe945dbe4a7b9cac470c9e497725937eaabd0' }, this.info))))));
+    }
+    get el() { return getElement(this); }
+};
+BdsRadioCard.style = bdsRadioCardCss();
+
+export { BdsRadioCard as bds_radio_card };