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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,90 @@
+@charset "UTF-8";
+/**
+* Common SCSS placeholder selectors shared across form and layout components.
+* This file is injected globally via `injectGlobalPaths` in `stencil.config.ts`,
+* so all component stylesheets can `@extend` these placeholders without an explicit import.
+*
+* NOTE: Placeholders must only use raw CSS values — `$boreal-*` token variables
+* are not available at this level util use style-guidelines.
+*/
+/**
+ * TODO: Refactor to use styleguidelines this work as first draft
+ **/
+/**
+* This file contains mixins and functions for common interactions styles such as focus rings and transitions.
+* These are used across multiple components to ensure consistency in interaction feedback.
+*/
+bds-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  outline: none;
+}
+bds-checkbox .bds-checkbox__label {
+  font-family: var(--boreal-typography-font-family-primary);
+}
+bds-checkbox .bds-checkbox__box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--boreal-stroke-default-light);
+  background: transparent;
+  transition: all 0.2s ease;
+  border-radius: 4px;
+}
+bds-checkbox:hover .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+}
+bds-checkbox:focus-visible .bds-checkbox__box {
+  border-color: var(--boreal-stroke-focus);
+  outline: 2px solid var(--boreal-stroke-focus);
+  outline-offset: 1px;
+}
+bds-checkbox:active .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-bg-neutral);
+  outline: 2px solid var(--boreal-stroke-primary-light);
+}
+bds-checkbox.bds-checkbox--checked .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-base);
+  background: var(--boreal-ui-primary-base);
+  color: #fff;
+}
+bds-checkbox.bds-checkbox--checked:hover .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate:hover .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+bds-checkbox.bds-checkbox--checked:focus-visible .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate:focus-visible .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-base);
+  background: var(--boreal-ui-primary-base);
+  outline: 2px solid var(--boreal-stroke-focus);
+}
+bds-checkbox.bds-checkbox--checked:active .bds-checkbox__box, bds-checkbox.bds-checkbox--indeterminate:active .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-dark);
+  background: var(--boreal-ui-primary-dark);
+}
+bds-checkbox.bds-checkbox--error .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+}
+bds-checkbox.bds-checkbox--error.bds-checkbox--checked .bds-checkbox__box, bds-checkbox.bds-checkbox--error.bds-checkbox--indeterminate .bds-checkbox__box {
+  border-color: var(--boreal-stroke-danger-base);
+  background: var(--boreal-stroke-danger-base);
+}
+bds-checkbox.bds-checkbox--disabled {
+  pointer-events: none;
+}
+bds-checkbox.bds-checkbox--disabled .bds-checkbox__box {
+  border-color: var(--boreal-stroke-default-light);
+  background: var(--boreal-bg-neutral);
+}
+bds-checkbox.bds-checkbox--disabled .bds-checkbox__label {
+  color: var(--boreal-text-disabled);
+}
+bds-checkbox.bds-checkbox--disabled.bds-checkbox--checked .bds-checkbox__box, bds-checkbox.bds-checkbox--disabled.bds-checkbox--indeterminate .bds-checkbox__box {
+  border-color: var(--boreal-ui-primary-light);
+  background: var(--boreal-ui-primary-light);
+  color: #fff;
+}

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

