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

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

@@ -1,3 +1,19 @@
+@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-button {
   position: relative;
   display: inline-flex;
@@ -13,10 +29,10 @@ bds-button {
   appearance: none;
   border: 1px solid transparent;
   height: fit-content;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
   margin: var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);
   outline: none;
-  font-family: "Inter", sans-serif;
+  font-family: var(--boreal-typography-font-family-primary);
   font-weight: var(--boreal-typography-font-weight-semibold);
   width: fit-content;
   vertical-align: middle;
@@ -135,11 +151,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--default:active, .bds-button.bds-button--var-default.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-default.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -163,11 +179,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-base);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--primary:active, .bds-button.bds-button--var-default.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-dark);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -191,11 +207,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--success:focus {
   background-color: var(--boreal-ui-success-base);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--success:active, .bds-button.bds-button--var-default.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-dark);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -219,11 +235,11 @@ bds-button {
 }
 .bds-button.bds-button--var-default.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-base);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--error:active, .bds-button.bds-button--var-default.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-dark);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-default.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-default.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;
@@ -250,11 +266,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--default:active, .bds-button.bds-button--var-outline.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -278,11 +294,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--primary:active, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -306,11 +322,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--success:focus {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--success:active, .bds-button.bds-button--var-outline.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -334,11 +350,11 @@ bds-button {
 }
 .bds-button.bds-button--var-outline.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--error:active, .bds-button.bds-button--var-outline.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-outline.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;
@@ -365,11 +381,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--default:focus {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--default:active, .bds-button.bds-button--var-plain.bds-button--default.bds-button--state-active {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--default.bds-button--is-loading {
   cursor: not-allowed;
@@ -393,11 +409,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--primary:focus {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--primary:active, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--state-active {
   background-color: var(--boreal-ui-primary-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--primary.bds-button--is-loading {
   cursor: not-allowed;
@@ -421,11 +437,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--success:focus {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--success:active, .bds-button.bds-button--var-plain.bds-button--success.bds-button--state-active {
   background-color: var(--boreal-ui-success-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--success.bds-button--is-loading {
   cursor: not-allowed;
@@ -449,11 +465,11 @@ bds-button {
 }
 .bds-button.bds-button--var-plain.bds-button--error:focus {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
 }
 .bds-button.bds-button--var-plain.bds-button--error:active, .bds-button.bds-button--var-plain.bds-button--error.bds-button--state-active {
   background-color: var(--boreal-ui-danger-lighter);
-  box-shadow: 0px 0px 0px 1px var(--boreal-ui-inverse), 0px 0px 0px 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus), 0 1px 2px 0 rgba(19, 19, 22, 0.15) inset;
 }
 .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-disabled, .bds-button.bds-button--var-plain.bds-button--error.bds-button--is-loading {
   cursor: not-allowed;

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

@@ -2,7 +2,6 @@ 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.
@@ -99,7 +98,7 @@ export class BdsButton {
         validatePropValue(Object.values(BUTTON_VARIANTS), BUTTON_VARIANTS.DEFAULT, this.el, 'variant');
         validatePropValue(Object.values(BUTTON_SIZES), BUTTON_SIZES.MEDIUM, this.el, 'size');
     }
-    /**  */
+    /** Before component rendered */
     componentWillLoad() {
         this.checkPropValues();
     }
@@ -150,7 +149,7 @@ export class BdsButton {
     }
     /* 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" }))))));
+        return (h("button", { key: '4f71bb10d1910ea7b1fc0d64eedb6269e7049a89', 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: 'e28da0b776917c6a2c0efc6c7140a2bfa979b708', class: "bds-button__content" }, h("span", { key: 'ce3d60b504bbf38dc7116560dbfbe51c955f79db', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '23b6bbb9d4fbf8ad5e0e584cddaac477edf4a91e', name: "icon" })), h("slot", { key: 'adcdc5d87a8db4e346d272b843966405692a2a32' }), h("span", { key: 'c908b3a8a18ba4cce854ee20d064178f6420d007', class: "bds-button__content-badge" }, h("slot", { key: 'ce66f69366dc7436a8f8ca1b2b8f55b91a225ec8', name: "badge" })), this.disclosure && (h("span", { key: '921c0f144f2616da238356705c1e5ff634406b87', class: "bds-button__content-icon" }, h("i", { key: '9dc7a891ac4fcb1a73113aeae83976d74cff0c2e', class: "bds-icon-chevron-down" }))))));
     }
     static get is() { return "bds-button"; }
     static get formAssociated() { return true; }

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

@@ -1,3 +1,19 @@
+@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-banner {
   position: relative;
   display: flex;
@@ -98,4 +114,7 @@
 .bds-banner--closing {
   opacity: 0;
   height: 0;
+}
+.bds-banner--hidden {
+  display: none;
 }

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);
+  }
+}