@descope/web-components-ui 3.23.1 → 3.23.3

package/dist/index.esm.js

@@ -9909,7 +9909,7 @@ const customMixin$d = (superclass) =>
     // Vaadin toggles visibility on Enter keydown but lets the event bubble,
     // and the SDK submits the form on any Enter that reaches the flow root.
     stopRevealButtonEnterPropagation() {
-      this.revealButton.addEventListener('keydown', (e) => {
+      this.revealButton?.addEventListener('keydown', (e) => {
         if (e.key === 'Enter') e.stopPropagation();
       });
     }
@@ -9971,7 +9971,7 @@ const customMixin$d = (superclass) =>
     handlePasswordVisibility(externalInput) {
       // disable vaadin's `__boundRevealButtonMouseDown` mouse-down event lisetener
       const origBoundRevealButtonMouseDown = this.baseElement.__boundRevealButtonMouseDown;
-      this.revealButton.removeEventListener('mousedown', origBoundRevealButtonMouseDown);
+      this.revealButton?.removeEventListener('mousedown', origBoundRevealButtonMouseDown);
 
       // disable vaadin's `_passwordVisibleChanged` observer
       this.baseElement._passwordVisibleChanged = () => {};
@@ -25099,7 +25099,7 @@ class RawRecoveryCodes extends createBaseClass$1({
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="wrapper">
         <div class="codes-box">
-          <div class="list"></div>
+          <div class="list"><div class="codes-list"></div></div>
           <descope-text class="icon-wrapper">
             <div class="icons">
               <vaadin-icon class="icon copy-icon" icon="vaadin:copy-o" title="Copy"></vaadin-icon>
@@ -25139,6 +25139,17 @@ class RawRecoveryCodes extends createBaseClass$1({
         display: flex;
         flex-grow: 1;
         flex-direction: column;
+        /* text-align maps to align-items here, so it positions the codes block
+           (start/center/end) inside the available space, not each row */
+      }
+      .codes-list {
+        display: flex;
+        flex-direction: column;
+        /* rows always start-aligned so the bullets line up in any font.
+           width:fit-content hugs the codes so .list can position the whole
+           block (keep it, it also defeats the stretch fallback) */
+        align-items: flex-start;
+        width: fit-content;
       }
       descope-text span {
         display: inline-flex;
@@ -25482,7 +25493,7 @@ const RecoveryCodesClass = compose$1(
   createDynamicDataMixin$1({
     itemRenderer: itemRenderer$4,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
+    targetSelector: '.codes-list',
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,