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

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

@@ -1,7 +1,6 @@
-import { Host, h } from "@stencil/core";
+import { Fragment, Host, h } from "@stencil/core";
 import { STATUS_VARIANT } from "../../../types/index";
-import { inheritAriaAttributes } from "../../../utils/a11y/attributes";
-import { getBaseAttributes } from "../../../utils/helpers/common/BaseAttributes";
+import { inheritAriaAttributes, inheritAttributes } from "../../../utils/a11y/attributes";
 /**
  * Banner component used to display important messages with different status variants.
  *
@@ -12,16 +11,15 @@ import { getBaseAttributes } from "../../../utils/helpers/common/BaseAttributes"
  * @slot actions - Slot for action buttons or links displayed at the end of the banner.
  *
  * @attr {"info"|"success"|"warning"|"danger"} variant - Status variant of the banner, affects color and icon. Defaults to "info".
- * @attr {boolean} enable-close - When true, renders a close button that triggers the close event.
- * @attr {string} idComponent - Unique identifier for the banner element.
+ * @attr {boolean} closable - When true, renders a close button that triggers the close event.
  *
- * @property {string} idComponent - Unique identifier for the banner element.
  * @property {"info"|"success"|"warning"|"danger"} variant - Visual style variant: 'info', 'success', 'warning', or 'danger'. Defaults to "info".
- * @property {boolean} enableClose - Shows a close button that allows users to dismiss the banner. Defaults to false.
+ * @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 close - 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 `closeBanner` method.
  *
- * @method closeBanner - Programmatic method to close the banner and emit the `close` event.
+ * @method closeBanner - Programmatic method to close the banner and emit the `bdsClose` event.
  *
  */
 export class BdsBanner {
@@ -35,20 +33,21 @@ export class BdsBanner {
          * Controls the visibility of the banner. Set to false to hide the banner.
          */
         this.isOpen = true;
-        /**
-         * Unique identifier for the banner element.
-         */
-        this.idComponent = '';
         /**
          * Visual style variant: 'info', 'success', 'warning', or 'danger'.
          * @default "info"
          */
         this.variant = STATUS_VARIANT.INFO;
         /**
-         * Shows a close button that allows users to dismiss the banner.
+         * Shows a close button that allows users to close the banner.
          * @default false
          */
-        this.enableClose = false;
+        this.closable = false;
+        /**
+         * The aria label for the close button.
+         * @default ""
+         */
+        this.closeButtonLabel = '';
         this.handleAnimationEnd = () => {
             if (this.isClosing)
                 requestAnimationFrame(() => {
@@ -60,11 +59,11 @@ export class BdsBanner {
     componentWillLoad() {
         this.inheritedAttributes = {
             ...inheritAriaAttributes(this.el),
-            ...getBaseAttributes(this),
+            ...inheritAttributes(this.el),
         };
     }
     /**
-     * Programmatic method to close the banner and emit the `close` event
+     * Programmatic method to close the banner and emit the `bdsClose` event
      */
     async closeBanner() {
         this.handleCloseBanner();
@@ -73,10 +72,10 @@ export class BdsBanner {
         if (e !== undefined)
             e.preventDefault();
         this.isClosing = true;
-        this.close.emit();
+        this.bdsClose.emit();
     }
     handleEscapeKeyClose(e) {
-        if (!this.enableClose)
+        if (!this.closable)
             return;
         if (e.key === 'Escape')
             this.handleCloseBanner();
@@ -107,20 +106,17 @@ export class BdsBanner {
             'bds-banner': true,
             [`bds-banner--${this.variant}`]: true,
             'bds-banner--closing': this.isClosing,
+            'bds-banner--hidden': !this.isOpen,
         };
     }
     renderCloseIcon() {
-        return (
-        // TODO how to pass this inner aria attr from outside?
-        h("button", { role: "close-button", class: "bds-banner__close-icon", "aria-label": "Alert close button", onClick: e => this.handleCloseBanner(e) }, h("em", { class: "bds-icon-close" })));
+        return (h("button", { role: "close-button", class: "bds-banner__close-icon", "aria-label": this.closeButtonLabel, onClick: e => this.handleCloseBanner(e) }, h("em", { class: "bds-icon-close" })));
     }
     render() {
-        if (!this.isOpen)
-            return;
         const closeIcon = this.renderCloseIcon();
         const classes = this.getStyles();
         const iconName = this.getIconName();
-        return (h(Host, { class: classes, ...this.getAttributes(), onTransitionEnd: this.handleAnimationEnd, onKeyDown: (e) => this.handleEscapeKeyClose(e) }, h("div", { class: "bds-banner__vertical-line" }), h("div", { class: "bds-banner__container" }, h("div", { class: "bds-banner__status-icon", role: "status", "aria-live": "polite", "aria-label": `status ${this.variant}` }, h("em", { "aria-hidden": "true", class: iconName })), h("div", { class: "bds-banner__content" }, h("div", { class: "bds-banner__title" }, h("slot", { name: "title" })), h("div", { class: "bds-banner__body" }, h("slot", null)), h("div", { class: "bds-banner__actions" }, h("slot", { name: "actions" }))), this.enableClose && closeIcon)));
+        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)))));
     }
     static get is() { return "bds-banner"; }
     static get originalStyleUrls() {
@@ -135,26 +131,6 @@ export class BdsBanner {
     }
     static get properties() {
         return {
-            "idComponent": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Unique identifier for the banner element."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "id-component",
-                "defaultValue": "''"
-            },
             "variant": {
                 "type": "string",
                 "mutable": false,
@@ -185,12 +161,35 @@ export class BdsBanner {
                 "attribute": "variant",
                 "defaultValue": "STATUS_VARIANT.INFO"
             },
-            "enableClose": {
+            "closable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "IBanner['enableClose']",
+                    "original": "boolean",
                     "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Shows a close button that allows users to close the banner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "closable",
+                "defaultValue": "false"
+            },
+            "closeButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IBanner['closeButtonLabel']",
+                    "resolved": "string",
                     "references": {
                         "IBanner": {
                             "location": "import",
@@ -205,15 +204,15 @@ export class BdsBanner {
                 "docs": {
                     "tags": [{
                             "name": "default",
-                            "text": "false"
+                            "text": "\"\""
                         }],
-                    "text": "Shows a close button that allows users to dismiss the banner."
+                    "text": "The aria label for the close button."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "enable-close",
-                "defaultValue": "false"
+                "attribute": "close-button-label",
+                "defaultValue": "''"
             }
         };
     }
@@ -225,14 +224,14 @@ export class BdsBanner {
     }
     static get events() {
         return [{
-                "method": "close",
-                "name": "close",
+                "method": "bdsClose",
+                "name": "bdsClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the banner is closed via the close button or handleClose method."
+                    "text": "Emitted when the banner is closed via the close button or closeBanner method."
                 },
                 "complexType": {
                     "original": "void",
@@ -256,7 +255,7 @@ export class BdsBanner {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatic method to close the banner and emit the `close` event",
+                    "text": "Programmatic method to close the banner and emit the `bdsClose` event",
                     "tags": []
                 }
             }

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

@@ -0,0 +1,106 @@
+@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.
+*/
+:host {
+  display: block;
+}
+
+.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%;
+  box-sizing: border-box;
+}
+.bds-spinner::before {
+  opacity: 0.2;
+  border-style: dashed;
+  animation: spin 0.8s linear infinite;
+}
+.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);
+}
+
+.bds-spinner__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes draw-arc {
+  0% {
+    transform: rotate(0deg);
+  }
+  60% {
+    transform: rotate(330deg);
+  }
+  65% {
+    transform: rotate(335deg);
+  }
+  90% {
+    transform: rotate(350deg);
+  }
+  95% {
+    transform: rotate(355deg);
+  }
+  98% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,128 @@
+import { Host, h } from "@stencil/core";
+import { SPINNER_SIZES } from "./types/enum";
+import { validatePropValue } from "../../../utils/index";
+/**
+ * Spinner component used to indicate a loading or processing state.
+ *
+ * @summary Displays an animated circular spinner to communicate that content is loading.
+ *
+ * @attr {"small"|"medium"|"large"} size - Size of the spinner. Defaults to "small".
+ * @attr {string} label - Accessible label announced by screen readers. Defaults to "Loading".
+ *
+ * @property {"small"|"medium"|"large"} size - Controls the visual size of the spinner.
+ * @property {string} label - Text used as the accessible label for screen readers.
+ *
+ */
+export class BdsSpinner {
+    constructor() {
+        /**
+         * 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() {
+        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 (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)));
+    }
+    static get is() { return "bds-spinner"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ISpinner['size']",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "ISpinner": {
+                            "location": "import",
+                            "path": "./types/ISpinner",
+                            "id": "src/components/feedback/bds-spinner/types/ISpinner.ts::ISpinner",
+                            "referenceLocation": "ISpinner"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"small\""
+                        }],
+                    "text": "Controls the visual size of the spinner."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "SPINNER_SIZES.SMALL"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ISpinner['label']",
+                    "resolved": "string",
+                    "references": {
+                        "ISpinner": {
+                            "location": "import",
+                            "path": "./types/ISpinner",
+                            "id": "src/components/feedback/bds-spinner/types/ISpinner.ts::ISpinner",
+                            "referenceLocation": "ISpinner"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"Loading\""
+                        }],
+                    "text": "Accessible label announced by screen readers to describe the loading state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Loading'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

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

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

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

@@ -0,0 +1,5 @@
+export const SPINNER_SIZES = {
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
+};

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

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

package/dist/collection/components/forms/bds-checkbox/bds-checkbox.css

@@ -0,0 +1,90 @@
+@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-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  outline: none;
+}
+bds-checkbox .bds-checkbox__label {
+  font-family: var(--boreal-typography-font-family-primary);
+}
+bds-checkbox .bds-checkbox__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--boreal-stroke-default-light);
+  background: transparent;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+}
+bds-checkbox:hover .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+}
+bds-checkbox:focus-visible .bds-checkbox__box {
+  border-color: var(--boreal-stroke-focus);
+  outline: 2px solid var(--boreal-stroke-focus);
+  outline-offset: 1px;
+}
+bds-checkbox:active .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-bg-neutral);
+  outline: 2px solid var(--boreal-stroke-primary-light);
+}
+bds-checkbox.bds-checkbox--checked .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-base);
+  background: var(--boreal-ui-primary-base);
+  color: #fff;
+}
+bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate:hover .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+bds-checkbox.bds-checkbox--checked:focus-visible .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate:focus-visible .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-base);
+  background: var(--boreal-ui-primary-base);
+  outline: 2px solid var(--boreal-stroke-focus);
+}
+bds-checkbox.bds-checkbox--checked:active .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate:active .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+bds-checkbox.bds-checkbox--error .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+}
+bds-checkbox.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box, bds-checkbox.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+  background: var(--boreal-stroke-danger-base);
+}
+bds-checkbox.bds-checkbox--disabled {
+  pointer-events: none;
+}
+bds-checkbox.bds-checkbox--disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-bg-neutral);
+}
+bds-checkbox.bds-checkbox--disabled .bds-checkbox__label {
+  color: var(--boreal-text-disabled);
+}
+bds-checkbox.bds-checkbox--disabled.bds-checkbox--checked .bds-checkbox__box, bds-checkbox.bds-checkbox--disabled.bds-checkbox--indeterminate .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-light);
+  background: var(--boreal-ui-primary-light);
+  color: #fff;
+}