@descope/web-components-ui 1.0.201 → 1.0.203

package/dist/cjs/index.cjs.js

@@ -7578,7 +7578,7 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
   }
 
   onClick(e) {
-    if (!this.isReadonly && e.target !== e.currentTarget) {
+    if (e.target !== e.currentTarget) {
       if (e.target === this.getSelectedNode() && this.allowDeselect) {
         this.removeSelected();
       } else {
@@ -7624,6 +7624,10 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     });
   }
 
+  onReadOnlyChange() {
+    this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
+  }
+
   getValidity() {
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
@@ -7638,6 +7642,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
         case 'size':
           this.onSizeChange();
           break;
+        case 'readonly':
+          this.onReadOnlyChange();
+          break;
       }
     });
   }
@@ -7647,14 +7654,16 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     this.addEventListener('focus', (e) => {
       // we want to ignore focus events we are dispatching
       if (e.isTrusted) {
-        this.items[0].focus();
+        this.items[0]?.focus();
       }
     });
 
     super.init?.();
     this.setDefaultValue();
 
-    observeAttributes(this, this.onObservedAttributeChange.bind(this), { includeAttrs: ['size'] });
+    observeAttributes(this, this.onObservedAttributeChange.bind(this), {
+      includeAttrs: ['size', 'readonly'],
+    });
 
     this.querySelector('slot').addEventListener('click', this.onClick.bind(this));
   }