@descope/web-components-ui 3.23.3 → 3.24.0

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/descope/web-components-ui.git",
     "directory": "packages/web-components/web-components-ui"
   },
-  "version": "3.23.3",
+  "version": "3.24.0",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -57,11 +57,11 @@
     "webpack-cli": "^7.0.0",
     "webpack-dev-server": "^5.0.0",
     "webpack-subresource-integrity": "5.2.0-rc.1",
-    "eslint-plugin-no-bare-class-import": "3.23.3",
-    "rollup-replace-plugin": "3.23.3",
-    "test-drivers": "3.23.3",
-    "webpack-replace-plugin": "3.23.3",
-    "webpack-extract-font-loader": "3.23.3"
+    "eslint-plugin-no-bare-class-import": "3.24.0",
+    "rollup-replace-plugin": "3.24.0",
+    "test-drivers": "3.24.0",
+    "webpack-extract-font-loader": "3.24.0",
+    "webpack-replace-plugin": "3.24.0"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -85,43 +85,43 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/descope-active-sessions": "3.23.3",
-    "@descope-ui/descope-address-field": "3.23.3",
-    "@descope-ui/descope-country-subdivision-city-field": "3.23.3",
-    "@descope-ui/common": "3.23.3",
-    "@descope-ui/descope-apps-list": "3.23.3",
-    "@descope-ui/descope-avatar": "3.23.3",
-    "@descope-ui/descope-badge": "3.23.3",
-    "@descope-ui/descope-autocomplete-field": "3.23.3",
-    "@descope-ui/descope-button": "3.23.3",
-    "@descope-ui/descope-collapsible-container": "3.23.3",
-    "@descope-ui/descope-combo-box": "3.23.3",
-    "@descope-ui/descope-enriched-text": "3.23.3",
-    "@descope-ui/descope-icon": "3.23.3",
-    "@descope-ui/descope-image": "3.23.3",
-    "@descope-ui/descope-link": "3.23.3",
-    "@descope-ui/descope-list-item": "3.23.3",
-    "@descope-ui/descope-month-day-field": "3.23.3",
-    "@descope-ui/descope-month-day-field-picker": "3.23.3",
-    "@descope-ui/descope-multi-line-mappings": "3.23.3",
-    "@descope-ui/descope-outbound-app-button": "3.23.3",
-    "@descope-ui/descope-outbound-apps": "3.23.3",
-    "@descope-ui/descope-password-strength": "3.23.3",
-    "@descope-ui/descope-multi-select-combo-box": "3.23.3",
-    "@descope-ui/descope-ponyhot": "3.23.3",
-    "@descope-ui/descope-recovery-codes": "3.23.3",
-    "@descope-ui/descope-text": "3.23.3",
-    "@descope-ui/descope-text-field": "3.23.3",
-    "@descope-ui/descope-timer": "3.23.3",
-    "@descope-ui/descope-timer-button": "3.23.3",
-    "@descope-ui/descope-tooltip": "3.23.3",
-    "@descope-ui/descope-list": "3.23.3",
-    "@descope-ui/descope-multi-sso": "3.23.3",
-    "@descope-ui/descope-trusted-devices": "3.23.3",
-    "@descope-ui/descope-anchored": "3.23.3",
-    "@descope-ui/descope-user-passkeys": "3.23.3",
-    "@descope-ui/descope-filter": "3.23.3",
-    "@descope-ui/descope-attachment": "3.23.3"
+    "@descope-ui/common": "3.24.0",
+    "@descope-ui/descope-active-sessions": "3.24.0",
+    "@descope-ui/descope-address-field": "3.24.0",
+    "@descope-ui/descope-country-subdivision-city-field": "3.24.0",
+    "@descope-ui/descope-apps-list": "3.24.0",
+    "@descope-ui/descope-autocomplete-field": "3.24.0",
+    "@descope-ui/descope-avatar": "3.24.0",
+    "@descope-ui/descope-badge": "3.24.0",
+    "@descope-ui/descope-button": "3.24.0",
+    "@descope-ui/descope-collapsible-container": "3.24.0",
+    "@descope-ui/descope-combo-box": "3.24.0",
+    "@descope-ui/descope-enriched-text": "3.24.0",
+    "@descope-ui/descope-icon": "3.24.0",
+    "@descope-ui/descope-image": "3.24.0",
+    "@descope-ui/descope-link": "3.24.0",
+    "@descope-ui/descope-list": "3.24.0",
+    "@descope-ui/descope-list-item": "3.24.0",
+    "@descope-ui/descope-month-day-field": "3.24.0",
+    "@descope-ui/descope-month-day-field-picker": "3.24.0",
+    "@descope-ui/descope-multi-line-mappings": "3.24.0",
+    "@descope-ui/descope-multi-select-combo-box": "3.24.0",
+    "@descope-ui/descope-outbound-app-button": "3.24.0",
+    "@descope-ui/descope-outbound-apps": "3.24.0",
+    "@descope-ui/descope-password-strength": "3.24.0",
+    "@descope-ui/descope-ponyhot": "3.24.0",
+    "@descope-ui/descope-recovery-codes": "3.24.0",
+    "@descope-ui/descope-text": "3.24.0",
+    "@descope-ui/descope-text-field": "3.24.0",
+    "@descope-ui/descope-timer": "3.24.0",
+    "@descope-ui/descope-timer-button": "3.24.0",
+    "@descope-ui/descope-tooltip": "3.24.0",
+    "@descope-ui/descope-multi-sso": "3.24.0",
+    "@descope-ui/descope-trusted-devices": "3.24.0",
+    "@descope-ui/descope-attachment": "3.24.0",
+    "@descope-ui/descope-anchored": "3.24.0",
+    "@descope-ui/descope-user-passkeys": "3.24.0",
+    "@descope-ui/descope-filter": "3.24.0"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/button-selection-group-fields/baseButtonSelectionGroup.js

