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

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

@@ -0,0 +1,130 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.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) {
+        index.registerInstance(this, hostRef);
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        this.bdsClicked = index.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 (index.h(index.Host, { key: '30f57283c4f8ee82833217c0281f0df6e6126d26', class: "bds-list-menu", role: this.menuRole, tabIndex: "-1", "aria-multiselectable": this.multiple ? 'true' : 'false' }, index.h("slot", { key: '3d39f6022a967a57b6d95d889ad5aadd5ba7aa96' })));
+    }
+    get el() { return index.getElement(this); }
+};
+BdsListMenu.style = bdsListMenuCss();
+
+exports.bds_list_menu = BdsListMenu;

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

@@ -0,0 +1,280 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var getOffset = require('./getOffset-m4hBgyVP.js');
+var _enum = require('./enum-DLblRCkQ.js');
+require('./floating.mixin-Bje4320w.js');
+require('./Keys-DbIXSJF2.js');
+
+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 index.Mixin(getOffset.anchoredMixin) {
+    constructor(hostRef) {
+        super();
+        index.registerInstance(this, hostRef);
+        /**
+         * Override default options for the floating mixin.
+         * This can be overridden by passing a different object to the `floatingOptions` prop.
+         */
+        this.floatingOptions = {};
+        /**
+         * If true, disables the popover.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Width of the popover content.
+         * - number: width in pixels (e.g. 320 → "320px")
+         * - 'full': 100% of the trigger/parent width
+         * - 'auto': fits the content
+         * @default 320
+         */
+        this.width = 320;
+        /**
+         * If true, displays the header section with icon and title slots.
+         * @default false
+         */
+        this.header = false;
+        /**
+         * If true, displays the footer section with helper and button slots.
+         * @default false
+         */
+        this.footer = false;
+        /**
+         * If true, displays a close button inside the header. Requires `header` to be true.
+         * @default false
+         */
+        this.closable = false;
+        /**
+         * Tracks the visibility state of the floating element.
+         * Triggers a re-render when changed.
+         */
+        this.isVisible = false;
+    }
+    /**
+     * Returns the resolved options for the floating mixin, merging `floatingOptions`
+     * prop values with their defaults.
+     */
+    get options() {
+        return {
+            placement: this.floatingOptions.placement ?? 'bottom',
+            offset: getOffset.getOffset(this.floatingOptions?.hideArrow, this.floatingOptions?.offset, OFFSET),
+            arrow: this.floatingOptions.hideArrow ? undefined : this.arrowElement,
+            strategy: 'fixed',
+            shift: true,
+            flip: true,
+        };
+    }
+    /**
+     * Returns the popover width based on the `width` prop.
+     * If `width` is 'full', returns '100%'.
+     * If `width` is 'auto', returns 'auto'.
+     * Otherwise, returns the provided width in pixels.
+     */
+    get popoverWidth() {
+        if (this.width === 'full')
+            return '100%';
+        if (this.width === 'auto')
+            return 'auto';
+        return `${this.width}px`;
+    }
+    /**
+     * Returns the lifecycle hooks consumed by the anchored mixin to control
+     * tooltip visibility and positioning.
+     * @override anchoredMixin.hooks
+     */
+    get hooks() {
+        return {
+            onPositionUpdate: result => this.handlePosition(result),
+            onBeforeShow: () => !this.disabled,
+            onAfterShow: () => this.attachClickOutside(),
+            onAfterHide: () => this.detachClickOutside(),
+            onBeforeLoad: () => this.attachTrigger(),
+            subscribeToTrigger: (el) => this.subscribe(el),
+        };
+    }
+    /**
+     * Attaches a click outside listener to the document.
+     * If `closeOnClickOutside` is true, the popover will close when the user clicks outside.
+     */
+    attachClickOutside() {
+        if (this.floatingOptions?.closeOnClickOutside === false)
+            return;
+        this.boundClickOutside = (e) => this.handleClickOutside(e);
+        document.addEventListener('mousedown', this.boundClickOutside);
+    }
+    /**
+     * Detaches the click outside listener from the document.
+     * If `closeOnClickOutside` is true, the popover will close when the user clicks outside.
+     */
+    detachClickOutside() {
+        if (this.floatingOptions?.closeOnClickOutside === false)
+            return;
+        if (this.boundClickOutside !== null) {
+            document.removeEventListener('mousedown', this.boundClickOutside);
+            this.boundClickOutside = () => { };
+        }
+    }
+    /**
+     * Applies the arrow element's `x` and `y` coordinates calculated by the
+     * floating middleware. Skips the update when the arrow element is not
+     * connected to the DOM or when middleware data is absent.
+     *
+     * @param result - The positioning result that may contain `middlewareData.arrow`
+     * with the computed `x` and `y` offsets for the arrow element.
+     */
+    setArrowPosition(result) {
+        if (result.middlewareData?.arrow && !this.disabled && this.arrowElement?.isConnected) {
+            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` : '',
+            });
+        }
+    }
+    /**
+     *  Handles the click outside event.
+     *  If the click is inside the trigger or the floating content, it will not close the popover.
+     * @param e - Mouse event with the click coordinates.
+     */
+    handleClickOutside(e) {
+        const target = e.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();
+        }
+    }
+    /**
+     * Handles the click event on the floating content. Prevents the default behavior of the click event.
+     * If `closeOnClick` is true, the popover will close when the user clicks inside the floating content.
+     * @param e - Mouse event with the click coordinates.
+     */
+    handleContentClick(e) {
+        e.stopPropagation();
+        this.handleFloatingClick();
+    }
+    /**
+     * Handles the click event on the floating content.
+     * If `closeOnClick` is true, the popover will close when the user clicks inside the floating content.
+     */
+    handleFloatingClick() {
+        if (this.floatingOptions.closeOnClick)
+            this.hide();
+    }
+    /**
+     *  Handles the position update event.
+     *  Updates the position of the floating content and the arrow element.
+     * @param result - Positioning result with the position and the placement.
+     */
+    handlePosition(result) {
+        this.floatingContent.setAttribute('data-placement', result.placement);
+        this.setArrowPosition(result);
+        if (this.width === 'full' && this.triggerSlot !== null && this.triggerSlot !== undefined) {
+            const realTrigger = this.triggerSlot.parentElement ?? this.triggerSlot;
+            const newWidth = realTrigger.getBoundingClientRect().width;
+            const currentWidth = this.floatingContent.getBoundingClientRect().width;
+            if (Math.round(currentWidth) !== Math.round(newWidth)) {
+                this.floatingContent.style.width = `${newWidth}px`;
+            }
+            void this.updatePosition(this.triggerSlot, this.floatingContent, this.options, r => {
+                this.floatingContent.setAttribute('data-placement', r.placement);
+                this.setArrowPosition(r);
+            });
+        }
+        else if (this.width === 'auto') {
+            this.floatingContent.style.width = '';
+        }
+    }
+    /**
+     *  Attaches the trigger to the popover.
+     *  If the trigger is not set, it will return.
+     * @returns
+     */
+    attachTrigger() {
+        if (this.trigger !== null && this.trigger !== undefined)
+            return;
+    }
+    /**
+     *  Subscribes the trigger to the popover.
+     *  If the trigger is not a button, input, or select element, it will return.
+     * @param trigger - The trigger element to subscribe.
+     */
+    subscribe(trigger) {
+        if (trigger === undefined)
+            return;
+        this.trigger = trigger;
+        trigger.setAttribute('part', 'popover-trigger');
+        trigger.setAttribute('ariaDescribedBy', 'popover-content');
+        trigger.setAttribute('aria-haspopup', 'true');
+        trigger.setAttribute('aria-expanded', 'false');
+        const parentBds = trigger.closest('bds-button, bds-input, bds-select');
+        if (parentBds !== null && parentBds !== undefined) {
+            const nativeEl = parentBds.querySelector('button, input');
+            const listenTarget = nativeEl ?? parentBds;
+            this.listenTarget = listenTarget;
+            this.listenTarget.addEventListener('click', (evt) => this.handleShow(evt));
+            this.listenTarget.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+        }
+        else {
+            this.trigger.addEventListener('click', (evt) => this.handleShow(evt));
+            this.trigger.addEventListener('keydown', (evt) => this.handleKeydown(evt, () => this.showElement(), () => this.hideElement()));
+        }
+    }
+    /**
+     *  Handles the show event.
+     *  If the event is not a click event, it will stop the propagation.
+     * @param evt - Mouse event with the click coordinates.
+     */
+    handleShow(evt) {
+        evt.stopPropagation();
+        this.toggle();
+    }
+    /**
+     *  Returns true if the arrow should be shown, false otherwise.
+     * @returns - True if the arrow should be shown, false otherwise.
+     */
+    get canShowArrow() {
+        return !this.floatingOptions.hideArrow || false;
+    }
+    /**
+     *  Returns the placement of the popover.
+     * @returns - The placement of the popover.
+     */
+    get getPlacement() {
+        return this.floatingOptions.placement || 'bottom';
+    }
+    /**
+     *  Returns true if the header slot is present, false otherwise.
+     * @returns - True if the header slot is present, false otherwise.
+     */
+    get hasHeaderSlot() {
+        return this.el.querySelector('[slot="header"]') !== null;
+    }
+    /**
+     *  Returns true if the footer slot is present, false otherwise.
+     * @returns - True if the footer slot is present, false otherwise.
+     */
+    get hasFooterSlot() {
+        return this.el.querySelector('[slot="footer"]') !== null;
+    }
+    disconnectedCallback() {
+        this.listenTarget.removeEventListener('click', (evt) => this.handleShow(evt));
+        this.trigger.removeEventListener('click', (evt) => this.handleShow(evt));
+    }
+    render() {
+        return (index.h(index.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 && (index.h("div", { key: 'a9172eb13620a218c1a37bd52eddaa6f9b53739c', class: "popover-header" }, index.h("div", { key: '3b8774f0f8f461ce164220d53c48139e95a1b8f5', class: "popover-header__content" }, index.h("span", { key: '86cc8cedf2c7970834a61c8374fc23d67417c2dd', class: "popover-header__icon" }, index.h("slot", { key: '1e356d9b87672942ef4d19f33f5de9c707d02cb2', name: "header-icon" })), index.h("span", { key: 'c014a7a269a4cc79841d4350e7e8efc4fc39cb06', class: "popover-header__title" }, index.h("slot", { key: '39ce847785bbad57635834c7957146b89245438e', name: "header-title" }))), this.closable && (index.h("bds-button", { key: 'a54358b74d8d29f5afeaa9f6fe1f07343f6784c6', class: "popover-header__close", size: _enum.BUTTON_SIZES.SMALL, onBdsClick: () => this.hide() }, index.h("em", { key: 'efdca5b8e1f0560a15e063e832f1aeb9c754a820', slot: "icon", class: "bds-icon-close" }))))), this.canShowArrow && (index.h("div", { key: '16870352c06b06de9b67e542e9e1753c7e3bff66', class: "popover-arrow", part: "arrow", ref: el => (this.arrowElement = el) })), index.h("div", { key: 'b5dddeeedcc5ba9d107af57a25d9ca350a0621a8', class: "popover-content", tabIndex: -1, part: "popover-content" }, index.h("slot", { key: '4bfc174186ab356747175464922c0d6b09d6b608' })), this.footer && (index.h("div", { key: '8476df1ee6751d6cba4cc52efad6675ea74bdc18', class: "popover-footer", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: 'de60d356d96ae56c8e0a1349f6bafa87700998c6', name: "footer-helper" }), index.h("slot", { key: '21e59115a077f31b7b05aeea29cd23394642dd4d', name: "footer-button" })))));
+    }
+    get el() { return index.getElement(this); }
+};
+BdsPopover.style = bdsPopoverCss();
+
+exports.bds_popover = BdsPopover;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const SPINNER_SIZES = {
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
+};
+
+const bdsSpinnerCss = () => `@charset "UTF-8";bds-spinner{display:inline-block;position:relative;width:1em;height:1em}bds-spinner::before,bds-spinner::after{content:"";position:absolute;border-color:transparent transparent var(--boreal-primary-base) transparent;border-radius:50%;border-width:3px;border-style:solid;top:0;left:0;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}bds-spinner::before{opacity:0.2;border-style:dashed;-webkit-animation:spin 0.8s linear infinite;animation:spin 0.8s linear infinite}bds-spinner::after{-webkit-animation:draw-arc 0.8s linear infinite;animation:draw-arc 0.8s linear infinite}.bds-spinner--small{width:var(--boreal-layout-m);height:var(--boreal-layout-m)}.bds-spinner--medium{width:var(--boreal-layout-ml);height:var(--boreal-layout-ml)}.bds-spinner--large{width:var(--boreal-layout-xl);height:var(--boreal-layout-xl)}.bds-spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0, 0, 0, 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap;border:0}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes draw-arc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}60%{-webkit-transform:rotate(330deg);transform:rotate(330deg)}65%{-webkit-transform:rotate(335deg);transform:rotate(335deg)}90%{-webkit-transform:rotate(350deg);transform:rotate(350deg)}95%{-webkit-transform:rotate(355deg);transform:rotate(355deg)}98%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}`;
+
+const BdsSpinner = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Controls the visual size of the spinner.
+         * @default "small"
+         */
+        this.size = SPINNER_SIZES.SMALL;
+        /**
+         * Accessible label announced by screen readers to describe the loading state.
+         * @default "Loading"
+         */
+        this.label = 'Loading';
+    }
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(SPINNER_SIZES), SPINNER_SIZES.SMALL, this.el, 'size');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    get getClassMap() {
+        return {
+            'bds-spinner': true,
+            'bds-spinner--small': this.size === SPINNER_SIZES.SMALL,
+            'bds-spinner--medium': this.size === SPINNER_SIZES.MEDIUM,
+            'bds-spinner--large': this.size === SPINNER_SIZES.LARGE,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd114eb6445b81a4e7beafd0ff08b8aaf6e1a96e7', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, index.h("span", { key: 'fa45675b2e258eca9c44a9374a65f26c781343d5', class: "bds-spinner__sr-only" }, this.label)));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "size": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsSpinner.style = bdsSpinnerCss();
+
+exports.bds_spinner = BdsSpinner;

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

@@ -0,0 +1,59 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var states = require('./states-BweP5Vpu.js');
+var validateProps = require('./validateProps-CJe9X5x8.js');
+
+const INDICATOR_TYPES = {
+    NONE: 'none',
+    DOT: 'dot',
+    ICON: 'icon',
+};
+
+const bdsStatusCss = () => `@charset "UTF-8";.bds-status{color:var(--boreal-text-default-ink);text-align:center;font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-xs);font-style:normal;font-weight:var(--boreal-typography-font-weight-semibold);line-height:var(--boreal-typography-line-height-xs);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;gap:var(--boreal-spacing-3xs);padding:var(--boreal-spacing-3xs) var(--boreal-spacing-xs);min-height:var(--boreal-spacing-ml);border-radius:var(--boreal-radius-xs)}.bds-status>[slot=icon]{display:none}.bds-status--icon>[slot=icon]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--boreal-layout-s);height:var(--boreal-layout-s)}.bds-status__dot{background-color:var(--boreal-icon-default-light);width:var(--boreal-spacing-xs);height:var(--boreal-spacing-xs);border-radius:var(--boreal-radius-full)}.bds-status--neutral{color:var(--boreal-text-default-ink);background-color:var(--boreal-ui-default-lighter)}.bds-status--neutral>.bds-status__dot{background-color:var(--boreal-icon-default-lighter)}.bds-status--neutral>[slot=icon]{color:var(--boreal-icon-default-lighter)}.bds-status--neutral>.bds-status__dot{background-color:var(--boreal-icon-default-light)}.bds-status--pending{color:var(--boreal-text-warning-dark);background-color:var(--boreal-ui-warning-lighter)}.bds-status--pending>.bds-status__dot{background-color:var(--boreal-icon-warning-base)}.bds-status--pending>[slot=icon]{color:var(--boreal-icon-warning-base)}.bds-status--in-progress{color:var(--boreal-text-information-dark);background-color:var(--boreal-ui-info-lighter)}.bds-status--in-progress>.bds-status__dot{background-color:var(--boreal-icon-info-base)}.bds-status--in-progress>[slot=icon]{color:var(--boreal-icon-info-base)}.bds-status--complete{color:var(--boreal-text-success-dark);background-color:var(--boreal-ui-success-lighter)}.bds-status--complete>.bds-status__dot{background-color:var(--boreal-icon-success-base)}.bds-status--complete>[slot=icon]{color:var(--boreal-icon-success-base)}.bds-status--cancel{color:var(--boreal-text-danger-dark);background-color:var(--boreal-ui-danger-lighter)}.bds-status--cancel>.bds-status__dot{background-color:var(--boreal-icon-danger-base)}.bds-status--cancel>[slot=icon]{color:var(--boreal-icon-danger-base)}`;
+
+const BdsStatus = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** state is a string attribute. Controls the visual state variant of the status badge.
+         * Determines the background, accent, and text colors applied to the element.
+         * An invalid value falls back to `"neutral"` and a warning is set on the host element. */
+        this.state = states.PROCESS_STATUS.NEUTRAL;
+        /** indicator is a string attribute. Controls the type of indicator rendered before the slotted label.
+         * An invalid value falls back to `"none"` and a warning is set on the host element. */
+        this.indicator = INDICATOR_TYPES.NONE;
+    }
+    /** Validates the `state` prop against the set of allowed values.
+     * Falls back to `"neutral"` when an invalid value is detected. */
+    checkPropValues() {
+        validateProps.validatePropValue(Object.values(states.PROCESS_STATUS), states.PROCESS_STATUS.NEUTRAL, this.el, 'state');
+        validateProps.validatePropValue(Object.values(INDICATOR_TYPES), INDICATOR_TYPES.NONE, this.el, 'indicator');
+    }
+    /** Before component rendered */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /* Method to get the class map based on the status prop */
+    get classMap() {
+        return {
+            'bds-status': true,
+            [`bds-status--${this.state}`]: true,
+            [`bds-status--${this.indicator}`]: true,
+        };
+    }
+    render() {
+        return (index.h(index.Host, { key: '36cf2dfe777002b02d126d38cb9ed2bce3f828a6', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? index.h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', index.h("slot", { key: '99ab1fa89dc28f3ffca617508b5c577abf874d7a', name: "icon" }), index.h("slot", { key: '8ff726d294fc524950ac0255c71f4ba65b3c9b96' })));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "state": [{
+                "checkPropValues": 0
+            }],
+        "indicator": [{
+                "checkPropValues": 0
+            }]
+    }; }
+};
+BdsStatus.style = bdsStatusCss();
+
+exports.bds_status = BdsStatus;