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

package/dist/collection/components/forms/bds-checkbox/utils/checkbox-form-association.js

@@ -0,0 +1,39 @@
+export function useFormCheckbox(component, value) {
+    const updateFormValue = () => {
+        component.internals.setFormValue(component.checked ? component.value : null);
+    };
+    const updateFormValidity = () => {
+        if (component.required && !component.checked) {
+            component.internals.setValidity({ valueMissing: true }, ' ', component.el);
+        }
+        else {
+            component.internals.setValidity({});
+            if (component.isInvalid)
+                component.isInvalid = false;
+        }
+    };
+    const syncFormValue = () => {
+        updateFormValue();
+        updateFormValidity();
+    };
+    return {
+        syncFormValue,
+        formAssociatedCallback: () => {
+            syncFormValue();
+        },
+        formResetCallback: () => {
+            component.checked = false;
+            component.isInvalid = false;
+            component.indeterminate = false;
+            component.internals.setFormValue(null);
+            updateFormValidity();
+        },
+        formStateRestoreCallback: (restoreState) => {
+            component.checked = restoreState === value;
+            syncFormValue();
+        },
+        formDisabledCallback: (disabled) => {
+            component.isDisabled = disabled;
+        },
+    };
+}

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

@@ -0,0 +1 @@
+export * from './checkbox-form-association';

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