@@ -0,0 +1,366 @@
+import { Host, Mixin, h, } from "@stencil/core";
+import { formAssociatedMixin } from "../../../mixins/form-associated.mixin";
+import { setFormValue } from "../../../utils/form/index";
+import { inheritAriaAttributes } from "../../../utils/a11y/attributes";
+/**
+ * Checkbox component for boolean selection with three visual states.
+ *
+ * @summary A checkbox form control with default, selected, and indeterminate states.
+ *
+ * @slot - Default slot for label content when no `label` prop is provided.
+ *
+ * @property {boolean} checked - Whether the checkbox is selected. Defaults to `false`.
+ * @property {boolean} indeterminate - Whether the checkbox shows an indeterminate ("mixed") visual state. Defaults to `false`.
+ * @property {boolean} error - Shows error styling on the checkbox. Defaults to `false`.
+ * @property {string}  value - Value submitted with the form data when checked. Defaults to `"on"`.
+ * @property {string}  label - Label displayed next to the checkbox. If not provided, the default slot is used.
+ *
+ * @fires valueChange - Emitted when the checked state changes (for 2-way binding / v-model).
+ * @fires bdsChange - Emitted when the user toggles the checkbox. Payload: `{ checked: boolean, value: string }`.
+ */
+export class BdsCheckbox extends Mixin(formAssociatedMixin) {
+    constructor() {
+        this.inheritedAttributes = {};
+        /** Internal mirror of the `disabled` prop, kept in sync via `@Watch` and `formDisabledCallback`. */
+        this.isDisabled = false;
+        /** Disables the control. */
+        this.disabled = false;
+        /** Marks the control as required for form submission. */
+        this.required = false;
+        // ---------------------------------------------------------------------------
+        // Props
+        // ---------------------------------------------------------------------------
+        /** Whether the checkbox is selected. */
+        this.checked = false;
+        /** Whether the checkbox shows an indeterminate ("mixed") visual state. */
+        this.indeterminate = false;
+        /** Shows error styling on the checkbox. */
+        this.error = false;
+        /** Value submitted with the form data when checked. */
+        this.value = 'on';
+        /** Label displayed next to the checkbox. If not provided, the default slot is used. */
+        this.label = '';
+        this.handleClick = () => {
+            this.toggle();
+        };
+        this.handleKeyDown = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault();
+                this.toggle();
+            }
+        };
+        super();
+    }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
+    componentWillLoad() {
+        this.isDisabled = this.disabled;
+        this.inheritedAttributes = {
+            ...inheritAriaAttributes(this.el),
+        };
+        this.syncFormValue();
+    }
+    // ---------------------------------------------------------------------------
+    // Watchers
+    // ---------------------------------------------------------------------------
+    onCheckedChange() {
+        this.syncFormValue();
+    }
+    onDisabledChange(next) {
+        this.isDisabled = next;
+    }
+    // ---------------------------------------------------------------------------
+    // Form-associated callbacks (IFormControl)
+    // ---------------------------------------------------------------------------
+    formAssociatedCallback() {
+        this.syncFormValue();
+    }
+    formResetCallback() {
+        this.checked = false;
+        this.indeterminate = false;
+        setFormValue(this.internals, null);
+    }
+    formStateRestoreCallback(state, _mode) {
+        this.checked = state === this.value;
+        this.syncFormValue();
+    }
+    formDisabledCallback(disabled) {
+        this.isDisabled = disabled;
+    }
+    // ---------------------------------------------------------------------------
+    // Private helpers
+    // ---------------------------------------------------------------------------
+    syncFormValue() {
+        setFormValue(this.internals, this.checked ? this.value : null);
+    }
+    toggle() {
+        if (this.isDisabled)
+            return;
+        this.indeterminate = false;
+        this.checked = !this.checked;
+        this.valueChange.emit(this.checked);
+        this.bdsChange.emit({ checked: this.checked, value: this.value });
+    }
+    // ---------------------------------------------------------------------------
+    // Render helpers
+    // ---------------------------------------------------------------------------
+    getAriaChecked() {
+        if (this.indeterminate)
+            return 'mixed';
+        return this.checked ? 'true' : 'false';
+    }
+    renderCheckIcon() {
+        if (this.indeterminate) {
+            return (h("svg", { class: "bds-checkbox__icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M4 8h8", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })));
+        }
+        if (this.checked) {
+            return (h("svg", { class: "bds-checkbox__icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+        }
+        return null;
+    }
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    render() {
+        const classes = {
+            'bds-checkbox': true,
+            'bds-checkbox--checked': this.checked,
+            'bds-checkbox--indeterminate': this.indeterminate,
+            'bds-checkbox--error': this.error,
+            'bds-checkbox--disabled': this.isDisabled,
+        };
+        return (h(Host, { key: 'c65361a26d92b0eb0c7dba951a915e5c3bfe4dbe', class: classes, ...this.inheritedAttributes, role: "checkbox", "aria-checked": this.getAriaChecked(), "aria-disabled": this.isDisabled ? 'true' : null, tabindex: this.isDisabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'ab3ba51a82f980852a42eff1bf81b793518a7ec0', class: "bds-checkbox__box" }, this.renderCheckIcon()), h("span", { key: 'b25d1b1dd27098bbead5095610bbf16f6a3eabad', class: "bds-checkbox__label" }, this.label ? this.label : h("slot", null))));
+    }
+    static get is() { return "bds-checkbox"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-checkbox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-checkbox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of the form control, submitted as a key in the form data."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the control as required for form submission."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "indeterminate": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the checkbox shows an indeterminate (\"mixed\") visual state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indeterminate",
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows error styling on the checkbox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value submitted with the form data when checked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label displayed next to the checkbox. If not provided, the default slot is used."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDisabled": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the checked state changes (for 2-way binding / v-model)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user toggles the checkbox."
+                },
+                "complexType": {
+                    "original": "CheckboxChangeDetail",
+                    "resolved": "CheckboxChangeDetail",
+                    "references": {
+                        "CheckboxChangeDetail": {
+                            "location": "import",
+                            "path": "./types/ICheckbox",
+                            "id": "src/components/forms/bds-checkbox/types/ICheckbox.ts::CheckboxChangeDetail",
+                            "referenceLocation": "CheckboxChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "onCheckedChange"
+            }, {
+                "propName": "disabled",
+                "methodName": "onDisabledChange"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}

package/dist/collection/components/forms/bds-checkbox/types/ICheckbox.js

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

package/dist/collection/components/forms/bds-flag/bds-flag.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-flag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--boreal-spacing-2xs);
+  width: fit-content;
+}
+.bds-flag--reverse {
+  flex-direction: row-reverse;
+}
+.bds-flag__country {
+  font-family: var(--boreal-typography-font-family-primary);
+  color: var(--boreal-text-default-light);
+  font-size: var(--boreal-typography-font-size-sm);
+  font-weight: var(--boreal-typography-font-weight-regular);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-flag__flag--global {
+  background-image: none;
+  background-color: var(--boreal-ui-base-light);
+}
+.bds-flag__flag--country {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  flex-shrink: 0;
+}
+.bds-flag__flag--rectangle {
+  width: var(--boreal-layout-ml);
+  height: var(--boreal-layout-m);
+  border-radius: var(--boreal-radius-xs2);
+}
+.bds-flag__flag--square {
+  width: var(--boreal-layout-m);
+  height: var(--boreal-layout-m);
+  border-radius: var(--boreal-radius-xs2);
+}
+.bds-flag__flag--circle {
+  width: var(--boreal-layout-m);
+  height: var(--boreal-layout-m);
+  border-radius: var(--boreal-radius-full);
+}