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

package/dist/cjs/bds-radio-card.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CwYIVC9N.js');
 
-const bdsRadioCardCss = () => `@charset "UTF-8";.bds-radio-card--transition{-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;font-family:var(--boreal-typography-font-family-primary);background-color:var(--boreal-ui-inverse);padding:var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);border-radius:var(--boreal-radius-xs);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light)}.bds-radio-card:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.bds-radio-card:focus-within,.bds-radio-card:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-radio-card:focus-visible{outline:none}.bds-radio-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio-card__container{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-xs);-ms-flex-align:start;align-items:flex-start}.bds-radio-card__button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:var(--bds-radio-button-size, 18px);height:var(--bds-radio-button-size, 18px);margin-top:var(--boreal-spacing-2xs);border-radius:var(--boreal-radius-full);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-card__dot{width:var(--bds-radio-dot-size, 10px);height:var(--bds-radio-dot-size, 10px);border-radius:var(--boreal-radius-full);background-color:transparent;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-card__header{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-3xs);color:var(--boreal-text-default)}.bds-radio-card__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md)}.bds-radio-card__info-icon{font-size:var(--boreal-typography-font-size-xs);color:var(--boreal-icon-default-light)}.bds-radio-card__icon:empty{display:none}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__container{-ms-flex-align:center;align-items:center}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__content{height:var(--boreal-spacing-l)}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__button{margin-top:0}.bds-radio-card--checked{border-color:var(--boreal-stroke-primary-base)}.bds-radio-card--checked:hover,.bds-radio-card--checked:focus,.bds-radio-card--checked:focus-within,.bds-radio-card--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-radio-card--checked .bds-radio-card__button{border-color:var(--boreal-stroke-primary-base)}.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-primary-base)}.bds-radio-card--checked .bds-radio-card__header,.bds-radio-card--checked .bds-radio-card__description{color:var(--boreal-text-primary-base)}.bds-radio-card--disabled{pointer-events:none}.bds-radio-card--disabled .bds-radio-card__header,.bds-radio-card--disabled .bds-radio-card__description{color:var(--boreal-text-disabled)}.bds-radio-card--disabled:not(.bds-radio-card--checked) .bds-radio-card__button{background-color:var(--boreal-ui-disabled)}.bds-radio-card--disabled.bds-radio-card--checked,.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__button{border-color:var(--boreal-ui-primary-light)}.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-primary-light)}.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__header,.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__description{color:var(--boreal-ui-primary-light)}.bds-radio-card--error{border-color:var(--boreal-stroke-danger-base)}.bds-radio-card--error:hover,.bds-radio-card--error:focus,.bds-radio-card--error:focus-within,.bds-radio-card--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-radio-card--error .bds-radio-card__header,.bds-radio-card--error .bds-radio-card__description{color:var(--boreal-text-danger-base)}.bds-radio-card--error .bds-radio-card__button{border-color:var(--boreal-stroke-danger-base)}.bds-radio-card--error.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-danger-base)}`;
+const bdsRadioCardCss = () => `@charset "UTF-8";.bds-radio-card--transition{-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-card{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;font-family:var(--boreal-typography-font-family-primary);background-color:var(--boreal-ui-inverse);padding:var(--boreal-spacing-xs) var(--boreal-spacing-s) var(--boreal-spacing-s);border-radius:var(--boreal-radius-xs);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light)}.bds-radio-card:hover{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);box-shadow:var(--boreal-depth-box-shadow-xs)}.bds-radio-card:focus-within,.bds-radio-card:focus{background-color:var(--boreal-ui-default-lighter);-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-radio-card:focus-visible{outline:none}.bds-radio-card input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio-card__container{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-xs);-ms-flex-align:start;align-items:flex-start}.bds-radio-card__button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:var(--bds-radio-button-size, 18px);height:var(--bds-radio-button-size, 18px);margin-top:var(--boreal-spacing-2xs);border-radius:var(--boreal-radius-full);border:var(--boreal-spacing-4xs) solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-card__dot{width:var(--bds-radio-dot-size, 10px);height:var(--bds-radio-dot-size, 10px);border-radius:var(--boreal-radius-full);background-color:transparent;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio-card__header{display:-ms-inline-flexbox;display:inline-flex;gap:var(--boreal-spacing-3xs);color:var(--boreal-text-default)}.bds-radio-card__title{font-weight:var(--boreal-typography-font-weight-semibold);font-size:var(--boreal-typography-font-size-md);line-height:var(--boreal-typography-line-height-md)}.bds-radio-card__info-icon{font-size:var(--boreal-typography-font-size-xs);color:var(--boreal-icon-default-light)}.bds-radio-card__icon:empty{display:none}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__container{-ms-flex-align:center;align-items:center}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__content{height:var(--boreal-spacing-l)}.bds-radio-card:has(.bds-radio-card__description:empty) .bds-radio-card__button{margin-top:0}.bds-radio-card--checked{border-color:var(--boreal-stroke-primary-base)}.bds-radio-card--checked:hover,.bds-radio-card--checked:focus,.bds-radio-card--checked:focus-within,.bds-radio-card--checked:active{background-color:var(--boreal-ui-primary-lighter)}.bds-radio-card--checked .bds-radio-card__button{border-color:var(--boreal-stroke-primary-base)}.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-primary-base)}.bds-radio-card--checked .bds-radio-card__header,.bds-radio-card--checked .bds-radio-card__description{color:var(--boreal-text-primary-base)}.bds-radio-card--disabled{pointer-events:none}.bds-radio-card--disabled .bds-radio-card__header,.bds-radio-card--disabled .bds-radio-card__description{color:var(--boreal-text-disabled)}.bds-radio-card--disabled:not(.bds-radio-card--checked) .bds-radio-card__button{background-color:var(--boreal-ui-disabled)}.bds-radio-card--disabled.bds-radio-card--checked,.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__button{border-color:var(--boreal-ui-primary-light)}.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-primary-light)}.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__header,.bds-radio-card--disabled.bds-radio-card--checked .bds-radio-card__description{color:var(--boreal-ui-primary-light)}.bds-radio-card--error{border-color:var(--boreal-stroke-danger-base)}.bds-radio-card--error:hover,.bds-radio-card--error:focus,.bds-radio-card--error:focus-within,.bds-radio-card--error:active{background-color:var(--boreal-ui-danger-lighter)}.bds-radio-card--error .bds-radio-card__header,.bds-radio-card--error .bds-radio-card__description{color:var(--boreal-text-danger-base)}.bds-radio-card--error .bds-radio-card__button{border-color:var(--boreal-stroke-danger-base)}.bds-radio-card--error.bds-radio-card--checked .bds-radio-card__dot{background-color:var(--boreal-ui-danger-base)}`;
 
 const BdsRadioCard = class {
     constructor(hostRef) {
@@ -67,7 +67,7 @@ const BdsRadioCard = class {
         };
     }
     render() {
-        return (index.h(index.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 }, index.h("div", { key: '2019eb2a3aa666c3115dfe0c9fd1fed2a18e02de', class: "bds-radio-card__container" }, index.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() }), index.h("span", { key: '091b3ad34ffc7335c07e899645ebb944e0629fe6', class: "bds-radio-card__button" }, index.h("span", { key: '1e717309877f85d8c8d3d635714664c997ab4097', class: "bds-radio-card__dot" })), index.h("div", { key: 'dfc0604e2acbb5db112e410029d057f66e23d71f', class: "bds-radio-card__content" }, index.h("div", { key: '8206a03a6095600fafbc70e1ce43ed85b4204441', class: "bds-radio-card__header" }, index.h("div", { key: 'a93dc203f940d4b03622f4896f2799d6379e3e01', class: "bds-radio-card__icon" }, index.h("slot", { key: 'a410dff923959aef7695fa4e72b2cb8d4a551ba1', name: "icon" })), index.h("div", { key: 'fb598d2bc0e231171454974041998eea8ee9c1b3', class: "bds-radio-card__title" }, this.label || index.h("slot", { key: '98d45578384b5132140c4ff1db0964f4f19a6faa' }))), index.h("bds-typography", { key: 'ff6f0f7b6d293f73b1d2beb3d1f6998889dbb868', variant: "helper" }, index.h("slot", { key: '73529f1e31f946f0da04334cbf65ff439b74c0d4', name: "description" })))), this.info && (index.h("span", { key: '7bf6f3803b50675cc9dec6256a938dfb45bbdee1', class: "bds-radio-card__info-icon", "aria-label": this.info }, index.h("em", { key: 'f472d256e753650c94739c0fb2218e5cf62f0543', class: "bds-icon-info-circle" }, index.h("bds-tooltip", { key: '3e2fe945dbe4a7b9cac470c9e497725937eaabd0' }, this.info))))));
+        return (index.h(index.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 }, index.h("div", { key: 'd35243914c0364136c0a316a444fd09a511072e6', class: "bds-radio-card__container" }, index.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() }), index.h("span", { key: '5fe503bdaf293f0385314b9bdda22118bba66b5d', class: "bds-radio-card__button" }, index.h("span", { key: 'cfbfee8d72258a6e5e462499737d20f21ac25cdb', class: "bds-radio-card__dot" })), index.h("div", { key: '988d2d636e09b2683a7cb475eaaf95295dc49966', class: "bds-radio-card__content" }, index.h("div", { key: '618afb1a448ee6b2ce1d2affc525dc00ea2974e4', class: "bds-radio-card__header" }, index.h("div", { key: 'bf34a2ed964c1a30d1c306ad6d3bc059de8cd4d3', class: "bds-radio-card__icon" }, index.h("slot", { key: 'd4429397ec53ee30ff38144297987aa606a883c8', name: "icon" })), index.h("div", { key: 'c34ec3aa8d7ba68b46394ea041d90a2805d0d00f', class: "bds-radio-card__title" }, this.label || index.h("slot", { key: 'd55874f8542acafdc6164b8012057e039ebfc0eb' }))), index.h("bds-typography", { key: '569dfe9079fc9b7f5cba562cd0d7d68ba738f713', variant: "helper" }, index.h("slot", { key: 'bc0e69fba40b230195be2f93f35fee162cc629ce', name: "description" })))), this.info && (index.h("span", { key: 'c90eab4eead6352f51bb6036cdff56d4241d1dda', class: "bds-radio-card__info-icon", "aria-label": this.info }, index.h("em", { key: '850a2ae5521eb2d8e3c01a5bd1ad19d3bb87e73c', class: "bds-icon-info-circle" }, index.h("bds-tooltip", { key: '188e3c5950d7a68b3e068bf6361e07850fdc907d' }, this.info))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bds-radio-group.cjs.entry.js

@@ -3,12 +3,9 @@
 var index = require('./index-CwYIVC9N.js');
 var formAssociated_mixin = require('./form-associated.mixin-BCR6bj29.js');
 var orientation = require('./orientation-DQAIleEJ.js');
+var Keys = require('./Keys-DXn16dlA.js');
 var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
 var validateProps = require('./validateProps-CJe9X5x8.js');
-var Keys = require('./Keys-rKl2za5q.js');
-
-const RADIO_GROUP_TYPES = {
-    RADIO: 'radio'};
 
 const bdsRadioGroupCss = () => `@charset "UTF-8";.bds-radio-group{--bds-divider-gap:var(--boreal-spacing-3xs);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--boreal-spacing-2xs)}.bds-radio-group__options{display:grid;grid-template-columns:1fr;gap:var(--boreal-spacing-xs)}.bds-radio-group[orientation=horizontal] .bds-radio-group__options{grid-template-columns:repeat(var(--layout-count, 1), auto);-ms-flex-pack:start;justify-content:start}.bds-radio-group[type=radiobutton] .bds-radio-group__options{display:-ms-inline-flexbox;display:inline-flex;gap:0;padding:var(--boreal-spacing-3xs);border:1px solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);border-radius:var(--boreal-radius-xs);overflow:hidden}.bds-radio-group[type=radiobutton][orientation=vertical] .bds-radio-group__options{-ms-flex-direction:column;flex-direction:column}.bds-radio-group[type=radiobutton].bds-radio-group--error .bds-radio-group__options{border-color:var(--boreal-stroke-danger-base)}.bds-radio-group[type=radiobutton].bds-radio-group--error bds-radio-button.bds-radio-button--error{color:var(--boreal-stroke-danger-base)}.bds-radio-group[type=radiobutton].bds-radio-group--error bds-divider[data-injected]{--bds-divider-color:var(--boreal-stroke-danger-base)}`;
 
@@ -44,13 +41,15 @@ const BdsRadioGroup = class extends index.Mixin(formAssociated_mixin.formAssocia
         /** Group label rendered above the radio options. */
         this.label = '';
         /** Layout direction of the radio options. */
-        this.orientation = 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))
@@ -73,8 +72,12 @@ const BdsRadioGroup = class extends index.Mixin(formAssociated_mixin.formAssocia
         };
         this._buttonCount = 0;
     }
