@descope/web-components-ui 3.23.2 → 3.24.0

package/dist/cjs/index.cjs.js

@@ -9716,7 +9716,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>
@@ -9756,6 +9756,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;
@@ -10099,7 +10110,7 @@ const RecoveryCodesClass = compose(
   createDynamicDataMixin$1({
     itemRenderer: itemRenderer$5,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
+    targetSelector: '.codes-list',
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
@@ -24989,6 +25000,7 @@ const ButtonSelectionGroupItemClass = compose$1(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.hostDirection,
       },
+      hostWidth: { selector: () => ButtonClass.componentName, property: 'width' },
       backgroundColor: {
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.backgroundColor,
@@ -25029,6 +25041,7 @@ const vars$n = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
   [vars$n.hostDirection]: 'inherit',
+  [vars$n.hostWidth]: 'auto',
   [vars$n.backgroundColor]: globalRefs$f.colors.surface.main,
   [vars$n.labelTextColor]: globalRefs$f.colors.surface.contrast,
   [vars$n.borderColor]: globalRefs$f.colors.surface.light,
@@ -25326,6 +25339,12 @@ const buttonSelectionGroupMappings = {
   errorMessageIconPosition: { ...errorMessage$2, property: 'background-position' },
   errorMessageFontSize: { ...errorMessage$2, property: 'font-size' },
   itemsSpacing: { ...internalWrapper, property: 'gap' },
+  itemsDirection: { ...internalWrapper, property: 'flex-direction' },
+  itemsAlignment: { ...internalWrapper, property: 'align-items' },
+  itemsWidth: {
+    selector: () => `::slotted(${ButtonSelectionGroupItemClass.componentName})`,
+    property: ButtonSelectionGroupItemClass.cssVarList.hostWidth,
+  },
 };
 
 const buttonSelectionGroupStyles = `
@@ -25467,6 +25486,17 @@ const createBaseButtonSelectionGroupMappings = (vars) => ({
   [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
   [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
   [vars.errorMessageFontSize]: refs.errorMessageFontSize,
+
+  layout: {
+    vertical: {
+      [vars.itemsDirection]: 'column',
+      [vars.itemsAlignment]: 'flex-start',
+      _fullWidth: {
+        [vars.itemsAlignment]: 'stretch',
+        [vars.itemsWidth]: '100%',
+      },
+    },
+  },
 });
 
 const vars$m = ButtonSelectionGroupClass.cssVarList;