@@ -182,7 +182,7 @@ export class BdsFlag {
         const flagContentClass = this.flagContentClass;
         const flagClass = this.flagClass;
         const flagStyle = !this.isGlobal ? { backgroundImage: `url(${this.flagUrl(flag)})` } : {};
-        return (h(Host, { key: 'a8a3ef0fefd3e7b1d4c9fd40bf5ea82ce9000815', class: flagClass, "aria-label": countryName, role: "img" }, flag && h("span", { key: 'ea653c06af2a3c3341c95acd1750bdbbbd08f268', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), h("span", { key: '289fcc0f0d247f02b79493fd34aca190c985ed45', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
+        return (h(Host, { key: 'dd134e8e86c8b6fa5fae0317982296fee5768002', class: flagClass, "aria-label": countryName, role: "img" }, flag && h("span", { key: '41ca5fdab521e855d0c98a90bb07a9b46866bdb5', class: flagContentClass, style: flagStyle, "aria-hidden": "true" }), h("span", { key: '82defab102847400d10358c4cd264cb982df1ab4', class: "bds-flag__country", "aria-hidden": "true" }, countryName)));
     }
     static get is() { return "bds-flag"; }
     static get originalStyleUrls() {

package/dist/collection/components/forms/bds-radio/{bds-radio.css → bds-radio/bds-radio.css}

@@ -82,16 +82,16 @@
 }
 .bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button {
   border-color: var(--boreal-stroke-default-light);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__dot {
   background-color: var(--boreal-ui-base-light);
 }
 .bds-radio:is(:focus-visible, :focus) .bds-radio__button {
-  box-shadow: 0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-radio:active:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button {
-  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;
+  box-shadow: var(--boreal-depth-box-shadow-active);
 }
 .bds-radio--checked .bds-radio__button {
   border-color: var(--boreal-stroke-primary-base);

package/dist/collection/components/forms/bds-radio/{bds-radio.js → bds-radio/bds-radio.js}

@@ -52,7 +52,7 @@ export class BdsRadio {
         };
     }
     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))))));
+        return (h(Host, { key: '460a06887759af9d8ff04be3b76e93c48a6e59f6', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: '10e93de9010a5002d4a6605ef35f3a5273f20dc2', 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: 'e660d053bec4d6fb7a134230aad1317c1cc839cd', class: "bds-radio__button" }, h("span", { key: '2a983b9b97396c9d0f0485e7b00309292c398cd6', class: "bds-radio__dot" })), h("span", { key: 'e616d473595a3efd5f01f2896d8481d91c9195ac', class: "bds-radio__content" }, h("span", { key: '50e7006d945aad95fb2c01d7beae98672e5fc532', class: "bds-radio__icon" }, h("slot", { key: 'd2f2018dbc9cb25e996b33be2fbfab3b96c84f14', name: "icon" })), h("span", { key: 'b39791291a81d307dae7f45b4d764695d34d8f8f', class: "bds-radio__label" }, this.label || h("slot", { key: '1aef7b131da161b51afb52383913d5187332352f' })), this.info && (h("span", { key: '943d3e05512fab78db5700d5c1527c3db9eeb272', class: "bds-radio__info" }, h("span", { key: 'd2a2a78eac436334545013539f8410c73ed06b2e', class: "bds-radio__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: 'f6add279f359fde8c9727219a6126b776c755eff' }, this.info))))));
     }
     static get is() { return "bds-radio"; }
     static get originalStyleUrls() {
@@ -227,7 +227,7 @@ export class BdsRadio {
                         "RadioChangeDetail": {
                             "location": "import",
                             "path": "./types/IRadio",
-                            "id": "src/components/forms/bds-radio/types/IRadio.ts::RadioChangeDetail",
+                            "id": "src/components/forms/bds-radio/bds-radio/types/IRadio.ts::RadioChangeDetail",
                             "referenceLocation": "RadioChangeDetail"
                         }
                     }

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

@@ -10,11 +10,6 @@
 /**
  * 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.
@@ -34,6 +29,7 @@
   outline: none;
   transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
 }
+.bds-radio-button input[type=checkbox],
 .bds-radio-button input[type=radio] {
   position: absolute;
   opacity: 0;
@@ -42,20 +38,24 @@
   margin: 0;
   pointer-events: none;
 }
+.bds-radio-button [slot=icon] {
+  display: inline-flex;
+  align-items: center;
+}
 .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);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .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);
+  box-shadow: var(--boreal-depth-box-shadow-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;
+  box-shadow: var(--boreal-depth-box-shadow-active);
 }
 .bds-radio-button--checked {
   background-color: var(--boreal-ui-inverse);
@@ -91,6 +91,10 @@
   font-weight: var(--boreal-typography-font-weight-semibold);
   line-height: var(--boreal-typography-line-height-sm);
 }
+.bds-radio-button__info {
+  display: inline-flex;
+  align-items: center;
+}
 .bds-radio-button__icon {
   display: flex;
   align-items: center;

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

@@ -52,7 +52,7 @@ export class BdsRadioButton {
         };
     }
     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)))));
+        return (h(Host, { key: 'a93a54d210b0b5f05e82f5e19f8fecd9502257ae', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("input", { key: '93c8fdba9be5708bb17114f76131ecf88457a6e1', 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: 'a51c3c748941b943b16570d13463321ecd122f38', class: "bds-radio-button__icon" }, h("slot", { key: 'cbbe2373b77ec5743b2eb45e1acc7d753f0de206', name: "icon" })), h("span", { key: 'e4d8f4ae5a6538540536908fabe23e5fe49ce2c1', class: "bds-radio-button__label" }, this.label || h("slot", { key: '2cc5aee872ab7ffd933d626a8f95f406c434a399' })), this.info && (h("span", { key: '92b187ede0488712d778958de1b599fab975cbf0', class: "bds-radio-button__info" }, h("span", { key: '9f840b4ba88fcae4ed226b242c508c96ec73abb6', class: "bds-radio-button__info-icon bds-icon-info-circle", "aria-hidden": "true" }), h("bds-tooltip", { key: 'fdf5d00827aae240d8cbe803b3f98c786c45f967' }, this.info)))));
     }
     static get is() { return "bds-radio-button"; }
     static get originalStyleUrls() {
@@ -227,7 +227,7 @@ export class BdsRadioButton {
                         "RadioButtonChangeDetail": {
                             "location": "import",
                             "path": "./types/IRadioButton",
-                            "id": "src/components/forms/bds-radio-button/types/IRadioButton.ts::RadioButtonChangeDetail",
+                            "id": "src/components/forms/bds-radio/bds-radio-button/types/IRadioButton.ts::RadioButtonChangeDetail",
                             "referenceLocation": "RadioButtonChangeDetail"
                         }
                     }

package/dist/collection/components/forms/{bds-radio-card → bds-radio/bds-radio-card}/bds-radio-card.css

@@ -35,11 +35,11 @@
 }
 .bds-radio-card:hover {
   background-color: var(--boreal-ui-default-lighter);
-  box-shadow: 0 1px 2px 0 rgba(19, 19, 22, 0.15);
+  box-shadow: var(--boreal-depth-box-shadow-xs);
 }
 .bds-radio-card:focus-within, .bds-radio-card:focus {
   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);
+  box-shadow: var(--boreal-depth-box-shadow-focus);
 }
 .bds-radio-card:focus-visible {
   outline: none;

package/dist/collection/components/forms/{bds-radio-card → bds-radio/bds-radio-card}/bds-radio-card.js

@@ -72,7 +72,7 @@ export class BdsRadioCard {
         };
     }
     render() {
-        return (h(Host, { key: '4cdff470403b54e66ad92434ab229406d8e8ef2b', class: this.hostClasses, role: "radio", "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.isError ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: '2019eb2a3aa666c3115dfe0c9fd1fed2a18e02de', class: "bds-radio-card__container" }, h("input", { key: 'd3e47807abff5bfe0ae1d61e8cdda12d047449e5', class: "bds-radio-card__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '091b3ad34ffc7335c07e899645ebb944e0629fe6', class: "bds-radio-card__button" }, h("span", { key: '1e717309877f85d8c8d3d635714664c997ab4097', class: "bds-radio-card__dot" })), h("div", { key: 'dfc0604e2acbb5db112e410029d057f66e23d71f', class: "bds-radio-card__content" }, h("div", { key: '8206a03a6095600fafbc70e1ce43ed85b4204441', class: "bds-radio-card__header" }, h("div", { key: 'a93dc203f940d4b03622f4896f2799d6379e3e01', class: "bds-radio-card__icon" }, h("slot", { key: 'a410dff923959aef7695fa4e72b2cb8d4a551ba1', name: "icon" })), h("div", { key: 'fb598d2bc0e231171454974041998eea8ee9c1b3', class: "bds-radio-card__title" }, this.label || h("slot", { key: '98d45578384b5132140c4ff1db0964f4f19a6faa' }))), h("bds-typography", { key: 'ff6f0f7b6d293f73b1d2beb3d1f6998889dbb868', variant: "helper" }, h("slot", { key: '73529f1e31f946f0da04334cbf65ff439b74c0d4', name: "description" })))), this.info && (h("span", { key: '7bf6f3803b50675cc9dec6256a938dfb45bbdee1', class: "bds-radio-card__info-icon", "aria-label": this.info }, h("em", { key: 'f472d256e753650c94739c0fb2218e5cf62f0543', class: "bds-icon-info-circle" }, h("bds-tooltip", { key: '3e2fe945dbe4a7b9cac470c9e497725937eaabd0' }, this.info))))));
+        return (h(Host, { key: '731577746499239383ad4ee961cc947398e11dcb', class: this.hostClasses, role: "radio", "aria-checked": `${this.checked}`, "aria-disabled": this.disabled ? 'true' : 'false', "aria-invalid": this.isError ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { key: 'd35243914c0364136c0a316a444fd09a511072e6', class: "bds-radio-card__container" }, h("input", { key: 'd3a05c87dd20bd81799b2f9239deae2489664f39', class: "bds-radio-card__input", type: "radio", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, tabIndex: -1, onFocus: () => this.el.focus() }), h("span", { key: '5fe503bdaf293f0385314b9bdda22118bba66b5d', class: "bds-radio-card__button" }, h("span", { key: 'cfbfee8d72258a6e5e462499737d20f21ac25cdb', class: "bds-radio-card__dot" })), h("div", { key: '988d2d636e09b2683a7cb475eaaf95295dc49966', class: "bds-radio-card__content" }, h("div", { key: '618afb1a448ee6b2ce1d2affc525dc00ea2974e4', class: "bds-radio-card__header" }, h("div", { key: 'bf34a2ed964c1a30d1c306ad6d3bc059de8cd4d3', class: "bds-radio-card__icon" }, h("slot", { key: 'd4429397ec53ee30ff38144297987aa606a883c8', name: "icon" })), h("div", { key: 'c34ec3aa8d7ba68b46394ea041d90a2805d0d00f', class: "bds-radio-card__title" }, this.label || h("slot", { key: 'd55874f8542acafdc6164b8012057e039ebfc0eb' }))), h("bds-typography", { key: '569dfe9079fc9b7f5cba562cd0d7d68ba738f713', variant: "helper" }, h("slot", { key: 'bc0e69fba40b230195be2f93f35fee162cc629ce', name: "description" })))), this.info && (h("span", { key: 'c90eab4eead6352f51bb6036cdff56d4241d1dda', class: "bds-radio-card__info-icon", "aria-label": this.info }, h("em", { key: '850a2ae5521eb2d8e3c01a5bd1ad19d3bb87e73c', class: "bds-icon-info-circle" }, h("bds-tooltip", { key: '188e3c5950d7a68b3e068bf6361e07850fdc907d' }, this.info))))));
     }
     static get is() { return "bds-radio-card"; }
     static get originalStyleUrls() {
@@ -97,7 +97,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -124,7 +124,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -151,7 +151,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -178,7 +178,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -205,7 +205,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -232,7 +232,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -259,7 +259,7 @@ export class BdsRadioCard {
                         "IRadioCard": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::IRadioCard",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::IRadioCard",
                             "referenceLocation": "IRadioCard"
                         }
                     }
@@ -296,7 +296,7 @@ export class BdsRadioCard {
                         "RadioCardChangeDetail": {
                             "location": "import",
                             "path": "./types/IRadioCard",
-                            "id": "src/components/forms/bds-radio-card/types/IRadioCard.ts::RadioCardChangeDetail",
+                            "id": "src/components/forms/bds-radio/bds-radio-card/types/IRadioCard.ts::RadioCardChangeDetail",
                             "referenceLocation": "RadioCardChangeDetail"
                         }
                     }

package/dist/collection/components/forms/{bds-radio-group → bds-radio/bds-radio-group}/bds-radio-group.js

@@ -1,8 +1,7 @@
 import { Host, Mixin, h, } from "@stencil/core";
-import { formAssociatedMixin } from "../../../mixins/form-associated.mixin";
-import { ORIENTATIONS } from "../../../types/index";
-import { createId, validatePropValue, KEYBOARD } from "../../../utils/index";
-import { RADIO_GROUP_TYPES } from "./types/enum";
+import { formAssociatedMixin } from "../../../../mixins/form-associated.mixin";
+import { ORIENTATIONS } from "../../../../types/index";
+import { createId, validatePropValue, KEYBOARD } from "../../../../utils/index";
 const LEAF_TAGS = ['BDS-RADIO', 'BDS-RADIO-BUTTON', 'BDS-RADIO-CARD'];
 /**
  * Radio group component that orchestrates single-selection across a set of `bds-radio` children.
@@ -29,13 +28,15 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
         /** Group label rendered above the radio options. */
         this.label = '';
         /** Layout direction of the radio options. */
-        this.orientation = ORIENTATIONS.VERTICAL;
+        this.orientation = 'vertical';
         /** Marks the group as required for form submission. Triggers validity error when no radio is selected. */
         this.required = false;
         /** Identifies this group variant. 'radio' renders circular bds-radio children; 'radiobutton' renders bds-radio-button segmented control; 'radiocard' renders bds-radio-card element. */
-        this.type = RADIO_GROUP_TYPES.RADIO;
+        this.type = 'radio';
         /** Currently selected radio value. Synced to children on change. */
         this.value = '';
+        /** Hides the divider between radio buttons when type is 'radiobutton'. */
+        this.joined = false;
         this.handleKeyDown = (event) => {
             const target = event.target;
             if (!LEAF_TAGS.includes(target.tagName))
@@ -59,8 +60,12 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
         this._buttonCount = 0;
         super();
     }
+    onJoinedChange() {
+        this.insertDividers();
+    }
     checkPropValues() {
         validatePropValue(Object.values(ORIENTATIONS), ORIENTATIONS.VERTICAL, this.el, 'orientation');
+        this.insertDividers();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -182,7 +187,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
     }
     insertDividers() {
         this.el.querySelectorAll('bds-divider[data-injected]').forEach(d => d.remove());
-        if (this.type !== 'radiobutton')
+        if (this.type !== 'radiobutton' || this.joined)
             return;
         const dividerOrientation = this.orientation === ORIENTATIONS.HORIZONTAL ? ORIENTATIONS.VERTICAL : ORIENTATIONS.HORIZONTAL;
         const buttons = this.radioElements.filter((el) => el.tagName === 'BDS-RADIO-BUTTON');
@@ -247,7 +252,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
         const showError = this.isError;
         const typographyState = this.isDisabled ? 'disabled' : showError ? 'error' : 'default';
         const helperContent = showError && this.errorMessage !== '' ? this.errorMessage : this.helperText;
-        return (h(Host, { key: 'ab755f253ab7096e8ed0efa7196cedd96cdc7ca8', class: this.classMap, role: "radiogroup", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": helperContent !== '' ? helperId : undefined, "aria-invalid": showError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onKeyDown: this.handleKeyDown }, this.label && (h("bds-typography", { key: '85bc7d114efabd92930c6c934c19e4ba887a3663', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), h("div", { key: '3f1670875353369c608c9cf064ccb1b7beede19a', class: "bds-radio-group__options" }, h("slot", { key: 'b0d52880c82dec9557c10bcf7ef8930299bdf7a6', onSlotchange: this.handleSlotChange })), helperContent && (h("bds-typography", { key: 'f0a17de329944c3fe63cf7cb586ec85016693208', id: helperId, variant: "helper", state: typographyState }, helperContent))));
+        return (h(Host, { key: '983eacc6649cdca62de5a73780c3ca0eb8e26879', class: this.classMap, role: "radiogroup", "aria-labelledby": this.label !== '' ? labelId : undefined, "aria-describedby": helperContent !== '' ? helperId : undefined, "aria-invalid": showError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onKeyDown: this.handleKeyDown }, this.label && (h("bds-typography", { key: '80461fca6630261b13198a69185cf92dda18704f', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), h("div", { key: '6fda8a3d053c9b3998177d29b8dc593c1d21f5cf', class: "bds-radio-group__options" }, h("slot", { key: '5d8a8a9d040b862173ea8d43e34c260377114f58', onSlotchange: this.handleSlotChange })), helperContent && (h("bds-typography", { key: '31bd0d32d0e72e12be4ff04677ab99b3a7139fd0', id: helperId, variant: "helper", state: typographyState }, helperContent))));
     }
     static get is() { return "bds-radio-group"; }
     static get formAssociated() { return true; }
@@ -267,7 +272,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
+                    "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
@@ -290,7 +295,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
+                    "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
@@ -310,8 +315,8 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"\"",
-                    "resolved": "\"\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -330,8 +335,8 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"\"",
-                    "resolved": "\"\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -350,8 +355,8 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"\"",
-                    "resolved": "\"\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -370,8 +375,8 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"\"",
-                    "resolved": "\"\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -430,13 +435,13 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "setter": false,
                 "reflect": true,
                 "attribute": "orientation",
-                "defaultValue": "ORIENTATIONS.VERTICAL"
+                "defaultValue": "'vertical'"
             },
             "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "false",
+                    "original": "boolean",
                     "resolved": "boolean",
                     "references": {}
                 },
@@ -462,7 +467,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                         "RadioGroupType": {
                             "location": "import",
                             "path": "./types/types",
-                            "id": "src/components/forms/bds-radio-group/types/types.ts::RadioGroupType",
+                            "id": "src/components/forms/bds-radio/bds-radio-group/types/types.ts::RadioGroupType",
                             "referenceLocation": "RadioGroupType"
                         }
                     }
@@ -477,7 +482,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "setter": false,
                 "reflect": true,
                 "attribute": "type",
-                "defaultValue": "RADIO_GROUP_TYPES.RADIO"
+                "defaultValue": "'radio'"
             },
             "value": {
                 "type": "string",
@@ -498,6 +503,26 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                 "reflect": false,
                 "attribute": "value",
                 "defaultValue": "''"
+            },
+            "joined": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the divider between radio buttons when type is 'radiobutton'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "joined",
+                "defaultValue": "false"
             }
         };
     }
@@ -525,7 +550,7 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
                         "RadioGroupChangeDetail": {
                             "location": "import",
                             "path": "./types/IRadioGroup",
-                            "id": "src/components/forms/bds-radio-group/types/IRadioGroup.ts::RadioGroupChangeDetail",
+                            "id": "src/components/forms/bds-radio/bds-radio-group/types/IRadioGroup.ts::RadioGroupChangeDetail",
                             "referenceLocation": "RadioGroupChangeDetail"
                         }
                     }
@@ -588,6 +613,9 @@ export class BdsRadioGroup extends Mixin(formAssociatedMixin) {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "joined",
+                "methodName": "onJoinedChange"
+            }, {
                 "propName": "orientation",
                 "methodName": "checkPropValues"
             }, {

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

@@ -0,0 +1,23 @@
+@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-select {
+  position: relative;
+  display: flex;
+}
+bds-select .bds-list-menu {
+  --bds-list-menu-max-width: 100%;
+}