@descope/web-components-ui 3.23.3 → 3.24.0

package/dist/cjs/index.cjs.js

@@ -25000,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,
@@ -25040,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,
@@ -25337,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 = `
@@ -25478,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;