+    onJoinedChange() {
+        this.insertDividers();
+    }
     checkPropValues() {
         validateProps.validatePropValue(Object.values(orientation.ORIENTATIONS), orientation.ORIENTATIONS.VERTICAL, this.el, 'orientation');
+        this.insertDividers();
     }
     onDisabledChange(next) {
         this.isDisabled = next;
@@ -196,7 +199,7 @@ const BdsRadioGroup = class extends index.Mixin(formAssociated_mixin.formAssocia
     }
     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 === orientation.ORIENTATIONS.HORIZONTAL ? orientation.ORIENTATIONS.VERTICAL : orientation.ORIENTATIONS.HORIZONTAL;
         const buttons = this.radioElements.filter((el) => el.tagName === 'BDS-RADIO-BUTTON');
@@ -261,11 +264,14 @@ const BdsRadioGroup = class extends index.Mixin(formAssociated_mixin.formAssocia
         const showError = this.isError;
         const typographyState = this.isDisabled ? 'disabled' : showError ? 'error' : 'default';
         const helperContent = showError && this.errorMessage !== '' ? this.errorMessage : this.helperText;
-        return (index.h(index.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 && (index.h("bds-typography", { key: '85bc7d114efabd92930c6c934c19e4ba887a3663', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), index.h("div", { key: '3f1670875353369c608c9cf064ccb1b7beede19a', class: "bds-radio-group__options" }, index.h("slot", { key: 'b0d52880c82dec9557c10bcf7ef8930299bdf7a6', onSlotchange: this.handleSlotChange })), helperContent && (index.h("bds-typography", { key: 'f0a17de329944c3fe63cf7cb586ec85016693208', id: helperId, variant: "helper", state: typographyState }, helperContent))));
+        return (index.h(index.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 && (index.h("bds-typography", { key: '80461fca6630261b13198a69185cf92dda18704f', id: labelId, variant: "label", state: typographyState, required: this.required, tooltipText: this.info !== '' ? this.info : undefined }, this.label)), index.h("div", { key: '6fda8a3d053c9b3998177d29b8dc593c1d21f5cf', class: "bds-radio-group__options" }, index.h("slot", { key: '5d8a8a9d040b862173ea8d43e34c260377114f58', onSlotchange: this.handleSlotChange })), helperContent && (index.h("bds-typography", { key: '31bd0d32d0e72e12be4ff04677ab99b3a7139fd0', id: helperId, variant: "helper", state: typographyState }, helperContent))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "joined": [{
+                "onJoinedChange": 0
+            }],
         "orientation": [{
                 "checkPropValues": 0
             }],

package/dist/cjs/bds-radio.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CwYIVC9N.js');
 
-const bdsRadioCss = () => `@charset "UTF-8";.bds-radio__content,.bds-radio__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-radio__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs);cursor:pointer;outline:none}.bds-radio input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio__content{gap:var(--boreal-spacing-3xs)}.bds-radio__icon{-ms-flex-negative:0;flex-shrink:0;line-height:1}.bds-radio__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default)}.bds-radio__button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:18px;height:18px;border-radius:var(--boreal-radius-full);border:1px solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio__dot{width:10px;height:10px;border-radius:var(--boreal-radius-full);background-color:transparent;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}.bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button{border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15);box-shadow:0 1px 2px 0 rgba(19, 19, 22, 0.15)}.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{-webkit-box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus);box-shadow:0 0 0 1px var(--boreal-ui-inverse), 0 0 0 3px var(--boreal-stroke-focus)}.bds-radio:active:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button{-webkit-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: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--checked .bds-radio__button{border-color:var(--boreal-stroke-primary-base)}.bds-radio--checked .bds-radio__dot{background-color:var(--boreal-ui-primary-base)}.bds-radio--error .bds-radio__button{border-color:var(--boreal-stroke-danger-base)}.bds-radio--disabled{cursor:not-allowed;pointer-events:none}.bds-radio--disabled .bds-radio__button{border-color:var(--boreal-stroke-default-light);background-color:var(--boreal-ui-disabled)}.bds-radio--disabled .bds-radio__label{color:var(--boreal-text-disabled)}.bds-radio--disabled.bds-radio--checked .bds-radio__button{border-color:var(--boreal-ui-primary-light)}.bds-radio--disabled.bds-radio--checked .bds-radio__dot{background-color:var(--boreal-ui-primary-light)}`;
+const bdsRadioCss = () => `@charset "UTF-8";.bds-radio__content,.bds-radio__icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bds-radio__info{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}.bds-radio{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;gap:var(--boreal-spacing-2xs);cursor:pointer;outline:none}.bds-radio input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}.bds-radio__content{gap:var(--boreal-spacing-3xs)}.bds-radio__icon{-ms-flex-negative:0;flex-shrink:0;line-height:1}.bds-radio__label{font-family:var(--boreal-typography-font-family-primary);font-size:var(--boreal-typography-font-size-sm);font-weight:var(--boreal-typography-font-weight-regular);line-height:var(--boreal-typography-line-height-sm);color:var(--boreal-text-default)}.bds-radio__button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-negative:0;flex-shrink:0;width:18px;height:18px;border-radius:var(--boreal-radius-full);border:1px solid var(--boreal-stroke-default-light);background-color:var(--boreal-ui-inverse);-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio__dot{width:10px;height:10px;border-radius:var(--boreal-radius-full);background-color:transparent;-webkit-transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, -webkit-box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;transition:background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease}.bds-radio__info-icon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:var(--boreal-typography-font-size-sm);line-height:1;color:var(--boreal-icon-default-ink)}.bds-radio:hover:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button{border-color:var(--boreal-stroke-default-light);-webkit-box-shadow:var(--boreal-depth-box-shadow-xs);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{-webkit-box-shadow:var(--boreal-depth-box-shadow-focus);box-shadow:var(--boreal-depth-box-shadow-focus)}.bds-radio:active:not(.bds-radio--disabled):not(.bds-radio--checked) .bds-radio__button{-webkit-box-shadow:var(--boreal-depth-box-shadow-active);box-shadow:var(--boreal-depth-box-shadow-active)}.bds-radio--checked .bds-radio__button{border-color:var(--boreal-stroke-primary-base)}.bds-radio--checked .bds-radio__dot{background-color:var(--boreal-ui-primary-base)}.bds-radio--error .bds-radio__button{border-color:var(--boreal-stroke-danger-base)}.bds-radio--disabled{cursor:not-allowed;pointer-events:none}.bds-radio--disabled .bds-radio__button{border-color:var(--boreal-stroke-default-light);background-color:var(--boreal-ui-disabled)}.bds-radio--disabled .bds-radio__label{color:var(--boreal-text-disabled)}.bds-radio--disabled.bds-radio--checked .bds-radio__button{border-color:var(--boreal-ui-primary-light)}.bds-radio--disabled.bds-radio--checked .bds-radio__dot{background-color:var(--boreal-ui-primary-light)}`;
 
 const BdsRadio = class {
     constructor(hostRef) {
@@ -51,7 +51,7 @@ const BdsRadio = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1d68465b5124471bda9fb1e4f3dc022d4f22be6d', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.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() }), index.h("span", { key: '6de9fcb7657842b81b4bf803e3e60b6891fef27e', class: "bds-radio__button" }, index.h("span", { key: '660c57e990abc4f6f1288f93c198e9bb60be6c29', class: "bds-radio__dot" })), index.h("span", { key: 'ec3879d0edb42cdbc7b4257d563d9c298fd3b89d', class: "bds-radio__content" }, index.h("span", { key: '430b04fd6f836cf2881fecf9df56bee70486da85', class: "bds-radio__icon" }, index.h("slot", { key: '30dcf8837cd50a9e48a6c061576f7b9d53eeabd9', name: "icon" })), index.h("span", { key: 'dbb139d87c4689a64e2860b365d7c261c56b638b', class: "bds-radio__label" }, this.label || index.h("slot", { key: 'a7d985fa9773a8f285c36f3deaeb7112adf20f95' })), this.info && (index.h("span", { key: '36958330fd1ed9fa6f64bcf757c9be113fae5daf', class: "bds-radio__info" }, index.h("span", { key: 'ea5a415943c9f67f027a4b241d024ea61321a8a1', class: "bds-radio__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: '875105c226c6d1fb90d62fe275ed544f043a1c19' }, this.info))))));
+        return (index.h(index.Host, { key: '460a06887759af9d8ff04be3b76e93c48a6e59f6', class: this.classMap, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, index.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() }), index.h("span", { key: 'e660d053bec4d6fb7a134230aad1317c1cc839cd', class: "bds-radio__button" }, index.h("span", { key: '2a983b9b97396c9d0f0485e7b00309292c398cd6', class: "bds-radio__dot" })), index.h("span", { key: 'e616d473595a3efd5f01f2896d8481d91c9195ac', class: "bds-radio__content" }, index.h("span", { key: '50e7006d945aad95fb2c01d7beae98672e5fc532', class: "bds-radio__icon" }, index.h("slot", { key: 'd2f2018dbc9cb25e996b33be2fbfab3b96c84f14', name: "icon" })), index.h("span", { key: 'b39791291a81d307dae7f45b4d764695d34d8f8f', class: "bds-radio__label" }, this.label || index.h("slot", { key: '1aef7b131da161b51afb52383913d5187332352f' })), this.info && (index.h("span", { key: '943d3e05512fab78db5700d5c1527c3db9eeb272', class: "bds-radio__info" }, index.h("span", { key: 'd2a2a78eac436334545013539f8410c73ed06b2e', class: "bds-radio__info-icon bds-icon-info-circle", "aria-hidden": "true" }), index.h("bds-tooltip", { key: 'f6add279f359fde8c9727219a6126b776c755eff' }, this.info))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/bds-select.cjs.entry.js

@@ -0,0 +1,394 @@
+'use strict';
+
+var index = require('./index-CwYIVC9N.js');
+var attributes = require('./attributes-CgRFplrN.js');
+var Logger = require('./Logger-DnziItRH.js');
+var BaseAttributes = require('./BaseAttributes-DBBhKt7O.js');
+
+/**
+ * Detects whether a slot has assigned content in the host element's light DOM.
+ *
+ * Whitespace-only text nodes and comment nodes are ignored — only element nodes
+ * and non-empty text nodes are considered meaningful slot content.
+ *
+ * @param el - The host element to query.
+ * @param slotName - Named slot to check. Omit to check the default slot.
+ * @returns `true` if the slot has meaningful content, `false` otherwise.
+ */
+/**
+ * Method to return clean text from html element, removing extra spaces and line breaks.
+ * Removing tags and getting only the text content.
+ *
+ * @param el - HTML element to extract text from.
+ * @returns string with the clean text content of the element.
+ */
+function getCleanText(el) {
+    const textContent = el;
+    if (textContent !== null) {
+        return textContent.textContent?.trim() || '';
+    }
+    return '';
+}
+/**
+ * Method to update a property of an HTML element, checking if the element is not null before updating.
+ *
+ * @param el - HTML element to update.
+ * @param prop - Property name to update.
+ * @param value - Value to set for the property.
+ */
+function updateElementProp(el, prop, value) {
+    if (el !== null) {
+        el[prop] = value;
+    }
+}
+/**
+ * Method to update an attribute of an HTML element, checking if the element is not null before updating.
+ * This method is used to update attributes that are not reflected as properties in the DOM, such as ARIA attributes.
+ *
+ * @param el - HTML element to update.
+ * @param attr - Attribute name to update.
+ * @param value - Value to set for the attribute.
+ */
+function updateElementAttr(el, attr, value) {
+    if (el !== null && el !== undefined) {
+        el.setAttribute(attr, value);
+    }
+}
+/**
+ * Method to add an event listener to an HTML element, checking if the element is not null before adding the listener.
+ *
+ * @param el - HTML element to add the event listener to.
+ * @param event - Event name to listen for.
+ * @param handler - Event handler function or object to handle the event.
+ */
+function addElementListener(el, event, handler) {
+    if (el !== null && el !== undefined) {
+        el.addEventListener(event, handler);
+    }
+}
+/**
+ * Method to remove an event listener from an HTML element, checking if the element is not null before removing the listener.
+ *
+ * @param el - HTML element to remove the event listener from.
+ * @param event - Event name to stop listening for.
+ * @param handler - Event handler function or object that was used to handle the event.
+ */
+function removeElementListener(el, event, handler) {
+    if (el !== null && el !== undefined) {
+        el.removeEventListener(event, handler);
+    }
+}
+
+const bdsSelectCss = () => `@charset "UTF-8";bds-select{position:relative;display:-ms-flexbox;display:flex}bds-select .bds-list-menu{--bds-list-menu-max-width:100%}`;
+
+const BdsSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bdsChange = index.createEvent(this, "bdsChange");
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.inheritedAttributes = {};
+        this.hostForm = null;
+        /** The value of the select component. */
+        this.value = '';
+        /** Prop to define if its searchable. It allows to write and filter the options */
+        this.searchable = false;
+        /** Name to assign in form */
+        this.name = '';
+        /** The string representation of the value. */
+        this.valueString = '';
+        /** state to manage popover visibility */
+        this.popoverVisible = false;
+        /** State for id components for aria controls */
+        this.listId = `bds-select-list-${BaseAttributes.createId()}`;
+        /** Flag to suppress focus-triggered open when focus originated from a mousedown inside the component */
+        this._preventFocusOpen = false;
+        /** Listens for changes in the list menu. */
+        this.listenListMenu = (event) => {
+            event.stopPropagation();
+            if (this.bdsList !== null) {
+                const eventDetail = event.detail;
+                this._preventFocusOpen = true;
+                this.setValue(eventDetail || '');
+                void this.bdsPopover?.closePopover();
+            }
+        };
+        /** Listen clear input */
+        this.listenClearInput = () => {
+            this.setValue('');
+            this.valueString = '';
+            this.resetChildren();
+        };
+        /** Listens for changes in the text field. When is clear and input is empty, resets the child elements. */
+        this.listenField = (event) => {
+            event.stopPropagation();
+            const inputValue = event.target.value;
+            if (inputValue === '') {
+                this.resetChildren();
+                return;
+            }
+            if (!this.popoverVisible) {
+                void this.bdsPopover?.openPopover();
+            }
+            this.searcherElement(inputValue);
+        };
+        /** Listen blur input to reset on leave */
+        this.listenBlurInput = (event) => {
+            const relatedTarget = event.relatedTarget;
+            if (relatedTarget && this.el.contains(relatedTarget)) {
+                return;
+            }
+            this.resetValueField();
+            this.resetChildren();
+        };
+        /** Intercepts Tab while the popover is open and moves focus to the selected item, or first available item */
+        this.listenKeydown = (event) => {
+            const keyEvent = event;
+            if (keyEvent.key !== 'Tab' || !this.popoverVisible || this.searchable)
+                return;
+            event.preventDefault();
+            const selectedItem = this.value !== '' ? this.bdsList?.querySelector(`bds-list-menu-item[value="${this.value}"]`) : null;
+            const target = selectedItem ??
+                this.bdsList?.querySelector('bds-list-menu-item:not([disabled]):not([hidden]):not([variant="label"])');
+            target?.focus();
+        };
+        /** Sets the flag that suppresses focus-open when focus was caused by a mousedown inside the component */
+        this.listenMouseDown = () => {
+            this._preventFocusOpen = true;
+        };
+        /** Opens the popover when the searchable input receives focus from keyboard (Tab), not from click */
+        this.listenFocusInput = () => {
+            if (this._preventFocusOpen) {
+                this._preventFocusOpen = false;
+                return;
+            }
+            void this.bdsPopover?.openPopover();
+        };
+        /** Prevents bds-text-field's own valueChange from bubbling up — bds-select emits its own */
+        this.stopFieldValueChange = (event) => {
+            event.stopPropagation();
+        };
+        /** Resets component state when the parent form is reset */
+        this.listenFormReset = () => {
+            this.value = '';
+            this.valueString = '';
+            this.bdsList?.setSelectedValues('').catch(() => {
+                new Logger.Logger().warn('bds-select', 'No options available to reset the value');
+            });
+        };
+    }
+    /** Watch popover visible */
+    watchPopoverVisible(newValue) {
+        updateElementAttr(this.bdsInput, 'aria-expanded', newValue.toString());
+        updateElementAttr(this.el, 'aria-expanded', newValue.toString());
+    }
+    /** Watch value */
+    watchValue() {
+        this.loadValue();
+    }
+    /** Watch valueString */
+    watchValueString(newValue) {
+        updateElementAttr(this.bdsField, 'value', newValue);
+    }
+    /** Lifecycle method called before the component is loaded */
+    componentWillLoad() {
+        this.inheritedAttributes = {
+            ...attributes.inheritAttributes(this.el, ['role']),
+        };
+    }
+    /** Lifecycle method called after the component has loaded. */
+    componentDidLoad() {
+        this.hostForm = this.el.closest('form');
+        addElementListener(this.hostForm, 'reset', this.listenFormReset);
+        this.assignListeners();
+        this.loadDefaultProps();
+        this.loadValue();
+    }
+    /** Lifecycle method called when the component is disconnected from the DOM */
+    disconnectedCallback() {
+        removeElementListener(this.hostForm, 'reset', this.listenFormReset);
+        this.removeListeners();
+    }
+    /** Get for the list menu element in runtime */
+    get bdsList() {
+        if (this.el !== null) {
+            return this.el.querySelector('bds-list-menu');
+        }
+        return null;
+    }
+    /** Get for the text field element in runtime */
+    get bdsField() {
+        if (this.el !== null) {
+            return this.el.querySelector('bds-text-field');
+        }
+        return null;
+    }
+    /** Get for the input element inside the text field in runtime */
+    get bdsInput() {
+        if (this.bdsField !== null) {
+            return this.bdsField.querySelector('input');
+        }
+        return null;
+    }
+    /** Get for the popover element in runtime */
+    get bdsPopover() {
+        if (this.el !== null) {
+            return this.el.querySelector('bds-popover');
+        }
+        return null;
+    }
+    /** Assigns event listeners to the relevant elements. */
+    assignListeners() {
+        addElementListener(this.bdsList, 'bdsChange', this.listenListMenu);
+        addElementListener(this.bdsField, 'bdsClear', this.listenClearInput);
+        addElementListener(this.bdsField, 'bdsInput', this.listenField);
+        addElementListener(this.bdsField, 'valueChange', this.stopFieldValueChange);
+        addElementListener(this.bdsInput, 'blur', this.listenBlurInput);
+        addElementListener(this.bdsInput, 'keydown', this.listenKeydown);
+        if (this.searchable) {
+            addElementListener(this.bdsInput, 'focus', this.listenFocusInput);
+            addElementListener(this.el, 'mousedown', this.listenMouseDown);
+        }
+        this.listenPopOver();
+    }
+    /** Removes event listeners from the relevant elements. */
+    removeListeners() {
+        removeElementListener(this.bdsList, 'bdsChange', this.listenListMenu);
+        removeElementListener(this.bdsField, 'bdsClear', this.listenClearInput);
+        removeElementListener(this.bdsField, 'bdsInput', this.listenField);
+        removeElementListener(this.bdsField, 'valueChange', this.stopFieldValueChange);
+        removeElementListener(this.bdsInput, 'blur', this.listenBlurInput);
+        removeElementListener(this.bdsInput, 'keydown', this.listenKeydown);
+        removeElementListener(this.bdsInput, 'focus', this.listenFocusInput);
+        removeElementListener(this.el, 'mousedown', this.listenMouseDown);
+    }
+    /** Loads the default properties for the select component. */
+    loadDefaultProps() {
+        this.loadDefaultTextFieldProps();
+        this.loadDefaultListMenuProps();
+    }
+    /** load default props for textfield */
+    loadDefaultTextFieldProps() {
+        updateElementProp(this.bdsField, 'clearable', true);
+        updateElementProp(this.bdsField, 'selectable', !this.searchable);
+        updateElementProp(this.bdsField, 'iconRight', 'bds-icon-chevron-down');
+        updateElementAttr(this.bdsInput, 'role', 'combobox');
+        updateElementAttr(this.bdsInput, 'aria-haspopup', 'listbox');
+        updateElementAttr(this.bdsInput, 'aria-expanded', 'false');
+        updateElementAttr(this.bdsInput, 'aria-autocomplete', !this.searchable ? 'none' : 'list');
+        updateElementAttr(this.bdsInput, 'aria-controls', this.listId);
+    }
+    /** load default props to list menu */
+    loadDefaultListMenuProps() {
+        updateElementAttr(this.bdsList, 'menu-role', 'listbox');
+        updateElementAttr(this.bdsList, 'id', this.listId);
+    }
+    /** set value emitting event */
+    setValue(value) {
+        this.value = value;
+        this.bdsChange.emit(value);
+        this.valueChange.emit(value);
+    }
+    /** Listens for changes in the popover visibility and updates the state accordingly. */
+    listenPopOver() {
+        const popoverSettings = {
+            hideArrow: true,
+            onAfterShow: () => {
+                this.popoverVisible = true;
+                return true;
+            },
+            onAfterHide: () => {
+                this.popoverVisible = false;
+                this.resetValueField();
+                this.resetChildren();
+                return true;
+            },
+        };
+        updateElementProp(this.bdsPopover, 'floatingOptions', popoverSettings);
+    }
+    /** Resets the value field */
+    resetValueField() {
+        if (this.value === '') {
+            this.bdsField?.setAttribute('value', '');
+        }
+        else if (this.valueString !== '') {
+            this.bdsField?.setAttribute('value', this.valueString);
+        }
+    }
+    /** Searches for elements in the list menu based on the input text. */
+    searcherElement(text) {
+        const inputValue = text.toLowerCase();
+        this.bdsList?.querySelectorAll('bds-list-menu-item').forEach(option => {
+            const value = option.getAttribute('value') || '';
+            const textElement = option.querySelector('.bds-list-item__content-left__text');
+            const optionText = textElement !== null ? getCleanText(textElement) : '';
+            const isVisible = optionText.toLowerCase().includes(inputValue) || value.toLowerCase().includes(inputValue);
+            updateElementProp(option, 'hidden', !isVisible);
+            updateElementAttr(option, 'tabindex', isVisible ? '0' : '-1');
+            if (isVisible)
+                this.showParentLabel(option);
+        });
+        const visibleOptions = this.bdsList?.querySelectorAll('bds-list-menu-item:not([hidden])');
+        updateElementProp(this.bdsList, 'empty', visibleOptions?.length === 0);
+    }
+    /** Shows the parent label of a given item. */
+    showParentLabel(item) {
+        let previous = item.previousElementSibling;
+        while (previous !== null) {
+            if (previous.variant === 'label') {
+                updateElementProp(previous, 'hidden', false);
+                break;
+            }
+            previous = previous.previousElementSibling;
+        }
+    }
+    /** Resets the children elements of the list menu, making them all visible. */
+    resetChildren() {
+        this.bdsList?.querySelectorAll('bds-list-menu-item').forEach(option => {
+            updateElementProp(option, 'hidden', false);
+        });
+    }
+    /** Load value */
+    loadValue() {
+        const value = this.value;
+        if (value === '' || this.bdsList === null || this.bdsField === null) {
+            this.valueString = '';
+            this.bdsList?.setSelectedValues('').catch(() => {
+                new Logger.Logger().warn('bds-select', 'No options available to select the value');
+            });
+            return;
+        }
+        const option = this.bdsList.querySelector(`bds-list-menu-item[value="${value}"]`);
+        if (option === null)
+            return;
+        const optionText = option.querySelector('.bds-list-item__content-left__text');
+        const text = getCleanText(optionText);
+        this.bdsList
+            .setSelectedValues(value)
+            .then(() => {
+            this.valueString = text;
+            option.scrollIntoView({ block: 'nearest' });
+        })
+            .catch(() => {
+            new Logger.Logger().warn('bds-select', 'Failed to set selected value');
+        });
+    }
+    /** Main Render */
+    render() {
+        return (index.h(index.Host, { key: '03665a810a8bccc7613bb617624253edf36ba543', role: "none", ...this.inheritedAttributes }, index.h("slot", { key: 'dd6e528ceaf121f372ce82cc1682a676d6a5a64a', name: "field" }), index.h("input", { key: '4ff9a9348bac3c0a838950357523fd379e44d497', type: "hidden", value: this.value, name: this.name }), index.h("bds-popover", { key: '4f03fb1eb766c29ccaf26cf6450b8346d3681dc7', width: "full" }, index.h("slot", { key: '80e28f34ed9369a1a8f3f687dbbda40aa246e3fb', name: "list" }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "popoverVisible": [{
+                "watchPopoverVisible": 0
+            }],
+        "value": [{
+                "watchValue": 0
+            }],
+        "valueString": [{
+                "watchValueString": 0
+            }]
+    }; }
+};
+BdsSelect.style = bdsSelectCss();
+
+exports.bds_select = BdsSelect;