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

package/dist/collection/components/helpers/bds-divider.css

@@ -0,0 +1,36 @@
+@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-divider[orientation=vertical] {
+  display: inline-block;
+  height: 100%;
+}
+bds-divider[orientation=horizontal] {
+  display: block;
+  width: 100%;
+}
+
+.bds-divider {
+  background-color: var(--boreal-ui-default-lighter);
+}
+.bds-divider--horizontal {
+  width: 100%;
+  height: var(--boreal-spacing-4xs);
+}
+.bds-divider--vertical {
+  width: var(--boreal-spacing-4xs);
+  height: 100%;
+}

package/dist/collection/components/helpers/bds-divider.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+import { DIVIDER_ORIENTATIONS } from "./types/enum";
+import { validatePropValue } from "../../utils/index";
+/**
+ * Divider component for creating visual separators between content sections.
+ *
+ * @summary A simple visual separator that can be oriented horizontally or vertically.
+ *
+ * @csspart divider - A divider element that visually separates content.
+ *
+ * @attr {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+ *
+ * @property {DividerOrientation} orientation - The orientation of the divider (horizontal or vertical)
+ *
+ */
+export class BdsDivider {
+    constructor() {
+        /**
+         * The orientation of the divider.
+         * Allowed values: horizontal | vertical
+         */
+        this.orientation = DIVIDER_ORIENTATIONS.HORIZONTAL;
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(DIVIDER_ORIENTATIONS), DIVIDER_ORIENTATIONS.HORIZONTAL, this.el, 'orientation');
+    }
+    get orientationClass() {
+        return {
+            'bds-divider': true,
+            [`bds-divider--${this.orientation}`]: true,
+        };
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    render() {
+        return h("div", { key: 'd34f930e98129a75ca706f4695e40e577d5a12f6', part: "divider", class: this.orientationClass, role: "separator", "aria-orientation": this.orientation });
+    }
+    static get is() { return "bds-divider"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-divider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-divider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IDivider['orientation']",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "IDivider": {
+                            "location": "import",
+                            "path": "./types/IDivider",
+                            "id": "src/components/helpers/types/IDivider.ts::IDivider",
+                            "referenceLocation": "IDivider"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of the divider.\nAllowed values: horizontal | vertical"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "DIVIDER_ORIENTATIONS.HORIZONTAL"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "orientation",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/helpers/types/IDivider.js

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

package/dist/collection/components/helpers/types/enum.js

@@ -0,0 +1,4 @@
+export const DIVIDER_ORIENTATIONS = {
+    HORIZONTAL: 'horizontal',
+    VERTICAL: 'vertical',
+};

package/dist/collection/components/helpers/types/types.js

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

package/dist/collection/components/images-icons/bds-avatar/bds-avatar.css

@@ -0,0 +1,52 @@
+@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-avatar {
+  font-family: var(--boreal-typography-font-family-primary);
+}
+.bds-avatar__container {
+  display: flex;
+  align-items: center;
+  gap: var(--boreal-spacing-xs);
+}
+.bds-avatar__circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--boreal-layout-ml);
+  height: var(--boreal-layout-ml);
+  border-radius: var(--boreal-radius-full);
+  background-color: var(--bds-avatar-background);
+}
+.bds-avatar__initials {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--boreal-typography-font-size-xs);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-xs);
+  color: var(--bds-avatar-initials-color);
+  user-select: none;
+}
+.bds-avatar__name {
+  font-size: var(--boreal-typography-font-size-sm);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-sm);
+  color: var(--boreal-text-default);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/collection/components/images-icons/bds-avatar/bds-avatar.js

