@descope/web-components-ui 1.0.200 → 1.0.202

package/dist/cjs/index.cjs.js

@@ -7569,13 +7569,17 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     return this.getAttribute('size') || 'md';
   }
 
+  get allowDeselect() {
+    return this.getAttribute('allow-deselect') === 'true';
+  }
+
   removeSelected() {
     this.getSelectedNode()?.removeAttribute('selected');
   }
 
   onClick(e) {
-    if (!this.isReadonly && e.target !== e.currentTarget) {
-      if (e.target === this.getSelectedNode()) {
+    if (e.target !== e.currentTarget) {
+      if (e.target === this.getSelectedNode() && this.allowDeselect) {
         this.removeSelected();
       } else {
         this.setSelected(e.target);
@@ -7620,6 +7624,10 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
     });
   }
 
+  onReadOnlyChange() {
+    this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
+  }
+
   getValidity() {
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
@@ -7634,6 +7642,9 @@ class ButtonSelectionGroupInternalClass extends createBaseInputClass({
         case 'size':
           this.onSizeChange();
           break;
+        case 'readonly':
+          this.onReadOnlyChange();
+          break;
       }
     });
   }
@@ -7643,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));
   }
@@ -7744,7 +7757,9 @@ const customMixin = (superclass) =>
 
       this.inputElement = this.shadowRoot.querySelector(componentName$2);
 
-      forwardAttrs(this, this.inputElement, { includeAttrs: ['size', 'default-value'] });
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-value', 'allow-deselect'],
+      });
 
       this.renderItems();