@@ -4,6 +4,7 @@ import {
   resetInputCursor,
   resetInputFieldDefaultWidth,
 } from '../../helpers/themeHelpers/resetHelpers';
+import { ButtonSelectionGroupItemClass } from './descope-button-selection-group-item/ButtonSelectionGroupItemClass';
 
 export const buttonSelectionGroupBaseMixin = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
@@ -112,6 +113,12 @@ export const buttonSelectionGroupMappings = {
   errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
   errorMessageFontSize: { ...errorMessage, 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,
+  },
 };
 
 export const buttonSelectionGroupStyles = `

package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js

@@ -85,6 +85,7 @@ export const ButtonSelectionGroupItemClass = compose(
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.hostDirection,
       },
+      hostWidth: { selector: () => ButtonClass.componentName, property: 'width' },
       backgroundColor: {
         selector: () => ButtonClass.componentName,
         property: ButtonClass.cssVarList.backgroundColor,

package/src/theme/components/buttonSelectionGroup/baseButtonSelectionGroup.js

@@ -21,4 +21,15 @@ export 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%',
+      },
+    },
+  },
 });

package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js

@@ -8,6 +8,7 @@ export const vars = ButtonSelectionGroupItemClass.cssVarList;
 
 const buttonSelectionGroupItem = {
   [vars.hostDirection]: 'inherit',
+  [vars.hostWidth]: 'auto',
   [vars.backgroundColor]: globalRefs.colors.surface.main,
   [vars.labelTextColor]: globalRefs.colors.surface.contrast,
   [vars.borderColor]: globalRefs.colors.surface.light,

package/stories/descope-button-multi-selection-group.stories.js

@@ -27,6 +27,7 @@ const Template = ({
   required,
   readonly,
   'full-width': fullWidth,
+  layout,
   direction,
   disabled,
   minItemsSelection,
@@ -52,6 +53,7 @@ const Template = ({
   <descope-button-multi-selection-group
     data='${(itemsSource === 'attr' && serializedData) || ''}'
     full-width="${fullWidth || false}"
+    layout="${layout || ''}"
     size="${size || ''}"
     label="${label || ''}"
     helper-text="${helperText || ''}"
@@ -108,6 +110,11 @@ export default {
       name: 'Read Only',
       control: { type: 'boolean' },
     },
+    layout: {
+      name: 'Layout',
+      options: ['vertical', 'horizontal'],
+      control: { type: 'radio' },
+    },
     ...overrideRenderItemControl,
     ...itemsSourceControl,
     ...directionControl,

package/stories/descope-button-selection-group.stories.js

@@ -25,6 +25,7 @@ const Template = ({
   required,
   readonly,
   'full-width': fullWidth,
+  layout,
   direction,
   disabled,
   'helper-text': helperText,
@@ -48,6 +49,7 @@ const Template = ({
   <descope-button-selection-group
     data='${(itemsSource === 'attr' && serializedData) || ''}'
     full-width="${fullWidth || false}"
+    layout="${layout || ''}"
     size="${size || ''}"
     label="${label || ''}"
     helper-text="${helperText || ''}"
@@ -109,6 +111,11 @@ export default {
       name: 'Read Only',
       control: { type: 'boolean' },
     },
+    layout: {
+      name: 'Layout',
+      options: ['vertical', 'horizontal'],
+      control: { type: 'radio' },
+    },
     ...overrideRenderItemControl,
     ...itemsSourceControl,
     ...directionControl,