@@ -0,0 +1,219 @@
+import { Host, h } from "@stencil/core";
+import { AVATAR_VARIANT } from "./types";
+import { inheritAriaAttributes, validatePropValue } from "../../../utils/index";
+/**
+ * Avatar component used to display user initials or names for visual identification.
+ *
+ * @summary Displays a circular avatar with user initials and optional name label.
+ * Uses Boreal Design System tokens for consistent styling across platforms.
+ *
+ * @attr {string} username - The full name used to generate initials or display as label.
+ * @attr {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+ * @attr {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+ * @attr {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+ *
+ * @property {string} username - The full name used to generate initials or display as label.
+ * @property {"icon"|"name"|"full"} variant - Controls which avatar elements are displayed: icon (initials), name, or both.
+ * @property {string} background - Custom background color (hex code), defaults to $boreal-ui-success-base.
+ * @property {string} initialsColor - Custom initials text color (hex code), defaults to $boreal-text-inverse.
+ *
+ * @cssprop --bds-avatar-background - Custom background color HEX code.
+ * @cssprop --bds-avatar-initials-color - Custom text color HEX code.
+ */
+export class BdsAvatar {
+    constructor() {
+        this.inheritedAttributes = {};
+        /** The full name used to generate initials or display as label **/
+        this.username = '';
+        /**
+         * Controls which avatar elements are displayed: icon (initials), name, or both.
+         * @default 'full'
+         */
+        this.variant = AVATAR_VARIANT.FULL;
+        /** Custom background color as hex code. If not provided, defaults to Boreal success color **/
+        this.background = '';
+        /** Custom text color as hex code. If not provided, defaults to white **/
+        this.initialsColor = '';
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
+    }
+    componentDidLoad() {
+        if (this.normalizedUsername.length <= 0 && this.variant !== AVATAR_VARIANT.ICON)
+            console.warn('[BorealDS Avatar] Missing required `username` prop. The avatar relies on it to display initials or name.');
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(AVATAR_VARIANT), AVATAR_VARIANT.FULL, this.el, 'variant');
+    }
+    get normalizedUsername() {
+        return this.username.trim();
+    }
+    /**
+     * Utility function to extract initials from the username.
+     * Takes the first letter of the first and last name.
+     * Examples: "John Doe" -> "JD", "John" -> "J", "" -> ""
+     *
+     * @param name - The full name to extract initials from
+     * @returns The initials (up to 2 characters)
+     */
+    extractInitials(name = '') {
+        if (name.length === 0)
+            return '';
+        const nameParts = name
+            .trim()
+            .split(/\s+/)
+            .filter(part => part.length > 0);
+        if (nameParts.length === 0)
+            return '';
+        if (nameParts.length === 1)
+            return nameParts[0].charAt(0).toUpperCase();
+        const firstLetter = nameParts[0].charAt(0).toUpperCase();
+        const lastLetter = nameParts[nameParts.length - 1].charAt(0).toUpperCase();
+        return `${firstLetter}${lastLetter}`;
+    }
+    getAvatarStyles() {
+        const customBackground = this.background || 'var(--boreal-ui-success-base)';
+        const customTextColor = this.initialsColor || 'var(--boreal-text-inverse)';
+        return {
+            ['--bds-avatar-background']: `${customBackground}`,
+            ['--bds-avatar-initials-color']: `${customTextColor}`,
+        };
+    }
+    render() {
+        const initials = this.extractInitials(this.normalizedUsername);
+        const avatarAriaLabel = this.normalizedUsername.length > 0 ? `User name: ${this.normalizedUsername}` : 'User name';
+        const showIcon = this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.ICON;
+        const showName = this.normalizedUsername && (this.variant === AVATAR_VARIANT.FULL || this.variant === AVATAR_VARIANT.NAME);
+        return (h(Host, { key: '8c3cc5b02c02997a8aad688ae043522d07bc3239', class: "bds-avatar", role: "img", "aria-label": avatarAriaLabel, ...this.inheritedAttributes }, h("div", { key: '357ec2fbb0f4ad6c9b3fa54da78c55eab0a4f7f7', class: "bds-avatar__container" }, showIcon && (h("div", { key: '2dbc77e00bedf5e67f08337dad76eeca9fcffb28', class: "bds-avatar__circle", style: this.getAvatarStyles() }, h("span", { key: '6bbd987437cf03bc573363d86092349da5d12521', class: "bds-avatar__initials" }, initials))), showName && h("span", { key: '05e0480670c5ba15b8518325910a661aefb32da8', class: "bds-avatar__name" }, this.normalizedUsername))));
+    }
+    static get is() { return "bds-avatar"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-avatar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "username": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IAvatar['username']",
+                    "resolved": "string",
+                    "references": {
+                        "IAvatar": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/images-icons/bds-avatar/types/index.ts::IAvatar",
+                            "referenceLocation": "IAvatar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The full name used to generate initials or display as label *"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "username",
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IAvatar['variant']",
+                    "resolved": "\"full\" | \"icon\" | \"name\"",
+                    "references": {
+                        "IAvatar": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/images-icons/bds-avatar/types/index.ts::IAvatar",
+                            "referenceLocation": "IAvatar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'full'"
+                        }],
+                    "text": "Controls which avatar elements are displayed: icon (initials), name, or both."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "AVATAR_VARIANT.FULL"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IAvatar['background']",
+                    "resolved": "string",
+                    "references": {
+                        "IAvatar": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/images-icons/bds-avatar/types/index.ts::IAvatar",
+                            "referenceLocation": "IAvatar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom background color as hex code. If not provided, defaults to Boreal success color *"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background",
+                "defaultValue": "''"
+            },
+            "initialsColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IAvatar['initialsColor']",
+                    "resolved": "string",
+                    "references": {
+                        "IAvatar": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/images-icons/bds-avatar/types/index.ts::IAvatar",
+                            "referenceLocation": "IAvatar"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom text color as hex code. If not provided, defaults to white *"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "initials-color",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/images-icons/bds-avatar/types/IAvatar.js

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

package/dist/collection/components/images-icons/bds-avatar/types/enum.js

@@ -0,0 +1,5 @@
+export const AVATAR_VARIANT = {
+    ICON: 'icon',
+    NAME: 'name',
+    FULL: 'full',
+};

package/dist/collection/components/images-icons/bds-avatar/types/index.js

@@ -0,0 +1,3 @@
+export * from './enum';
+export * from './types';
+export * from './IAvatar';

package/dist/collection/components/images-icons/bds-avatar/types/types.js

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

package/dist/collection/components/layouts/bds-grid/grid/bds-grid.css

@@ -0,0 +1,57 @@
+@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-grid {
+  /**
+   * @prop --bds-grid-nav-offset: Left offset reserved for navigation. Set to `64px` (global nav only) or `294px` (global + container nav).
+   */
+  --bds-grid-columns: var(--boreal-grid-columns-sm);
+  --bds-grid-gutter: var(--boreal-grid-gutter-sm);
+  --bds-grid-margin: var(--boreal-grid-margin-sm);
+  display: grid;
+  grid-template-columns: repeat(var(--bds-grid-columns), 1fr);
+  gap: var(--bds-grid-gutter);
+  padding-inline: var(--bds-grid-margin);
+  margin-inline-start: var(--bds-grid-nav-offset, 0px);
+  box-sizing: border-box;
+}
+
+@media (min-width: 769px) {
+  bds-grid {
+    --bds-grid-columns: var(--boreal-grid-columns-md);
+  }
+}
+@media (min-width: 960px) {
+  bds-grid {
+    --bds-grid-columns: var(--boreal-grid-columns-lg);
+    --bds-grid-margin: var(--boreal-grid-margin-lg);
+  }
+}
+@media (min-width: 1152px) {
+  bds-grid {
+    --bds-grid-gutter: var(--boreal-grid-gutter-xl);
+    --bds-grid-margin: var(--boreal-grid-margin-xl);
+  }
+}
+@media (min-width: 1344px) {
+  bds-grid {
+    --bds-grid-margin: var(--boreal-grid-margin-2xl);
+  }
+}
+bds-grid.bds-grid--fixed {
+  max-width: calc(var(--boreal-grid-fixed-max-columns-width) + 2 * var(--bds-grid-margin));
+  margin-inline: auto;
+}

package/dist/collection/components/layouts/bds-grid/grid/bds-grid.js

@@ -0,0 +1,100 @@
+import { h, Host } from "@stencil/core";
+import { validatePropValue } from "../../../../utils/index";
+import { GRID_LAYOUT } from "./types";
+/**
+ * 12-column CSS Grid layout container with 5 responsive breakpoints.
+ *
+ * Minimum browser support: Chrome/Edge (last 2), Firefox (last 2), Safari (last 2).
+ *
+ * @slot - Direct `bds-grid-item` children.
+ */
+export class BdsGrid {
+    constructor() {
+        /** `'fluid'` fills full width; `'fixed'` caps the column area at 960px and centres the container. */
+        this.layout = GRID_LAYOUT.FLUID;
+    }
+    checkPropValues() {
+        validatePropValue(Object.values(GRID_LAYOUT), GRID_LAYOUT.FLUID, this.el, 'layout');
+    }
+    componentWillLoad() {
+        this.checkPropValues();
+    }
+    render() {
+        return (h(Host, { key: 'e5610c3140f86d79b275de56c8a815badccdf03d', class: { 'bds-grid--fixed': this.layout === GRID_LAYOUT.FIXED }, style: { ...(this.rowGap && { 'row-gap': this.rowGap }) } }, h("slot", { key: 'ac13145d26bd923b6f5abe415b062728757d0fd5' })));
+    }
+    static get is() { return "bds-grid"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGrid['layout']",
+                    "resolved": "\"fixed\" | \"fluid\"",
+                    "references": {
+                        "IGrid": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid/types/index.ts::IGrid",
+                            "referenceLocation": "IGrid"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`'fluid'` fills full width; `'fixed'` caps the column area at 960px and centres the container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "GRID_LAYOUT.FLUID"
+            },
+            "rowGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IGrid['rowGap']",
+                    "resolved": "string",
+                    "references": {
+                        "IGrid": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/layouts/bds-grid/grid/types/index.ts::IGrid",
+                            "referenceLocation": "IGrid"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the row gap independently of the column gutter."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-gap"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "checkPropValues"
+            }];
+    }
+}

package/dist/collection/components/layouts/bds-grid/grid/types/IGrid.js

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

package/dist/collection/components/layouts/bds-grid/grid/types/enum.js

@@ -0,0 +1,4 @@
+export const GRID_LAYOUT = {
+    FIXED: 'fixed',
+    FLUID: 'fluid',
+};

package/dist/collection/components/layouts/bds-grid/grid/types/index.js

@@ -0,0 +1,3 @@
+export * from './enum';
+export * from './IGrid';
+export * from './types';

package/dist/collection/components/layouts/bds-grid/grid/types/types.js

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

package/dist/collection/components/layouts/bds-grid/grid-item/bds-grid-item.css

@@ -0,0 +1,70 @@
+@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-grid-item {
+  --_col-span: var(--_col-base, 12);
+  grid-column-end: span var(--_col-span);
+  grid-row-end: span var(--_row-base, 1);
+}
+
+bds-grid-item[col-span=full] {
+  grid-column: 1/-1;
+}
+
+bds-grid-item[row-span=full] {
+  grid-row: 1/-1;
+}
+
+@media (min-width: 320px) {
+  bds-grid-item {
+    --_col-span: var(--_col-sm, var(--_col-base, 12));
+  }
+  bds-grid-item[col-span-sm=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 769px) {
+  bds-grid-item {
+    --_col-span: var(--_col-md, var(--_col-sm, var(--_col-base, 12)));
+  }
+  bds-grid-item[col-span-md=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 960px) {
+  bds-grid-item {
+    --_col-span: var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12))));
+  }
+  bds-grid-item[col-span-lg=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 1152px) {
+  bds-grid-item {
+    --_col-span: var(--_col-xl, var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12)))));
+  }
+  bds-grid-item[col-span-xl=full] {
+    grid-column: 1/-1;
+  }
+}
+@media (min-width: 1344px) {
+  bds-grid-item {
+    --_col-span: var(--_col-2xl, var(--_col-xl, var(--_col-lg, var(--_col-md, var(--_col-sm, var(--_col-base, 12))))));
+  }
+  bds-grid-item[col-span-2xl=full] {
+    grid-column: 1/-1;
+  }
+}