@descope/web-components-ui 3.19.0 → 3.20.0

package/dist/index.esm.js

@@ -4579,9 +4579,9 @@ const componentName$1x = getComponentName('boolean-field-internal');
 
 const forwardAttributes$1 = ['disabled', 'invalid', 'readonly'];
 
-const BaseInputClass$g = createBaseInputClass({ componentName: componentName$1x, baseSelector: 'div' });
+const BaseInputClass$h = createBaseInputClass({ componentName: componentName$1x, baseSelector: 'div' });
 
-class BooleanInputInternal extends BaseInputClass$g {
+class BooleanInputInternal extends BaseInputClass$h {
   static get observedAttributes() {
     return ['readonly', 'label'];
   }
@@ -6897,11 +6897,11 @@ const observedAttrs$8 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$f = createBaseInputClass({ componentName: componentName$1l, baseSelector: 'div' });
+const BaseInputClass$g = createBaseInputClass({ componentName: componentName$1l, baseSelector: 'div' });
 
-class RawCalendar extends BaseInputClass$f {
+class RawCalendar extends BaseInputClass$g {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$f.observedAttributes || [], observedAttrs$8, calendarUiAttrs);
+    return [].concat(BaseInputClass$g.observedAttributes || [], observedAttrs$8, calendarUiAttrs);
   }
 
   // preview state epoch
@@ -7961,7 +7961,7 @@ const componentName$1j = getComponentName('date-field');
 // we set baseSelector to `vaadin-popover` as a temporary hack, so our portalMixin will
 // be able to process this component's overlay. The whole process needs refactoring as soon as possible.
 const BASE_SELECTOR$2 = 'vaadin-popover';
-const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1j, baseSelector: BASE_SELECTOR$2 });
+const BaseInputClass$f = createBaseInputClass({ componentName: componentName$1j, baseSelector: BASE_SELECTOR$2 });
 
 const dateFieldAttrs = [
   'format',
@@ -7974,7 +7974,7 @@ const dateFieldAttrs = [
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs$6 = [...dateFieldAttrs, ...calendarAttrs];
 
-class RawDateFieldClass extends BaseInputClass$e {
+class RawDateFieldClass extends BaseInputClass$f {
   epoch = '';
 
   format = DEFAULT_FORMAT$1;
@@ -8012,7 +8012,7 @@ class RawDateFieldClass extends BaseInputClass$e {
   ];
 
   static get observedAttributes() {
-    return [].concat(BaseInputClass$e.observedAttributes || [], observedAttrs$6);
+    return [].concat(BaseInputClass$f.observedAttributes || [], observedAttrs$6);
   }
 
   constructor() {
@@ -9240,11 +9240,11 @@ const forwardAttributes = [
   'aria-labelledby',
 ];
 
-const BaseInputClass$d = createBaseInputClass({ componentName: componentName$1c, baseSelector: 'div' });
+const BaseInputClass$e = createBaseInputClass({ componentName: componentName$1c, baseSelector: 'div' });
 
-class PasscodeInternal extends BaseInputClass$d {
+class PasscodeInternal extends BaseInputClass$e {
   static get observedAttributes() {
-    return observedAttributes$6.concat(BaseInputClass$d.observedAttributes || []);
+    return observedAttributes$6.concat(BaseInputClass$e.observedAttributes || []);
   }
 
   constructor() {
@@ -11404,11 +11404,11 @@ const mapAttrs$1 = {
 
 const inputRelatedAttrs$1 = [].concat(commonAttrs$2, countryAttrs, phoneAttrs, labelTypeAttrs$1);
 
-const BaseInputClass$c = createBaseInputClass({ componentName: componentName$18, baseSelector: 'div' });
+const BaseInputClass$d = createBaseInputClass({ componentName: componentName$18, baseSelector: 'div' });
 
-let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$c {
+let PhoneFieldInternal$1 = class PhoneFieldInternal extends BaseInputClass$d {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$c.observedAttributes || [], inputRelatedAttrs$1);
+    return [].concat(BaseInputClass$d.observedAttributes || [], inputRelatedAttrs$1);
   }
 
   #ayt;
@@ -12133,11 +12133,11 @@ const mapAttrs = {
   'phone-input-type': 'type',
 };
 
-const BaseInputClass$b = createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
+const BaseInputClass$c = createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
 
-class PhoneFieldInternal extends BaseInputClass$b {
+class PhoneFieldInternal extends BaseInputClass$c {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$b.observedAttributes || [], observedAttributes$4);
+    return [].concat(BaseInputClass$c.observedAttributes || [], observedAttributes$4);
   }
 
   #ayt;
@@ -13247,11 +13247,11 @@ const inputRelatedAttrs = [].concat(
   policyPanelAttrs
 );
 
-const BaseInputClass$a = createBaseInputClass({ componentName: componentName$14, baseSelector: 'div' });
+const BaseInputClass$b = createBaseInputClass({ componentName: componentName$14, baseSelector: 'div' });
 
-class NewPasswordInternal extends BaseInputClass$a {
+class NewPasswordInternal extends BaseInputClass$b {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$a.observedAttributes || [], inputRelatedAttrs);
+    return [].concat(BaseInputClass$b.observedAttributes || [], inputRelatedAttrs);
   }
 
   constructor() {
@@ -13498,13 +13498,19 @@ const componentName$11 = getComponentName('recaptcha');
 
 const observedAttributes$3 = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
-const BaseClass$a = createBaseClass({
+// The runtime only validates elements carrying a `name` (querySelectorAll('*[name]')).
+const DEFAULT_FIELD_NAME = 'recaptcha';
+
+const BaseInputClass$a = createBaseInputClass({
   componentName: componentName$11,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass$a {
+class RawRecaptcha extends BaseInputClass$a {
+  /** The exact `name` this component wrote itself, or null if the name is not ours. */
+  #ownedFieldName = null;
+
   static get observedAttributes() {
-    return observedAttributes$3.concat(BaseClass$a.observedAttributes || []);
+    return observedAttributes$3.concat(BaseInputClass$a.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -13515,6 +13521,7 @@ class RawRecaptcha extends BaseClass$a {
       }
 
       if (attrName === 'variant') {
+        this.#syncFormField();
         this.updatePreview();
       }
     }
@@ -13530,7 +13537,7 @@ class RawRecaptcha extends BaseClass$a {
   }
 
   displayRecaptcha() {
-    if (this.isWidget) {
+    if (this.isWidgetVariant) {
       this.displayWidget();
     } else {
       this.displayDeprecated();
@@ -13625,6 +13632,31 @@ class RawRecaptcha extends BaseClass$a {
     super.init?.();
 
     observeChildren(this, this.updatePreview.bind(this));
+    // avoid any possible conflicts with the inner input element
+    this.inputElement = this.recaptchaWidgetInputEle;
+    this.recaptchaWidgetInputEle.getValidity = null;
+    this.recaptchaWidgetInputEle.checkValidity = null;
+    this.#syncFormField();
+  }
+
+  /**
+   * Only the widget variant is a form field — the others must not carry a name, or the screen
+   * would submit an always-empty value under it.
+   */
+  #syncFormField() {
+    if (this.isWidgetVariant) {
+      if (!this.getAttribute('name')) {
+        this.setAttribute('name', DEFAULT_FIELD_NAME);
+        this.#ownedFieldName = DEFAULT_FIELD_NAME;
+      }
+    } else if (this.#ownedFieldName && this.getAttribute('name') === this.#ownedFieldName) {
+      this.removeAttribute('name');
+      this.#ownedFieldName = null;
+    }
+
+    // Refreshes the mixin's cached validity, which reportValidity answers from. Non-bubbling on
+    // purpose: the flow must not read this as user input.
+    this.dispatchEvent(new Event('change'));
   }
 
   updatePreview() {
@@ -13640,7 +13672,7 @@ class RawRecaptcha extends BaseClass$a {
   }
 
   getValidity() {
-    if (!this.isWidget) {
+    if (!this.isWidgetVariant) {
       return {};
     }
 
@@ -13652,7 +13684,7 @@ class RawRecaptcha extends BaseClass$a {
   }
 
   checkValidity() {
-    if (!this.isWidget) {
+    if (!this.isWidgetVariant) {
       return true;
     }
 
@@ -13679,7 +13711,7 @@ class RawRecaptcha extends BaseClass$a {
     return this.getAttribute('variant') || 'text';
   }
 
-  get isWidget() {
+  get isWidgetVariant() {
     return this.variant === 'widget';
   }
 
@@ -13693,7 +13725,7 @@ class RawRecaptcha extends BaseClass$a {
 
   #toggleRecaptcha(enabled) {
     this.renderRecaptcha(enabled);
-    if (this.isWidget) {
+    if (this.isWidgetVariant) {
       // For the interactive widget, scripts are loaded/executed by the runtime (grecaptcha-v2 for the
       // v2 checkbox, grecaptcha for an Enterprise key). This legacy v3/invisible path must be fully
       // skipped — the runtime renders into #recaptcha-widget and fills #recaptcha-widget-input.
@@ -24480,10 +24512,12 @@ class RawCollapsibleContainer extends createBaseClass$1({
     <div class="wrapper">
       <descope-text st-host-direction="ltr">
         <div class="header">
-          <div class="icon">
-            <descope-icon st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+          <div class="title">
+            <div class="icon">
+              <descope-icon st-fill="currentcolor" src=${chevronIcon}></descope-icon>
+            </div>
+            <span></span>
           </div>
-          <span></span>
         </div>
       </descope-text>
       <div class="content">
@@ -24515,6 +24549,16 @@ class RawCollapsibleContainer extends createBaseClass$1({
           display: flex;
           align-items: baseline;
       }
+      .title {
+        display: contents;
+      }
+      :host([attach-icon="true"]) .header {
+        display: block;
+      }
+      :host([attach-icon="true"]) .title {
+        display: inline-flex;
+        align-items: baseline;
+      }
       .icon {
           flex-shrink: 0;
           height: var(${TextClass.cssVarList.textLineHeight});
@@ -24636,6 +24680,7 @@ const selectors = {
   icon: () => 'descope-icon',
   iconWrapper: () => '.icon',
   header: () => '.header',
+  iconAndText: () => '.header, .title',
   text: () => 'span',
   wrapper: () => '.wrapper',
   content: () => 'div.content',
@@ -24676,7 +24721,7 @@ const CollapsibleContainerClass = compose$1(
 
       headerIconOrder: { selector: selectors.iconWrapper, property: 'order' },
       headerCursor: { selector: selectors.header, property: 'cursor' },
-      headerGap: { selector: selectors.header, property: 'gap' },
+      headerGap: { selector: selectors.iconAndText, property: 'gap' },
       textGrow: { selector: selectors.text, property: 'flex-grow' },
       textDirection: { selector: selectors.text, property: 'direction' },
       iconAnimationDuration: {
@@ -24701,7 +24746,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars$1(
   {
     shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
   },
-  componentName$i
+  componentName$i,
 );
 
 const { shadowColor: shadowColor$6 } = helperRefs$4;
@@ -24782,8 +24827,8 @@ const collapsibleContainer = {
   },
 
   iconPosition: {
-    'left': { [compVars$5.headerIconOrder]: '0' },
-    'right': { [compVars$5.headerIconOrder]: '1' },
+    left: { [compVars$5.headerIconOrder]: '0' },
+    right: { [compVars$5.headerIconOrder]: '1' },
   },
 
   _fillTitle: {
@@ -24798,7 +24843,7 @@ const collapsibleContainer = {
 
   _collapsible: {
     [compVars$5.headerCursor]: 'pointer',
-  }
+  },
 };
 
 const vars$U = {
@@ -32292,7 +32337,7 @@ const filter = {
   _fullWidth: {
     [vars$H.hostWidth]: '100%',
   },
-  [vars$H.overlay.backgroundColor]: globals.colors.surface.main,
+  [vars$H.overlay.backgroundColor]: globalRefs$o.colors.surface.main,
   [vars$H.overlay.backdropBackgroundColor]: 'transparent',
   [vars$H.overlay.backdropPointerEvents]: 'all',
   [vars$H.overlay.boxShadow]: