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

package/dist/collection/components/feedback/bds-badge/bds-badge.js

@@ -0,0 +1,120 @@
+import { Host, h } from "@stencil/core";
+import { BADGE_VARIANT } from "./types/enum";
+import { validatePropValue } from "../../../utils/index";
+/**
+ * Badge component for displaying contextual status information with optional icon support.
+ *
+ * @summary A compact label component that communicates status or category using color-coded variants. Supports an optional icon slot and a disabled state.
+ *
+ * @slot - The text content of the badge.
+ * @slot icon - An icon displayed before the badge text content.
+ *
+ * @attr {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+ * @attr {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+ *
+ * @property {string} variant - Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'.
+ * @property {boolean} disabled - Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false.
+ */
+export class BdsBadge {
+    constructor() {
+        /** Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'. */
+        this.variant = BADGE_VARIANT.DEFAULT;
+        /** Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false. */
+        this.disabled = false;
+    }
+    /** Validates the `variant` prop against allowed values and resets to the default if invalid. */
+    checkPropValues() {
+        validatePropValue(Object.values(BADGE_VARIANT), BADGE_VARIANT.DEFAULT, this.el, 'variant');
+    }
+    /** Runs prop validation before the component is first rendered. */
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    /** Builds the BEM class map applied to the host element based on the current prop values. */
+    get badgeClasses() {
+        return {
+            'bds-badge': true,
+            [`bds-badge--${this.variant}`]: true,
+            'bds-badge--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'f686ff59037a77660bc82262b9374193dface206', class: this.badgeClasses, role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}`, "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '5089ac4144f7fdd1023ee3561010859b6b96ef3b', name: "icon" }), h("slot", { key: '44addf6e20aa27f1ed3df4ab728b5a0a37cc2f20' })));
+    }
+    static get is() { return "bds-badge"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBadge['variant']",
+                    "resolved": "\"danger\" | \"default\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IBadge": {
+                            "location": "import",
+                            "path": "./types/IBadge",
+                            "id": "src/components/feedback/bds-badge/types/IBadge.ts::IBadge",
+                            "referenceLocation": "IBadge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the visual style of the badge. Accepted values: 'default' | 'info' | 'success' | 'warning' | 'danger'. Default is 'default'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "BADGE_VARIANT.DEFAULT"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBadge['disabled']",
+                    "resolved": "boolean",
+                    "references": {
+                        "IBadge": {
+                            "location": "import",
+                            "path": "./types/IBadge",
+                            "id": "src/components/feedback/bds-badge/types/IBadge.ts::IBadge",
+                            "referenceLocation": "IBadge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the badge when true, reducing opacity and preventing pointer interaction. Default is false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/feedback/bds-badge/types/IBadge.js

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

package/dist/collection/components/feedback/bds-badge/types/enum.js

@@ -0,0 +1,5 @@
+import { STATUS_VARIANT } from "../../../../types/states";
+export const BADGE_VARIANT = {
+    ...STATUS_VARIANT,
+    DEFAULT: 'default',
+};

package/dist/collection/components/feedback/bds-banner/bds-banner.css

@@ -22,7 +22,7 @@
   border-left: 0;
   font-family: var(--boreal-typography-font-family-primary);
   height: 100%;
-  transition: all 0.3s ease-out;
+  transition: opacity 0.3s ease-out;
 }
 .bds-banner__vertical-line {
   width: var(--boreal-spacing-2xs);
@@ -113,7 +113,6 @@
 }
 .bds-banner--closing {
   opacity: 0;
-  height: 0;
 }
 .bds-banner--hidden {
   display: none;

package/dist/collection/components/feedback/bds-banner/bds-banner.js

@@ -17,9 +17,9 @@ import { inheritAriaAttributes, inheritAttributes } from "../../../utils/a11y/at
  * @property {boolean} closable - Shows a close button that allows users to close the banner. Defaults to false.
  * @property {boolean} closeButtonLabel - Aria label for the close button when visible.
  *
- * @fires bdsClose - Emitted when the banner is closed via the close button or `closeBanner` method.
+ * @fires bdsClose - Emitted when the banner is closed via the close button or `close` method.
  *
- * @method closeBanner - Programmatic method to close the banner and emit the `bdsClose` event.
+ * @method close - Programmatic method to close the banner and emit the `bdsClose` event.
  *
  */
 export class BdsBanner {
@@ -65,7 +65,14 @@ export class BdsBanner {
     /**
      * Programmatic method to close the banner and emit the `bdsClose` event
      */
-    async closeBanner() {
+    async open() {
+        if (!this.isOpen)
+            this.isOpen = true;
+    }
+    /**
+     * Programmatic method to close the banner and emit the `bdsClose` event
+     */
+    async close() {
         this.handleCloseBanner();
     }
     handleCloseBanner(e) {
@@ -116,7 +123,7 @@ export class BdsBanner {
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { key: 'e53736fa4860cbbade794fdeae7f962b46de83cf', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: 'd2019d19a74602b73283cb8296b3acbdab1c5fa0' }, h("div", { key: 'f640c10fc372d8828a150b65751c757674fe2262', class: "bds-banner__vertical-line" }), h("div", { key: 'b08ac47616e7abde824329f8c713537eef58dd75', class: "bds-banner__container" }, h("div", { key: '2d168d2426ae68ee40547045ede9b780407034da', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: 'db079b36701222dd04f93030699264400714d6a6', "aria-hidden": "true", class: iconName })), h("div", { key: 'bf3425ec9ddaa61ddd42543dd9e469365f59b812', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: 'b4b270a4007a3326570667736d05d2dbfacdec73', class: "bds-banner__title" }, h("slot", { key: 'cf18b1b2ef02370ae6266188143de16156a98b18', name: "title" })), h("div", { key: '5008494eb66789884751de0259f4310cc43071ea', class: "bds-banner__body" }, h("slot", { key: '54d9b0af54ca113b894cde911287dee26619c5fd' })), h("div", { key: '748b00f58364df57f2ae26cc99d58bf291c1255f', class: "bds-banner__actions" }, h("slot", { key: '10a0b7fa7219c0da1578b05016e563a9068935ce', name: "actions" }))), this.closable && closeIcon)))));
+        return (h(Host, { key: 'e5ece2606d360add80831cb5cff99c07bb6fe9a6', class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, this.isOpen && (h(Fragment, { key: '1f25dabb048e75db7f9b155ed660ee3c07b878e7' }, h("div", { key: '363d11782e11ab9e34c30981653da02d62753611', class: "bds-banner__vertical-line" }), h("div", { key: '256f0e83e848d7e50b851524364314ac8a15f195', class: "bds-banner__container" }, h("div", { key: '3f16aa2ab24f0621e754276032dea90ba7a2fcae', class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { key: '1ee1cd86ac8e6fe63d77ab815f3467623e3701bf', "aria-hidden": "true", class: iconName })), h("div", { key: 'b56334ec515aa5036143a21e17ccbab0284edd52', id: "bds-banner__content", class: "bds-banner__content" }, h("div", { key: '454a4dd729fa18675c9db2a8101732688b15d4d7', class: "bds-banner__title" }, h("slot", { key: '06d51ebe3e862210035d98b2ecde35ba9872309f', name: "title" })), h("div", { key: '773524e70efc9e2412c3ca71913cc1f4da80a493', class: "bds-banner__body" }, h("slot", { key: '483f4358227e080db9ee884e6462743042a17bfe' })), h("div", { key: '6180025c2b07adc050d716269f76783f3f8164d2', class: "bds-banner__actions" }, h("slot", { key: '4e45498d447a003859421f98d884f289fc18e084', name: "actions" }))), this.closable && closeIcon)))));
     }
     static get is() { return "bds-banner"; }
     static get originalStyleUrls() {
@@ -231,7 +238,7 @@ export class BdsBanner {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the banner is closed via the close button or closeBanner method."
+                    "text": "Emitted when the banner is closed via the close button or close method."
                 },
                 "complexType": {
                     "original": "void",
@@ -242,7 +249,24 @@ export class BdsBanner {
     }
     static get methods() {
         return {
-            "closeBanner": {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatic method to close the banner and emit the `bdsClose` event",
+                    "tags": []
+                }
+            },
+            "close": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],

package/dist/collection/components/feedback/bds-spinner/bds-spinner.css

@@ -14,17 +14,13 @@
 * This file contains mixins and functions for common interactions styles such as focus rings and transitions.
 * These are used across multiple components to ensure consistency in interaction feedback.
 */
-:host {
-  display: block;
-}
-
-.bds-spinner {
+bds-spinner {
   display: inline-block;
   position: relative;
   width: 1em;
   height: 1em;
 }
-.bds-spinner::before, .bds-spinner::after {
+bds-spinner::before, bds-spinner::after {
   content: "";
   position: absolute;
   border-color: transparent transparent var(--boreal-primary-base) transparent;
@@ -37,22 +33,25 @@
   height: 100%;
   box-sizing: border-box;
 }
-.bds-spinner::before {
+bds-spinner::before {
   opacity: 0.2;
   border-style: dashed;
   animation: spin 0.8s linear infinite;
 }
-.bds-spinner::after {
+bds-spinner::after {
   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);

package/dist/collection/components/feedback/bds-spinner/bds-spinner.js

@@ -41,7 +41,7 @@ export class BdsSpinner {
         };
     }
     render() {
-        return (h(Host, { key: 'b38497732140f7e9dd155199c49f8365f00b004b', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, h("span", { key: '47befa4469a3cf297493c54bcb8acc5bca76fbd3', class: "bds-spinner__sr-only" }, this.label)));
+        return (h(Host, { key: '7e7846adadb6224abfcaaf2478768b72ec712659', class: this.getClassMap, role: "status", "aria-label": this.label, "aria-live": "polite", "aria-busy": "true" }, h("span", { key: '1c6aad446ed35a3adcb4e4f28fd4a3e7b9b7cb3a', class: "bds-spinner__sr-only" }, this.label)));
     }
     static get is() { return "bds-spinner"; }
     static get originalStyleUrls() {

package/dist/collection/components/feedback/bds-status/bds-status.css

@@ -0,0 +1,101 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+.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: inline-flex;
+  align-items: 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: inline-flex;
+  align-items: 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);
+}

package/dist/collection/components/feedback/bds-status/bds-status.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+import { PROCESS_STATUS } from "../../../types/index";
+import { INDICATOR_TYPES } from "./types/enum";
+import { validatePropValue } from "../../../utils/index";
+/**
+ * Status badge component for communicating the current state of an item or process.
+ *
+ * @slot - The label content of the badge, typically plain text.
+ * @slot icon - Icon content rendered before the label.
+ *
+ */
+export class BdsStatus {
+    constructor() {
+        /** 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 = 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() {
+        validatePropValue(Object.values(PROCESS_STATUS), PROCESS_STATUS.NEUTRAL, this.el, 'state');
+        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 (h(Host, { key: '9a952b22de8565fcca464d045f71ea86c92c8632', class: this.classMap, role: "status" }, this.indicator === INDICATOR_TYPES.DOT ? h("div", { class: "bds-status__dot", "aria-hidden": "true" }) : '', h("slot", { key: '47e03b139fcb4da8b15fe115518856c54d02a320', name: "icon" }), h("slot", { key: 'e512e975c2df8fa3e3380f27808eec96be5ad455' })));
+    }
+    static get is() { return "bds-status"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-status.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-status.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IStatus['state']",
+                    "resolved": "\"cancel\" | \"complete\" | \"in-progress\" | \"neutral\" | \"pending\"",
+                    "references": {
+                        "IStatus": {
+                            "location": "import",
+                            "path": "./types/IStatus",
+                            "id": "src/components/feedback/bds-status/types/IStatus.ts::IStatus",
+                            "referenceLocation": "IStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "state is a string attribute. Controls the visual state variant of the status badge.\nDetermines the background, accent, and text colors applied to the element.\nAn invalid value falls back to `\"neutral\"` and a warning is set on the host element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "PROCESS_STATUS.NEUTRAL"
+            },
+            "indicator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IStatus['indicator']",
+                    "resolved": "\"dot\" | \"icon\" | \"none\"",
+                    "references": {
+                        "IStatus": {
+                            "location": "import",
+                            "path": "./types/IStatus",
+                            "id": "src/components/feedback/bds-status/types/IStatus.ts::IStatus",
+                            "referenceLocation": "IStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "indicator is a string attribute. Controls the type of indicator rendered before the slotted label.\nAn invalid value falls back to `\"none\"` and a warning is set on the host element."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "indicator",
+                "defaultValue": "INDICATOR_TYPES.NONE"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "state",
+                "methodName": "checkPropValues"
+            }, {
+                "propName": "indicator",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/feedback/bds-status/types/IStatus.js

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

package/dist/collection/components/feedback/bds-status/types/enum.js

@@ -0,0 +1,5 @@
+export const INDICATOR_TYPES = {
+    NONE: 'none',
+    DOT: 'dot',
+    ICON: 'icon',
+};

package/dist/collection/components/feedback/bds-status/types/types.js

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