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

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

@@ -17,7 +17,7 @@ import { validatePropValue } from "../../../utils/helpers/validateProps";
  * @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 {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
  * @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.
  *
@@ -27,14 +27,14 @@ import { validatePropValue } from "../../../utils/helpers/validateProps";
  * @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 {string} size - The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'.
  * @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 'md' - Default size value
  * @default 'default' - Default status value
  * @default false - Default disabled value
  * @default '' - Default label value
@@ -59,7 +59,7 @@ export class BdsButton {
         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'. */
+        /** size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'. */
         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;
@@ -149,7 +149,7 @@ export class BdsButton {
     }
     /* render button depends on variant */
     render() {
-        return (h("button", { key: 'e5e7dd996abf7f32218d1871069f4cdd5070cb6b', 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: '815ced9f3e464c73f371227c098ea65a7097f376', class: "bds-button__content" }, h("span", { key: '350acb5924bb036afeb2c252c71261c5b2015b1e', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: '57feb7a77e7edd0d43c3432a5822cdaec60729f6', name: "icon" })), h("slot", { key: '07536c420613bc6d4d53b5947524e69999937d19' }), h("span", { key: 'ae96692ab7ffe82df0f2a2cb685704912724df35', class: "bds-button__content-badge" }, h("slot", { key: '6a802ae2b19f85c3678c16f7950b597efc981da6', name: "badge" })), this.disclosure && (h("span", { key: 'c38f71595010045c86257f6d5c3ce48a504966ad', class: "bds-button__content-icon" }, h("i", { key: 'a51aff2455184cd38b2d7ebd52cc9c590b81601c', class: "bds-icon-chevron-down" }))))));
+        return (h("button", { key: 'e1b3c4e0ae8662427a037f861cd57050051cc80a', 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: '24e37c5a359e19163411ab5ed7028eaa84caa2e5', class: "bds-button__content" }, h("span", { key: '90f4956274656c46ca43f7a903c9947d89367aba', class: "bds-button__content-icon bds-button__content-icon--start" }, h("slot", { key: 'd4a5344f9e3ebd5279b5e25a8f1982d523e6d2b8', name: "icon" })), h("slot", { key: '14b26b5e5f3bbabb1b88596b721f7ea864df1b15' }), h("span", { key: '34cb88da064a6c74596a4bb477fb0a9d6880b391', class: "bds-button__content-badge" }, h("slot", { key: '00775c4a742d49ca7f23d7dbe061f4333ed43907', name: "badge" })), this.disclosure && (h("span", { key: '0b959969969cf4c5a651b6c1488d35b1d0ec9b7b', class: "bds-button__content-icon" }, h("i", { key: '316154f31f1f57b67e126d407b3596c60f532b1a', class: "bds-icon-chevron-down" }))))));
     }
     static get is() { return "bds-button"; }
     static get formAssociated() { return true; }
