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

package/dist/collection/components/actions/bds-button/bds-button.js

@@ -0,0 +1,459 @@
+import { h } from "@stencil/core";
+import { COMPONENT_STATES } from "../../../types/index";
+import { BUTTON_SIZES, BUTTON_TYPES, BUTTON_VARIANTS } from "./types/enum";
+import { CORE_COLORS } from "../../../types/coreColors";
+//import { emitEvent } from '@/utils/helpers/eventEmitter';
+import { validatePropValue } from "../../../utils/helpers/validateProps";
+/**
+ *  Button component for user interactions, form submissions, supporting various styles, sizes, and states.
+ *
+ * @summary A versatile button component that can be customized with different colors, sizes, variants and states to fit various use cases in the application.
+ * @slot - The content of the button, typically text or an icon.
+ * @slot icon - Content to show an icon at the begining of the button
+ * @slot badge - Slot to place a badge component
+ *
+ * @attr {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+ * @attr {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
+ * @attr {string} name - The name attribute for the button, useful for form submissions.
+ * @attr {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+ * @attr {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+ * @attr {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+ * @attr {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+ * @attr {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+ * @attr {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
+ *
+ * @property {string} label - The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes.
+ * @property {boolean} disabled - Disables the button when true, preventing user interaction and applying disabled styles.
+ * @property {string} name - The name attribute for the button, useful for form submissions.
+ * @property {string} type - The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'.
+ * @property {string} color - The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'.
+ * @property {string} variant - The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.
+ * @property {string} size - The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'.
+ * @property {boolean} loading - Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false.
+ * @property {boolean} disclosure - Indicates if the button should show a chevron down at the end of the content.
+ *
+ * @default 'button' - Default type value
+ * @default 'default' - Default color value
+ * @default 'default' - Default variant value
+ * @default 'medium' - Default size value
+ * @default 'default' - Default status value
+ * @default false - Default disabled value
+ * @default '' - Default label value
+ * @default '' - Default name value
+ * @default false - Default loading value
+ * @default false - Default disclosure value
+ */
+export class BdsButton {
+    constructor() {
+        /** State to manage states */
+        this.currentState = COMPONENT_STATES.DEFAULT;
+        /* Props to manage the button attributes */
+        /** The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes. */
+        this.label = '';
+        /** disabled is a boolean attribute. Disables the button when true, preventing user interaction and applying disabled styles. */
+        this.disabled = false;
+        /** name is a string attribute. The name attribute for the button, useful for form submissions. */
+        this.name = '';
+        /** type is a string attribute. The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'. */
+        this.type = BUTTON_TYPES.BUTTON;
+        /** color is a string attribute. The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'. */
+        this.color = CORE_COLORS.DEFAULT;
+        /** variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'.*/
+        this.variant = BUTTON_VARIANTS.DEFAULT;
+        /** size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'. */
+        this.size = BUTTON_SIZES.MEDIUM;
+        /** loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false. */
+        this.loading = false;
+        /** disclosure is a boolean attribute. Used to show a chevron down at the of the content */
+        this.disclosure = false;
+        /** Event for listen keydown from button, make navigation easier */
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+                this.currentState = COMPONENT_STATES.ACTIVE;
+                event.preventDefault();
+                this.bdsClick.emit(event);
+            }
+        };
+        /** reset status on keyup */
+        this.handleKeyUp = () => {
+            this.currentState = COMPONENT_STATES.DEFAULT;
+        };
+        /** Method to handle custom click events */
+        this.handleClick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.disabled || this.loading)
+                return;
+            if (this.type === BUTTON_TYPES.SUBMIT || this.type === BUTTON_TYPES.RESET) {
+                this.processFormClick();
+            }
+            else {
+                this.bdsClick.emit(event);
+            }
+        };
+    }
+    /** Validate props */
+    checkPropValues() {
+        validatePropValue(Object.values(BUTTON_TYPES), BUTTON_TYPES.BUTTON, this.el, 'type');
+        validatePropValue(Object.values(CORE_COLORS), CORE_COLORS.DEFAULT, this.el, 'color');
+        validatePropValue(Object.values(BUTTON_VARIANTS), BUTTON_VARIANTS.DEFAULT, this.el, 'variant');
+        validatePropValue(Object.values(BUTTON_SIZES), BUTTON_SIZES.MEDIUM, this.el, 'size');
+    }
+    /**  */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /** After component rendered */
+    componentDidLoad() {
+        this.setupFormAssociation();
+    }
+    /** Select closest form or internal form from ElementInternals */
+    setupFormAssociation() {
+        const closestForm = this.el.closest('form');
+        const intForm = this.internals && 'form' in this.internals ? this.internals.form : null;
+        this.internalForm = intForm || closestForm || undefined;
+    }
+    /** Decide which form action to perform based on button type */
+    processFormClick() {
+        if (this.internalForm === undefined) {
+            console.warn('[BorealDS Button] No form found for submit/reset action. Please ensure the button is within a form or that the form is properly associated.');
+            return;
+        }
+        const events = {
+            [BUTTON_TYPES.SUBMIT]: () => {
+                if (typeof this.internalForm?.requestSubmit === 'function') {
+                    this.internalForm.requestSubmit();
+                }
+                else {
+                    this.internalForm?.submit();
+                }
+            },
+            [BUTTON_TYPES.RESET]: () => this.internalForm?.reset(),
+        };
+        const action = events[this.type];
+        if (typeof action === 'function') {
+            action();
+        }
+        return;
+    }
+    /* Method to get the class map for the button based on the props */
+    get getClassMap() {
+        return {
+            'bds-button': true,
+            'bds-button--is-disabled': this.disabled,
+            'bds-button--is-loading': this.loading,
+            [`bds-button--state-${this.currentState}`]: true,
+            [`bds-button--${this.color}`]: true,
+            [`bds-button--var-${this.variant}`]: true,
+            [`bds-button--size-${this.size}`]: true,
+        };
+    }
+    /* render button depends on variant */
+    render() {
+        return (h("button", { key: '937ea6972ca39ef41aec1d8c6459a224c84b8390', name: this.name, class: this.getClassMap, type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label || undefined, "aria-disabled": this.disabled || this.loading, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp }, h("div", { key: 'f9adeb219026e966ce85db7127696e9bc60adb57', class: "bds-button__content" }, h("span", { key: 'e4dbb94477218eb831f534ffdd7b816532718b22', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: 'a04168309cfd6bba4eb47d4aa8c2e43f44df4d12', name: "icon" })), h("slot", { key: '47094f3e68f8b98fa16c6ab6e75fa2fcaeb0a8cd' }), h("span", { key: 'fb548f03228e22abdb1deaf56b60fcc7ed53a9e9', class: "bds-button__content-badge" }, h("slot", { key: '7e2d30d8c750f1472825618be9730ddedc974bd1', name: "badge" })), this.disclosure && (h("span", { key: 'eb4ba3930fc8a936d6825ce35961a9a9b2866be6', class: "bds-button__content-icon" }, h("i", { key: '8bafff19aedeacc4dfae9fd9a5b9006ffb185d85', class: "bds-icon-chevron-down" }))))));
+    }
+    static get is() { return "bds-button"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['label']",
+                    "resolved": "string",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The accessible name for the button, used for screen readers. It should be provided by the user for accessibility purposes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "disabled is a boolean attribute. Disables the button when true, preventing user interaction and applying disabled styles."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['name']",
+                    "resolved": "string",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "name is a string attribute. The name attribute for the button, useful for form submissions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['type']",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "type is a string attribute. The type of the button, which can be 'button', 'submit', or 'reset'. Default is 'button'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "BUTTON_TYPES.BUTTON"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['color']",
+                    "resolved": "\"default\" | \"error\" | \"primary\" | \"success\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "color is a string attribute. The color theme of the button, which can be 'default', 'primary', 'success', or 'error'. Default is 'default'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "CORE_COLORS.DEFAULT"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['variant']",
+                    "resolved": "\"default\" | \"outline\" | \"plain\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "variant is a string attribute. The visual style of the button, which can be 'default', 'outline', or 'plain'. Default is 'default'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "BUTTON_VARIANTS.DEFAULT"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['size']",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "size is a string attribute. The size of the button, which can be 'small', 'medium', or 'large'. Default is 'medium'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "BUTTON_SIZES.MEDIUM"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['loading']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "loading is a boolean attribute. Indicates whether the button is in a loading state, which can be used to show a loading spinner and disable the button. Default is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "disclosure": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButton['disclosure']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IButton": {
+                            "location": "import",
+                            "path": "./types/IButton",
+                            "id": "src/components/actions/bds-button/types/IButton.ts::IButton",
+                            "referenceLocation": "IButton"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "disclosure is a boolean attribute. Used to show a chevron down at the of the content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disclosure",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "currentState": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsClick",
+                "name": "bdsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "emit event to click"
+                },
+                "complexType": {
+                    "original": "UIEvent",
+                    "resolved": "UIEvent",
+                    "references": {
+                        "UIEvent": {
+                            "location": "global",
+                            "id": "global::UIEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "type",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "color",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "variant",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "size",
+                "methodName": "checkPropValues"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/actions/bds-button/types/IButton.js

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

package/dist/collection/components/actions/bds-button/types/enum.js

@@ -0,0 +1,15 @@
+export const BUTTON_VARIANTS = {
+    DEFAULT: 'default',
+    OUTLINE: 'outline',
+    PLAIN: 'plain',
+};
+export const BUTTON_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+export const BUTTON_TYPES = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+};

package/dist/collection/components/actions/bds-button/types/types.js

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

package/dist/collection/components/titles-text/bds-typography/bds-typography.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { ALIGNMENT } from "../../../types/alignment";
 import { SIZES } from "../../../types/size";
-import { STATES } from "../../../types/states";
+import { COMPONENT_STATES } from "../../../types/states";
 import { inheritAriaAttributes } from "../../../utils/a11y/index";
 import { TAG_ELEMENT, VARIANT_TYPOGRAPHY } from "./types/enum";
 import { FILENAME, getAttributesByTag, VARIANT_CONFIG } from "./utils/bds-typography-utils";
@@ -66,7 +66,7 @@ export class BdsTypography {
         /** Typography size token. */
         this.size = SIZES.M;
         /** Visual state (if supported by variant). */
-        this.state = STATES.DEFAULT;
+        this.state = COMPONENT_STATES.DEFAULT;
         /** Additional custom CSS class. */
         this.customClass = '';
         /** HTML tag used for rendering. */
@@ -122,7 +122,7 @@ export class BdsTypography {
         const isInteractiveTag = ['a', 'label'].includes(this.getTagName);
         return {
             'aria-required': this.isRequired && isRequired,
-            'aria-disabled': this.state === STATES.DISABLED && isInteractiveTag,
+            'aria-disabled': this.state === COMPONENT_STATES.DISABLED && isInteractiveTag,
         };
     }
     getVariantStateStyles() {
@@ -147,7 +147,7 @@ export class BdsTypography {
         };
         const classes = this.getVariantStateStyles();
         const { canUseTooltip = null, isRequired = null } = this.getVariantConfig();
-        return (h(Host, { key: 'e816237127a0bec2f223c3c11c405830b3bc530f', class: "bds-typography" }, h(TagName, { key: '5428ad8d55990feae5190e19c6372445f76d504b', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: '5f5b95afd7799c988607174d45dfdffe018438a8' }), this.isRequired && isRequired && (h("em", { key: '5d57fc3a0aed14887df9fb03f2b279204e99861c', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && h("em", { key: '9b89f3e48de66ebcd27755d9ec19ef261b73250e', class: "bds-typography__info-icon bds-icon-info-circle" }))));
+        return (h(Host, { key: '80c41f5a33f3089005b9cdf2c7db51e07272b5df', class: "bds-typography" }, h(TagName, { key: '623e0a57bf2341ecaeba7e670d01a06f891f4423', class: classes, style: { webkitLineClamp: this.maxLines }, ...attributes }, h("slot", { key: 'fa7fa6e7f6cbe6133a1c52bf2f219b2927847a88' }), this.isRequired && isRequired && (h("em", { key: 'aa339d8fbf758491db17ac9c471327a0466bf3dc', class: "bds-typography__required-indicator", "aria-hidden": "true" }, "*")), this.tooltipText && canUseTooltip && h("em", { key: '98a6c58192b585fbbe01a93c031e9ae3c20cf3ca', class: "bds-typography__info-icon bds-icon-info-circle" }))));
     }
     static get is() { return "bds-typography"; }
     static get originalStyleUrls() {
@@ -241,7 +241,7 @@ export class BdsTypography {
                 "setter": false,
                 "reflect": true,
                 "attribute": "state",
-                "defaultValue": "STATES.DEFAULT"
+                "defaultValue": "COMPONENT_STATES.DEFAULT"
             },
             "customClass": {
                 "type": "string",

package/dist/collection/components/titles-text/bds-typography/utils/bds-typography-utils.js

@@ -1,4 +1,4 @@
-import { STATES } from "../../../../types/states";
+import { COMPONENT_STATES } from "../../../../types/states";
 import { SIZES } from "../../../../types/size";
 /*
  * LINK consts
@@ -9,17 +9,17 @@ export const FILENAME = 'download';
  */
 export const VARIANT_CONFIG = {
     link: {
-        states: [STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
+        states: [COMPONENT_STATES.DISABLED /* STATES.VISITED, STATES.HOVER, STATES.ACTIVE, STATES.FOCUS */],
         size: [SIZES.S, SIZES.M],
     },
     label: {
-        states: [STATES.DISABLED],
+        states: [COMPONENT_STATES.DISABLED],
         isRequired: true,
         canUseTooltip: true,
     },
     heading: { canUseTooltip: true },
     subheading: { canUseTooltip: true },
-    helper: { states: [STATES.ERROR] },
+    helper: { states: [COMPONENT_STATES.ERROR] },
     display: { size: [SIZES.XS, SIZES.S, SIZES.M, SIZES.L, SIZES.XL] },
 };
 /*
@@ -28,7 +28,7 @@ export const VARIANT_CONFIG = {
 export const getAttributesByTag = (comp, tagName) => {
     const ATTR_MAP = {
         a: {
-            href: comp.state !== STATES.DISABLED ? comp.sanitizedHref : null,
+            href: comp.state !== COMPONENT_STATES.DISABLED ? comp.sanitizedHref : null,
             target: comp.target,
             download: comp.isDownloadable ? comp.filename : null,
             rel: comp.target === '_blank' ? 'noopener noreferrer' : undefined,

package/dist/collection/types/coreColors.js

@@ -0,0 +1,6 @@
+export const CORE_COLORS = {
+    DEFAULT: 'default',
+    PRIMARY: 'primary',
+    SUCCESS: 'success',
+    ERROR: 'error',
+};

package/dist/collection/types/states.js

@@ -1,4 +1,4 @@
-export const STATES = {
+export const COMPONENT_STATES = {
     DEFAULT: 'default',
     ERROR: 'error',
     DISABLED: 'disabled',

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

@@ -0,0 +1,16 @@
+/**
+ * Validates a component prop against a list of accepted values.
+ * If the current value is invalid, the prop is reset to the fallback and a warning is issued.
+ *
+ * @param acceptedValues - The list of valid values for the prop.
+ * @param fallbackValue - The value to apply when the current value is invalid.
+ * @param element - The host element whose property will be corrected.
+ * @param propertyName - The name of the prop to validate.
+ */
+export function validatePropValue(acceptedValues, fallbackValue, element, propertyName) {
+    const currentValue = element[propertyName];
+    if (acceptedValues.includes(currentValue))
+        return;
+    element[propertyName] = fallbackValue;
+    console.warn(`[BorealDS] Invalid value "${currentValue}" for prop "${propertyName}" on <${element.tagName.toLowerCase()}>. Expected one of: ${acceptedValues.join(', ')}.`);
+}

package/dist/esm/{attributes-B9wshZ_4.js → attributes-Ba6iHqJA.js}

@@ -1,10 +1,3 @@
-const STATES = {
-    DEFAULT: 'default',
-    ERROR: 'error',
-    DISABLED: 'disabled'};
-const STATUS_VARIANT = {
-    INFO: 'info'};
-
 /**
  * Taken from StencilJS Ionic team
  * This helper pass the attributes passed to components directly to the inner element
@@ -83,4 +76,4 @@ const inheritAriaAttributes = (el, ignoreList) => {
     return inheritAttributes(el, attributesToInherit);
 };
 
-export { STATUS_VARIANT as S, STATES as a, inheritAriaAttributes as i };
+export { inheritAriaAttributes as i };

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-DgFiTd6X.js';
-import { S as STATUS_VARIANT, i as inheritAriaAttributes } from './attributes-B9wshZ_4.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-DQvmq159.js';
+import { S as STATUS_VARIANT } from './states-DQR-jjOl.js';
+import { i as inheritAriaAttributes } from './attributes-Ba6iHqJA.js';
 
 /**
  * Ensure the given component instance has an auto-generated id if one wasn't provided.