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

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

@@ -0,0 +1,238 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Radio button component for single-selection within a group.
+ * Use inside `bds-radio-group` for managed selection and form binding.
+ * Can also be used standalone with the `name`, `value`, and `checked` props.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ */
+export class BdsRadio {
+    constructor() {
+        /** Whether this radio is selected. Managed by bds-radio-group; can be set directly when used standalone. */
+        this.checked = false;
+        /** Disables the radio, preventing interaction and selection. */
+        this.disabled = false;
+        /** Value submitted with the form when this radio is selected. */
+        this.value = 'on';
+        /** Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone. */
+        this.name = '';
+        /** Label text displayed next to the radio indicator. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Shows error styling on the radio indicator. Propagated by bds-radio-group. */
+        this.error = false;
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.handleClick = () => this.select();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.select();
+            }
+        };
+    }
+    componentDidLoad() {
+        this.el.setAttribute('role', 'radio');
+        this.el.setAttribute('aria-checked', String(this.checked));
+        this.el.setAttribute('tabindex', '-1');
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.el.setAttribute('aria-checked', 'true');
+        this.bdsChange.emit({ checked: true, value: this.value });
+    }
+    get classMap() {
+        return {
+            'bds-radio': true,
+            'bds-radio--checked': this.checked,
+            'bds-radio--error': this.error,
+            'bds-radio--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: '1d68465b5124471bda9fb1e4f3dc022d4f22be6d', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: '8c820cf327a9978f6f098794e26a4ec0394e99c3', type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '6de9fcb7657842b81b4bf803e3e60b6891fef27e', class: "bds-radio__button" }, h("span", { key: '660c57e990abc4f6f1288f93c198e9bb60be6c29', class: "bds-radio__dot" })), h("span", { key: 'ec3879d0edb42cdbc7b4257d563d9c298fd3b89d', class: "bds-radio__content" }, h("span", { key: '430b04fd6f836cf2881fecf9df56bee70486da85', class: "bds-radio__icon" }, h("slot", { key: '30dcf8837cd50a9e48a6c061576f7b9d53eeabd9', name: "icon" })), h("span", { key: 'dbb139d87c4689a64e2860b365d7c261c56b638b', class: "bds-radio__label" }, this.label || h("slot", { key: 'a7d985fa9773a8f285c36f3deaeb7112adf20f95' })), this.info && (h("span", { key: '36958330fd1ed9fa6f64bcf757c9be113fae5daf', class: "bds-radio__info" }, h("span", { key: 'ea5a415943c9f67f027a4b241d024ea61321a8a1', class: "bds-radio__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: '875105c226c6d1fb90d62fe275ed544f043a1c19' }, this.info))))));
+    }
+    static get is() { return "bds-radio"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this radio is selected. Managed by bds-radio-group; can be set directly when used standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the radio, preventing interaction and selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "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 when this radio is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed next to the radio indicator. Falls back to the default slot when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "error": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows error styling on the radio indicator. Propagated by bds-radio-group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "error",
+                "defaultValue": "false"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text shown on an info icon next to the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects this radio. Listened to by the parent bds-radio-group to enforce single selection."
+                },
+                "complexType": {
+                    "original": "RadioChangeDetail",
+                    "resolved": "RadioChangeDetail",
+                    "references": {
+                        "RadioChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IRadio",
+                            "id": "src/components/forms/bds-radio/types/IRadio.ts::RadioChangeDetail",
+                            "referenceLocation": "RadioChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/forms/bds-radio/types/IRadio.js

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

package/dist/collection/components/forms/bds-radio-button/bds-radio-button.css

@@ -0,0 +1,109 @@
+@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
+ **/
+.bds-radio-button__info {
+  display: inline-flex;
+  align-items: center;
+}
+
+/**
+* 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-radio-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  gap: var(--boreal-spacing-2xs);
+  padding: var(--boreal-spacing-2xs) var(--boreal-spacing-s);
+  border: 1px solid transparent;
+  border-radius: var(--boreal-radius-s);
+  background-color: var(--boreal-ui-default-base);
+  color: var(--boreal-text-default);
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+.bds-radio-button input[type=radio] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  pointer-events: none;
+}
+.bds-radio-button:hover:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error) {
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+}
+.bds-radio-button:focus-visible, .bds-radio-button:focus {
+  z-index: 1;
+  background-color: var(--boreal-ui-default-lighter);
+  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  outline: none;
+}
+.bds-radio-button:active:not(.bds-radio-button--disabled):not(.bds-radio-button--checked):not(.bds-radio-button--error) {
+  z-index: 1;
+  background-color: var(--boreal-ui-default-lighter);
+  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-radio-button--checked {
+  background-color: var(--boreal-ui-inverse);
+  border-color: var(--boreal-stroke-primary-base);
+  color: var(--boreal-text-primary-base);
+}
+.bds-radio-button--checked:hover, .bds-radio-button--checked:focus-visible, .bds-radio-button--checked:focus, .bds-radio-button--checked:active {
+  background-color: var(--boreal-ui-primary-lighter);
+}
+.bds-radio-button--error {
+  background-color: var(--boreal-ui-inverse);
+  color: var(--boreal-text-danger-base);
+}
+.bds-radio-button--error:hover, .bds-radio-button--error:focus-visible, .bds-radio-button--error:focus, .bds-radio-button--error:active {
+  background-color: var(--boreal-ui-danger-lighter);
+}
+.bds-radio-button--error.bds-radio-button--checked {
+  border-color: var(--boreal-stroke-danger-base);
+}
+.bds-radio-button--disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+  background-color: var(--boreal-ui-inverse);
+  color: var(--boreal-text-disabled);
+}
+.bds-radio-button--disabled.bds-radio-button--checked {
+  border-color: var(--boreal-stroke-primary-light);
+  color: var(--boreal-text-primary-light);
+}
+.bds-radio-button__label {
+  font-family: var(--boreal-typography-font-family-primary);
+  font-size: var(--boreal-typography-font-size-sm);
+  font-weight: var(--boreal-typography-font-weight-semibold);
+  line-height: var(--boreal-typography-line-height-sm);
+}
+.bds-radio-button__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bds-radio-button__icon:empty {
+  display: none;
+}
+.bds-radio-button__info-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--boreal-typography-font-size-sm);
+  line-height: 1;
+  color: var(--boreal-icon-default-ink);
+}

package/dist/collection/components/forms/bds-radio-button/bds-radio-button.js

@@ -0,0 +1,238 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Button-shaped radio option for use inside `bds-radio-group[type="radiobutton"]`.
+ * Creates a segmented control appearance when grouped. Not form-associated — the parent
+ * `bds-radio-group` owns form state and single-selection enforcement.
+ *
+ * @slot - Label content when no `label` prop is provided.
+ * @slot icon - Optional icon rendered to the left of the label.
+ */
+export class BdsRadioButton {
+    constructor() {
+        /** Whether this button is selected. Managed by bds-radio-group; can be set directly when used standalone. */
+        this.checked = false;
+        /** Disables the button, preventing interaction and selection. */
+        this.disabled = false;
+        /** Shows error styling on the button. Propagated by bds-radio-group. */
+        this.error = false;
+        /** Value submitted with the form when this button is selected. */
+        this.value = 'on';
+        /** Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone. */
+        this.name = '';
+        /** Label text displayed inside the button. Falls back to the default slot when empty. */
+        this.label = '';
+        /** Tooltip text shown on an info icon next to the label. */
+        this.info = '';
+        this.handleClick = () => this.select();
+        this.handleKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.select();
+            }
+        };
+    }
+    componentDidLoad() {
+        this.el.setAttribute('role', 'radio');
+        this.el.setAttribute('aria-checked', String(this.checked));
+        this.el.setAttribute('tabindex', '-1');
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        this.checked = true;
+        this.el.setAttribute('aria-checked', 'true');
+        this.bdsChange.emit({ checked: true, value: this.value });
+    }
+    get classMap() {
+        return {
+            'bds-radio-button': true,
+            'bds-radio-button--checked': this.checked,
+            'bds-radio-button--error': this.error,
+            'bds-radio-button--disabled': this.disabled,
+        };
+    }
+    render() {
+        return (h(Host, { key: '63fe01baf9bf2318441f3a742ba857a540f4d7d0', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: '19fd44e41ef583131da77206f9e0c987132a5cc4', type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-hidden": "true", tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: 'cfbe81b25b71aeda4786b6073c9b16bcc819bf7b', class: "bds-radio-button__icon" }, h("slot", { key: 'ffa28a8602ea92c990b3e365d6cd421975f896fc', name: "icon" })), h("span", { key: 'c0a6512f836a00718ee71d5542b714900357ac82', class: "bds-radio-button__label" }, this.label || h("slot", { key: '29c89fa661270a7cc5ee69eb5c7cbc594af05d40' })), this.info && (h("span", { key: '74c3d43733ac679427e1b4fdbfcb4e72dae335a8', class: "bds-radio-button__info" }, h("span", { key: '567d225444acc5384df916a16a35867592327895', class: "bds-radio-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: '8120fe06d5a0f85d03205abc54f3e8112946ad4f' }, this.info)))));
+    }
+    static get is() { return "bds-radio-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bds-radio-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bds-radio-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this button is selected. Managed by bds-radio-group; can be set directly when used standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the button, preventing interaction and selection."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "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 button. Propagated by bds-radio-group."
+                },
+                "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 when this button is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name attribute stamped by the parent bds-radio-group via setAttribute. Set directly when used standalone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text displayed inside the button. Falls back to the default slot when empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "info": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip text shown on an info icon next to the label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "info",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bdsChange",
+                "name": "bdsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user selects this button. Listened to by the parent bds-radio-group to enforce single selection."
+                },
+                "complexType": {
+                    "original": "RadioButtonChangeDetail",
+                    "resolved": "RadioButtonChangeDetail",
+                    "references": {
+                        "RadioButtonChangeDetail": {
+                            "location": "import",
+                            "path": "./types/IRadioButton",
+                            "id": "src/components/forms/bds-radio-button/types/IRadioButton.ts::RadioButtonChangeDetail",
+                            "referenceLocation": "RadioButtonChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/forms/bds-radio-button/types/IRadioButton.js

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