@@ -332,7 +332,7 @@ export class BdsButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IButton['size']",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                     "references": {
                         "IButton": {
                             "location": "import",
@@ -346,7 +346,7 @@ export class BdsButton {
                 "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'."
+                    "text": "size is a string attribute. The size of the button, which can be 'sm', 'md', or 'lg'. Default is 'md'."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -4,9 +4,9 @@ export const BUTTON_VARIANTS = {
     PLAIN: 'plain',
 };
 export const BUTTON_SIZES = {
-    SMALL: 'small',
-    MEDIUM: 'medium',
-    LARGE: 'large',
+    SMALL: 'sm',
+    MEDIUM: 'md',
+    LARGE: 'lg',
 };
 export const BUTTON_TYPES = {
     BUTTON: 'button',

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

@@ -0,0 +1,77 @@
+@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-group {
+  display: inline-flex;
+  margin: var(--boreal-spacing-2xs) var(--boreal-spacing-3xs);
+  border-radius: var(--boreal-radius-xs);
+  outline: none;
+}
+.bds-button-group:focus {
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+}
+.bds-button-group bds-button {
+  position: relative;
+}
+.bds-button-group bds-button button {
+  margin: 0;
+  border-radius: var(--boreal-radius-none);
+  width: 100%;
+}
+.bds-button-group bds-button:hover {
+  z-index: 1;
+}
+.bds-button-group bds-button:focus-within, .bds-button-group bds-button:active {
+  z-index: 2;
+}
+.bds-button-group--horizontal {
+  flex-direction: row;
+  gap: var(--boreal-spacing-4xs);
+}
+.bds-button-group--horizontal bds-button:only-child button {
+  border-radius: var(--boreal-radius-xs);
+}
+.bds-button-group--horizontal bds-button:first-child:not(:only-child) button {
+  border-radius: var(--boreal-radius-xs) var(--boreal-radius-none) var(--boreal-radius-none) var(--boreal-radius-xs);
+}
+.bds-button-group--horizontal bds-button:last-child:not(:only-child) button {
+  border-radius: var(--boreal-radius-none) var(--boreal-radius-xs) var(--boreal-radius-xs) var(--boreal-radius-none);
+}
+.bds-button-group--horizontal:has(.bds-button--var-outline) {
+  gap: 0;
+}
+.bds-button-group--horizontal:has(.bds-button--var-outline) bds-button:nth-child(n+2) {
+  margin-left: calc(-1 * var(--boreal-spacing-4xs));
+}
+.bds-button-group--vertical {
+  flex-direction: column;
+  gap: var(--boreal-spacing-4xs);
+}
+.bds-button-group--vertical bds-button:only-child button {
+  border-radius: var(--boreal-radius-xs);
+}
+.bds-button-group--vertical bds-button:first-child:not(:only-child) button {
+  border-radius: var(--boreal-radius-xs) var(--boreal-radius-xs) var(--boreal-radius-none) var(--boreal-radius-none);
+}
+.bds-button-group--vertical bds-button:last-child:not(:only-child) button {
+  border-radius: var(--boreal-radius-none) var(--boreal-radius-none) var(--boreal-radius-xs) var(--boreal-radius-xs);
+}
+.bds-button-group--vertical:has(.bds-button--var-outline) {
+  gap: 0;
+}
+.bds-button-group--vertical:has(.bds-button--var-outline) bds-button:nth-child(n+2) {
+  margin-top: calc(-1 * var(--boreal-spacing-4xs));
+}

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

@@ -0,0 +1,245 @@
+import { Host, h } from "@stencil/core";
+import { ORIENTATIONS } from "../../../types/index";
+import { validatePropValue } from "../../../utils/helpers/validateProps";
+import { CORE_COLORS } from "../../../types/coreColors";
+import { BUTTON_VARIANTS, BUTTON_SIZES } from "../bds-button/types/enum";
+import { inheritAriaAttributes } from "../../../utils/index";
+import { Logger } from "../../../services/logger/index";
+/**
+ * Button group component for grouping related buttons together in a unified visual unit.
+ * @slot - The content of the button group, typically multiple `<bds-button>` elements.
+ *
+ */
+export class BdsButtonGroup {
+    constructor() {
+        this.inheritedAttributes = {};
+        this.logger = new Logger();
+        /** Controls the size applied to all child `<bds-button>` elements. Accepted values: `'sm'`, `'md'`, `'lg'`. Default is `'md'`. */
+        this.size = BUTTON_SIZES.MEDIUM;
+        /** Controls the layout direction of the grouped buttons. Accepted values: `'horizontal'`, `'vertical'`. Default is `'horizontal'`. */
+        this.orientation = ORIENTATIONS.HORIZONTAL;
+        /** Provides an accessible label for the button group. */
+        this.label = 'Button group';
+        /** Controls the color applied to all child `<bds-button>` elements. Accepted values: see `CoreColors`. Default is `default`. */
+        this.color = CORE_COLORS.DEFAULT;
+        /** Controls the variant applied to all child `<bds-button>` elements. Accepted values: `'default'`, `'outline'`, `'plain'`. Default is `'default'`. */
+        this.variant = BUTTON_VARIANTS.DEFAULT;
+    }
+    /** Validates `size`, `orientation`, `color`, and `variant` prop values on change, falling back to defaults if invalid. */
+    validateProps() {
+        validatePropValue(Object.values(BUTTON_SIZES), BUTTON_SIZES.MEDIUM, this.el, 'size');
+        validatePropValue(Object.values(ORIENTATIONS), ORIENTATIONS.HORIZONTAL, this.el, 'orientation');
+        validatePropValue(Object.values(CORE_COLORS), CORE_COLORS.DEFAULT, this.el, 'color');
+        validatePropValue(Object.values(BUTTON_VARIANTS), BUTTON_VARIANTS.DEFAULT, this.el, 'variant');
+    }
+    /** Propagates `size`, `color` and `variant` to all child `<bds-button>` elements via `setAttribute`. */
+    propagatePropsToButtons() {
+        this.el.querySelectorAll('bds-button').forEach((button) => {
+            button.setAttribute('size', this.size);
+            button.setAttribute('color', this.color);
+            button.setAttribute('variant', this.variant);
+        });
+    }
+    /** Validates props before the first render. */
+    componentWillLoad() {
+        this.validateProps();
+        this.inheritedAttributes = { ...inheritAriaAttributes(this.el) };
+    }
+    /** Warns when non-`<bds-button>` elements are placed in the default slot. */
+    validateSlotContent() {
+        const invalid = Array.from(this.el.children).filter(el => el.tagName.toLowerCase() !== 'bds-button');
+        if (invalid.length > 0) {
+            this.logger.warn('bds-button-group', `Only <bds-button> elements are allowed as children. Found: ${invalid.map(el => `<${el.tagName.toLowerCase()}>`).join(', ')}`);
+        }
+    }
+    /** Propagates initial props to child buttons after the component is mounted. */
+    componentDidLoad() {
+        this.validateSlotContent();
+        this.propagatePropsToButtons();
+    }
+    /** Builds the CSS class map applied to the host element based `orientation`. */
+    get classMapButtonGroup() {
+        return {
+            'bds-button-group': true,
+            [`bds-button-group--${this.orientation}`]: true,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'c8f201f1b9aa35e8a7f92a096f0d06a3f0918ce6', ...this.inheritedAttributes, tabindex: "-1", class: this.classMapButtonGroup, "aria-orientation": this.orientation, "aria-label": this.label }, h("slot", { key: 'd7b2601d9ae72c0dc79a99f8b1b428966e79c943' })));
+    }
+    static get is() { return "bds-button-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButtonGroup['size']",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "IButtonGroup": {
+                            "location": "import",
+                            "path": "./types/IButtonGroup",
+                            "id": "src/components/actions/bds-button-group/types/IButtonGroup.ts::IButtonGroup",
+                            "referenceLocation": "IButtonGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the size applied to all child `<bds-button>` elements. Accepted values: `'sm'`, `'md'`, `'lg'`. Default is `'md'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "BUTTON_SIZES.MEDIUM"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButtonGroup['orientation']",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "IButtonGroup": {
+                            "location": "import",
+                            "path": "./types/IButtonGroup",
+                            "id": "src/components/actions/bds-button-group/types/IButtonGroup.ts::IButtonGroup",
+                            "referenceLocation": "IButtonGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the layout direction of the grouped buttons. Accepted values: `'horizontal'`, `'vertical'`. Default is `'horizontal'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "ORIENTATIONS.HORIZONTAL"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButtonGroup['label']",
+                    "resolved": "string",
+                    "references": {
+                        "IButtonGroup": {
+                            "location": "import",
+                            "path": "./types/IButtonGroup",
+                            "id": "src/components/actions/bds-button-group/types/IButtonGroup.ts::IButtonGroup",
+                            "referenceLocation": "IButtonGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides an accessible label for the button group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Button group'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButtonGroup['color']",
+                    "resolved": "\"default\" | \"error\" | \"primary\" | \"success\"",
+                    "references": {
+                        "IButtonGroup": {
+                            "location": "import",
+                            "path": "./types/IButtonGroup",
+                            "id": "src/components/actions/bds-button-group/types/IButtonGroup.ts::IButtonGroup",
+                            "referenceLocation": "IButtonGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the color applied to all child `<bds-button>` elements. Accepted values: see `CoreColors`. Default is `default`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "CORE_COLORS.DEFAULT"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IButtonGroup['variant']",
+                    "resolved": "\"default\" | \"outline\" | \"plain\"",
+                    "references": {
+                        "IButtonGroup": {
+                            "location": "import",
+                            "path": "./types/IButtonGroup",
+                            "id": "src/components/actions/bds-button-group/types/IButtonGroup.ts::IButtonGroup",
+                            "referenceLocation": "IButtonGroup"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the variant applied to all child `<bds-button>` elements. Accepted values: `'default'`, `'outline'`, `'plain'`. Default is `'default'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "BUTTON_VARIANTS.DEFAULT"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "validateProps"
+            }, {
+                "propName": "orientation",
+                "methodName": "validateProps"
+            }, {
+                "propName": "color",
+                "methodName": "validateProps"
+            }, {
+                "propName": "variant",
+                "methodName": "validateProps"
+            }, {
+                "propName": "size",
+                "methodName": "propagatePropsToButtons"
+            }, {
+                "propName": "color",
+                "methodName": "propagatePropsToButtons"
+            }, {
+                "propName": "variant",
+                "methodName": "propagatePropsToButtons"
+            }];
+    }
+}

package/dist/collection/components/actions/bds-list-menu/bds-list-menu/bds-list-menu.css

@@ -19,7 +19,33 @@
 }
 
 .bds-list-menu {
+  /**
+  * @prop --bds-list-menu-max-width - The maximum width of the list menu. Default is 350px.
+  * @prop --bds-list-menu-max-height - The maximum height of the list menu content. Default is 240px.
+  */
   display: flex;
   flex-direction: column;
-  max-width: 350px;
+  max-width: var(--bds-list-menu-max-width, 350px);
+  background-color: var(--boreal-ui-inverse);
+  font-family: var(--boreal-typography-font-family-primary);
+}
+.bds-list-menu__content {
+  max-height: var(--bds-list-menu-max-height, 240px);
+  overflow-y: auto;
+  padding: var(--boreal-spacing-2xs);
+}
+.bds-list-menu__select-controls {
+  display: flex;
+  justify-content: space-around;
+  border-bottom: var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter);
+  margin-bottom: var(--boreal-spacing-3xs);
+}
+.bds-list-menu__header:not(:empty), .bds-list-menu__footer:not(:empty) {
+  padding: var(--boreal-spacing-xs) 0;
+}
+.bds-list-menu__header:not(:empty) {
+  border-bottom: var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter);
+}
+.bds-list-menu__footer:not(:empty) {
+  border-top: var(--boreal-spacing-4xs) solid var(--boreal-ui-default-lighter);
 }