@descope/web-components-ui 3.19.0 → 3.20.0

package/dist/cjs/index.cjs.js

@@ -6914,7 +6914,7 @@ const MultiSelectComboBoxClass = compose(
 );
 
 const componentName$1f = getComponentName('multi-line-mappings');
-const BaseClass$a = createBaseClass$1({ componentName: componentName$1f });
+const BaseClass$9 = createBaseClass$1({ componentName: componentName$1f });
 
 const parseJSON = (value, fallback, source = 'unknown') => {
   if (typeof value !== 'string' || !value?.trim()) {
@@ -6984,7 +6984,7 @@ const createEmptyRow = () => ({ firstValues: [], secondValues: [] });
 const areSameValues = (first = [], second = []) =>
   first.length === second.length && first.every((v, i) => v === second[i]);
 
-class RawMultiLineMappingsClass extends BaseClass$a {
+class RawMultiLineMappingsClass extends BaseClass$9 {
   static get observedAttributes() {
     return [
       'data',
@@ -8183,16 +8183,16 @@ const CONNECTOR_CLASSES = {
   [RADAR_CONNECTOR_TEMPLATE]: RadarConnector,
 };
 
-const BaseInputClass$7 = createBaseInputClass$1({
+const BaseInputClass$8 = createBaseInputClass$1({
   componentName: componentName$1c,
   baseSelector: '',
 });
 const initConnectorAttrs = ['public-api-key'];
 const observedAttrs$7 = [...initConnectorAttrs];
 
-class RawAddressFieldInternal extends BaseInputClass$7 {
+class RawAddressFieldInternal extends BaseInputClass$8 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$7.observedAttributes || [], observedAttrs$7);
+    return [].concat(BaseInputClass$8.observedAttributes || [], observedAttrs$7);
   }
 
   get errorMsgValueMissing() {
@@ -8463,20 +8463,20 @@ const componentName$1a = getComponentName('timer');
 
 const observedAttributes$5 = ['seconds', 'hide-icon', 'paused'];
 
-const BaseClass$9 = createBaseClass$1({
+const BaseClass$8 = createBaseClass$1({
   componentName: componentName$1a,
   baseSelector: ':host > .wrapper',
 });
 
 const DEFAULT_INTERVAL = 1000;
 
-class RawTimer extends BaseClass$9 {
+class RawTimer extends BaseClass$8 {
   #timeRemains = 0;
 
   #intervalId;
 
   static get observedAttributes() {
-    return observedAttributes$5.concat(BaseClass$9.observedAttributes || []);
+    return observedAttributes$5.concat(BaseClass$8.observedAttributes || []);
   }
 
   constructor() {
@@ -8715,12 +8715,12 @@ const mapTimerAttrs = {
   'timer-paused': 'paused',
 };
 
-const BaseClass$8 = createBaseClass$1({
+const BaseClass$7 = createBaseClass$1({
   componentName: componentName$19,
   baseSelector: ':host > div',
 });
 
-class RawTimerButton extends BaseClass$8 {
+class RawTimerButton extends BaseClass$7 {
   constructor() {
     super();
 
@@ -9193,10 +9193,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">
@@ -9228,6 +9230,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});
@@ -9349,6 +9361,7 @@ const selectors$2 = {
   icon: () => 'descope-icon',
   iconWrapper: () => '.icon',
   header: () => '.header',
+  iconAndText: () => '.header, .title',
   text: () => 'span',
   wrapper: () => '.wrapper',
   content: () => 'div.content',
@@ -9389,7 +9402,7 @@ const CollapsibleContainerClass = compose(
 
       headerIconOrder: { selector: selectors$2.iconWrapper, property: 'order' },
       headerCursor: { selector: selectors$2.header, property: 'cursor' },
-      headerGap: { selector: selectors$2.header, property: 'gap' },
+      headerGap: { selector: selectors$2.iconAndText, property: 'gap' },
       textGrow: { selector: selectors$2.text, property: 'flex-grow' },
       textDirection: { selector: selectors$2.text, property: 'direction' },
       iconAnimationDuration: {
@@ -9414,7 +9427,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$17
+  componentName$17,
 );
 
 const { shadowColor: shadowColor$6 } = helperRefs$4;
@@ -9495,8 +9508,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: {
@@ -9511,7 +9524,7 @@ const collapsibleContainer = {
 
   _collapsible: {
     [compVars$5.headerCursor]: 'pointer',
-  }
+  },
 };
 
 const vars$U = {
@@ -9749,12 +9762,12 @@ const itemRenderer$4 = (
 `;
 };
 
-const BaseClass$7 = createBaseClass$1({
+const BaseClass$6 = createBaseClass$1({
   componentName: componentName$15,
   baseSelector: 'descope-list',
 });
 
-class RawOutboundAppsClass extends BaseClass$7 {
+class RawOutboundAppsClass extends BaseClass$6 {
   constructor() {
     super();
 
@@ -10249,12 +10262,12 @@ const itemRenderer$3 = (
   return template;
 };
 
-const BaseClass$6 = createBaseClass$1({
+const BaseClass$5 = createBaseClass$1({
   componentName: componentName$13,
   baseSelector: ListClass.componentName,
 });
 
-class RawTrustedDevicesClass extends BaseClass$6 {
+class RawTrustedDevicesClass extends BaseClass$5 {
   constructor() {
     super();
 
@@ -10682,12 +10695,12 @@ const itemRenderer$2 = ({ id, name, isDefault, link, authType }, _, ref) => {
   return template;
 };
 
-const BaseClass$5 = createBaseClass$1({
+const BaseClass$4 = createBaseClass$1({
   componentName: componentName$12,
   baseSelector: 'span.wrapper',
 });
 
-class RawMultiSsoClass extends BaseClass$5 {
+class RawMultiSsoClass extends BaseClass$4 {
   static get observedAttributes() {
     return [
       'label',
@@ -11651,7 +11664,7 @@ const comboBoxHTML = (id) =>
 
 // --- Base class ---
 
-const BaseInputClass$6 = createBaseInputClass$1({
+const BaseInputClass$7 = createBaseInputClass$1({
   componentName: componentName$10,
   baseSelector: '',
 });
@@ -11686,9 +11699,9 @@ const observedAttrs$6 = [
   'lang',
 ];
 
-class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$6 {
+class RawCountrySubdivisionCityFieldInternal extends BaseInputClass$7 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$6.observedAttributes || [], observedAttrs$6);
+    return [].concat(BaseInputClass$7.observedAttributes || [], observedAttrs$6);
   }
 
   #countryComboBox;
@@ -13086,12 +13099,12 @@ const itemRenderer$1 = ({ id, name, createdAt, passkeyType }, _, ref) => {
   return template;
 };
 
-const BaseClass$4 = createBaseClass$1({
+const BaseClass$3 = createBaseClass$1({
   componentName: componentName$Z,
   baseSelector: ListClass.componentName,
 });
 
-class RawUserPasskeysClass extends BaseClass$4 {
+class RawUserPasskeysClass extends BaseClass$3 {
   static get observedAttributes() {
     return [
       'label',
@@ -14162,7 +14175,7 @@ const componentName$X = getComponentName('month-day-field');
 // vaadin-popover is the baseSelector hack carried over from descope-date-field so portalMixin
 // can style the overlay. A cleaner solution requires upstream changes to portalMixin.
 const BASE_SELECTOR$2 = 'vaadin-popover';
-const BaseInputClass$5 = createBaseInputClass$1({
+const BaseInputClass$6 = createBaseInputClass$1({
   componentName: componentName$X,
   baseSelector: BASE_SELECTOR$2,
 });
@@ -14181,7 +14194,7 @@ const pickerAttrs = [
 ];
 const observedAttrs$4 = [...monthDayFieldAttrs, ...pickerAttrs];
 
-class RawMonthDayFieldClass extends BaseInputClass$5 {
+class RawMonthDayFieldClass extends BaseInputClass$6 {
   format = DEFAULT_FORMAT$1;
 
   #selectedCounterIdx = 0;
@@ -14198,7 +14211,7 @@ class RawMonthDayFieldClass extends BaseInputClass$5 {
   ];
 
   static get observedAttributes() {
-    return [].concat(BaseInputClass$5.observedAttributes || [], observedAttrs$4);
+    return [].concat(BaseInputClass$6.observedAttributes || [], observedAttrs$4);
   }
 
   constructor() {
@@ -15202,7 +15215,7 @@ const observedAttrs$3 = [
   'full-width',
 ];
 
-const BaseInputClass$4 = createBaseInputClass$1({
+const BaseInputClass$5 = createBaseInputClass$1({
   componentName: componentName$W,
   baseSelector: 'div',
 });
@@ -15237,9 +15250,9 @@ const monthEntries = (names) =>
 const dayEntries = (count) =>
   Array.from({ length: count }, (_, i) => ({ id: i + 1, name: String(i + 1) }));
 
-class RawMonthDayPicker extends BaseInputClass$4 {
+class RawMonthDayPicker extends BaseInputClass$5 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$4.observedAttributes || [], observedAttrs$3);
+    return [].concat(BaseInputClass$5.observedAttributes || [], observedAttrs$3);
   }
 
   // 1..12 or null
@@ -16737,14 +16750,14 @@ const componentName$T = getComponentName('filter');
 
 const BASE_SELECTOR$1 = 'vaadin-popover';
 
-const BaseClass$3 = createBaseClass$1({
+const BaseClass$2 = createBaseClass$1({
   componentName: componentName$T,
   baseSelector: BASE_SELECTOR$1,
 });
 
 const ROW_ICON_SLOTS = ['add-row-icon', 'delete-row-icon'];
 
-class RawFilterClass extends BaseClass$3 {
+class RawFilterClass extends BaseClass$2 {
   #committedRows = [];
 
   // Set while committing a change that originated from the inner filter-rows,
@@ -16762,7 +16775,7 @@ class RawFilterClass extends BaseClass$3 {
 
   static get observedAttributes() {
     return [
-      ...(BaseClass$3.observedAttributes || []),
+      ...(BaseClass$2.observedAttributes || []),
       'label',
       'disable-indicator',
       'data',
@@ -17321,7 +17334,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]:
@@ -23726,11 +23739,11 @@ const observedAttributes$2 = [
   'icon',
 ];
 
-const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$u, baseSelector: ':host > div' });
+const BaseInputClass$4 = createBaseInputClass({ componentName: componentName$u, baseSelector: ':host > div' });
 
-class RawUploadFile extends BaseInputClass$3 {
+class RawUploadFile extends BaseInputClass$4 {
   static get observedAttributes() {
-    return observedAttributes$2.concat(BaseInputClass$3.observedAttributes || []);
+    return observedAttributes$2.concat(BaseInputClass$4.observedAttributes || []);
   }
 
   constructor() {
@@ -27954,11 +27967,11 @@ const observedAttrs$1 = [
 
 const calendarUiAttrs = ['calendar-label-submit', 'calendar-label-cancel'];
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
+const BaseInputClass$3 = createBaseInputClass({ componentName: componentName$c, baseSelector: 'div' });
 
-class RawCalendar extends BaseInputClass$2 {
+class RawCalendar extends BaseInputClass$3 {
   static get observedAttributes() {
-    return [].concat(BaseInputClass$2.observedAttributes || [], observedAttrs$1, calendarUiAttrs);
+    return [].concat(BaseInputClass$3.observedAttributes || [], observedAttrs$1, calendarUiAttrs);
   }
 
   // preview state epoch
@@ -28788,7 +28801,7 @@ const componentName$b = getComponentName$1('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 = 'vaadin-popover';
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$b, baseSelector: BASE_SELECTOR });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$b, baseSelector: BASE_SELECTOR });
 
 const dateFieldAttrs = [
   'format',
@@ -28801,7 +28814,7 @@ const dateFieldAttrs = [
 const calendarAttrs = ['years-range', 'calendar-months', 'calendar-weekdays'];
 const observedAttrs = [...dateFieldAttrs, ...calendarAttrs];
 
-class RawDateFieldClass extends BaseInputClass$1 {
+class RawDateFieldClass extends BaseInputClass$2 {
   epoch = '';
 
   format = DEFAULT_FORMAT;
@@ -28839,7 +28852,7 @@ class RawDateFieldClass extends BaseInputClass$1 {
   ];
 
   static get observedAttributes() {
-    return [].concat(BaseInputClass$1.observedAttributes || [], observedAttrs);
+    return [].concat(BaseInputClass$2.observedAttributes || [], observedAttrs);
   }
 
   constructor() {
@@ -30718,12 +30731,12 @@ const EMAIL_FIELD = 'descope-email-field';
 const PHONE_FIELD = 'descope-phone-field';
 const PHONE_INPUT_BOX_FIELD = 'descope-phone-input-box-field';
 
-const BaseClass$2 = createBaseClass({
+const BaseClass$1 = createBaseClass({
   componentName: componentName$6,
   baseSelector: 'div',
 });
 
-class RawHybridField extends BaseClass$2 {
+class RawHybridField extends BaseClass$1 {
   #isReportedValidity = false;
 
   #selectionStart;
@@ -31353,10 +31366,10 @@ const componentName$4 = getComponentName$1('hcaptcha');
 
 const observedAttributes$1 = ['enabled', 'site-key'];
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
-class RawHcaptcha extends BaseInputClass {
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$4, baseSelector: ':host > div' });
+class RawHcaptcha extends BaseInputClass$1 {
   static get observedAttributes() {
-    return observedAttributes$1.concat(BaseInputClass.observedAttributes || []);
+    return observedAttributes$1.concat(BaseInputClass$1.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -31645,13 +31658,19 @@ const componentName$3 = getComponentName$1('recaptcha');
 
 const observedAttributes = ['enabled', 'site-key', 'action', 'enterprise', 'variant'];
 
-const BaseClass$1 = createBaseClass({
+// The runtime only validates elements carrying a `name` (querySelectorAll('*[name]')).
+const DEFAULT_FIELD_NAME = 'recaptcha';
+
+const BaseInputClass = createBaseInputClass({
   componentName: componentName$3,
   baseSelector: ':host > div',
 });
-class RawRecaptcha extends BaseClass$1 {
+class RawRecaptcha extends BaseInputClass {
+  /** The exact `name` this component wrote itself, or null if the name is not ours. */
+  #ownedFieldName = null;
+
   static get observedAttributes() {
-    return observedAttributes.concat(BaseClass$1.observedAttributes || []);
+    return observedAttributes.concat(BaseInputClass.observedAttributes || []);
   }
 
   attributeChangedCallback(attrName, oldValue, newValue) {
@@ -31662,6 +31681,7 @@ class RawRecaptcha extends BaseClass$1 {
       }
 
       if (attrName === 'variant') {
+        this.#syncFormField();
         this.updatePreview();
       }
     }
@@ -31677,7 +31697,7 @@ class RawRecaptcha extends BaseClass$1 {
   }
 
   displayRecaptcha() {
-    if (this.isWidget) {
+    if (this.isWidgetVariant) {
       this.displayWidget();
     } else {
       this.displayDeprecated();
@@ -31772,6 +31792,31 @@ class RawRecaptcha extends BaseClass$1 {
     super.init?.();
 
     observeChildren$1(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() {
@@ -31787,7 +31832,7 @@ class RawRecaptcha extends BaseClass$1 {
   }
 
   getValidity() {
-    if (!this.isWidget) {
+    if (!this.isWidgetVariant) {
       return {};
     }
 
@@ -31799,7 +31844,7 @@ class RawRecaptcha extends BaseClass$1 {
   }
 
   checkValidity() {
-    if (!this.isWidget) {
+    if (!this.isWidgetVariant) {
       return true;
     }
 
@@ -31826,7 +31871,7 @@ class RawRecaptcha extends BaseClass$1 {
     return this.getAttribute('variant') || 'text';
   }
 
-  get isWidget() {
+  get isWidgetVariant() {
     return this.variant === 'widget';
   }
 
@@ -31840,7 +31885,7 @@ class RawRecaptcha extends BaseClass$1 {
 
   #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.