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

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: var(--boreal-depth-box-shadow-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,264 @@
+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, KeyboardController } 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();
+        this._keyboard = new KeyboardController();
+        /** 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();
+        this._setupKeyboard();
+    }
+    disconnectedCallback() {
+        this._keyboard.detach();
+    }
+    get _role() {
+        return this.inheritedAttributes['role'] ?? 'toolbar';
+    }
+    _setupKeyboard() {
+        if (this._role === 'group') {
+            return;
+        }
+        this._keyboard.attach(this.el).setLinearNavigation({
+            items: 'bds-button:not([disabled]) button',
+            orientation: this.orientation,
+            focusStrategy: { type: 'roving-tabindex' },
+            onActivate: () => document.activeElement?.click(),
+        });
+    }
+    /** 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: 'ff0a8da321995a4bd1057fd0c866248e48ec5bdf', ...this.inheritedAttributes, role: this._role, tabindex: "-1", class: this.classMapButtonGroup, "aria-orientation": this._role === 'toolbar' ? this.orientation : undefined, "aria-label": this.label }, h("slot", { key: '9e59ad6dd8a6c58da722e17dd6e8b8ff49d8568b' })));
+    }
+    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);
 }