@descope/web-components-ui 3.23.2 → 3.24.0

package/dist/index.esm.js

@@ -14379,6 +14379,121 @@ class ButtonSelectionGroupInternalClass extends createBaseButtonSelectionGroupIn
   }
 }
 
+const componentName$$ = getComponentName('button-selection-group-item');
+
+class RawSelectItem extends createBaseClass({
+  componentName: componentName$$,
+  baseSelector: ':host > descope-button',
+}) {
+  get size() {
+    return this.getAttribute('size') || 'md';
+  }
+
+  get variant() {
+    return this.getAttribute('variant') || 'contained';
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  set value(value) {
+    this.setAttribute('value', value);
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
+      <slot></slot>
+    </descope-button>
+	`;
+
+    injectStyle(
+      `
+      descope-button {
+        max-width: 100%;
+      }
+			descope-button > slot {
+				width: 100%;
+				overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+			}
+			:host {
+				display: inline-block;
+        max-width: 100%
+			}
+  `,
+      this
+    );
+
+    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
+    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
+  }
+
+  handleFocus() {
+    this.shadowRoot.querySelector('descope-button')?.focus();
+  }
+
+  focus() {
+    this.handleFocus();
+  }
+
+  init() {
+    super.init();
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        this.handleFocus();
+      }
+    });
+  }
+}
+
+const ButtonSelectionGroupItemClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostDirection: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.hostDirection,
+      },
+      hostWidth: { selector: () => ButtonClass.componentName, property: 'width' },
+      backgroundColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.backgroundColor,
+      },
+      labelTextColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.labelTextColor,
+      },
+      borderColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderColor,
+      },
+      borderWidth: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderWidth,
+      },
+      borderStyle: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderStyle,
+      },
+      borderRadius: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.borderRadius,
+      },
+      outlineColor: {
+        selector: () => ButtonClass.componentName,
+        property: ButtonClass.cssVarList.outlineColor,
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSelectItem);
+
 const buttonSelectionGroupBaseMixin = (superclass) =>
   class ButtonSelectionGroupMixinClass extends superclass {
     #renderItem = ({ value, label }) =>
@@ -14486,6 +14601,12 @@ const buttonSelectionGroupMappings = {
   errorMessageIconPosition: { ...errorMessage$3, property: 'background-position' },
   errorMessageFontSize: { ...errorMessage$3, property: 'font-size' },
   itemsSpacing: { ...internalWrapper$1, property: 'gap' },
+  itemsDirection: { ...internalWrapper$1, property: 'flex-direction' },
+  itemsAlignment: { ...internalWrapper$1, property: 'align-items' },
+  itemsWidth: {
+    selector: () => `::slotted(${ButtonSelectionGroupItemClass.componentName})`,
+    property: ButtonSelectionGroupItemClass.cssVarList.hostWidth,
+  },
 };
 
 const buttonSelectionGroupStyles = `
@@ -14550,7 +14671,7 @@ const buttonSelectionGroupStyles = `
 			${resetInputCursor('vaadin-text-field')}
     `;
 
-const componentName$$ = getComponentName('button-selection-group');
+const componentName$_ = getComponentName('button-selection-group');
 
 const buttonSelectionGroupMixin = (superclass) =>
   class ButtonMultiSelectionGroupMixinClass extends superclass {
@@ -14604,129 +14725,15 @@ const ButtonSelectionGroupClass = compose(
     wrappedEleName: 'vaadin-text-field',
     style: () => buttonSelectionGroupStyles,
     excludeAttrsSync: ['tabindex', 'style'],
-    componentName: componentName$$,
+    componentName: componentName$_,
   })
 );
 
 customElements.define(componentName$10, ButtonSelectionGroupInternalClass);
 
-const componentName$_ = getComponentName('button-selection-group-item');
+customElements.define(componentName$$, ButtonSelectionGroupItemClass);
 
-class RawSelectItem extends createBaseClass({
-  componentName: componentName$_,
-  baseSelector: ':host > descope-button',
-}) {
-  get size() {
-    return this.getAttribute('size') || 'md';
-  }
-
-  get variant() {
-    return this.getAttribute('variant') || 'contained';
-  }
-
-  get value() {
-    return this.getAttribute('value') || '';
-  }
-
-  set value(value) {
-    this.setAttribute('value', value);
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <descope-button variant="${this.variant}" size="${this.size}" mode="primary">
-      <slot></slot>
-    </descope-button>
-	`;
-
-    injectStyle(
-      `
-      descope-button {
-        max-width: 100%;
-      }
-			descope-button > slot {
-				width: 100%;
-				overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-			}
-			:host {
-				display: inline-block;
-        max-width: 100%
-			}
-  `,
-      this
-    );
-
-    forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
-    forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
-  }
-
-  handleFocus() {
-    this.shadowRoot.querySelector('descope-button')?.focus();
-  }
-
-  focus() {
-    this.handleFocus();
-  }
-
-  init() {
-    super.init();
-    this.addEventListener('focus', (e) => {
-      // we want to ignore focus events we are dispatching
-      if (e.isTrusted) {
-        this.handleFocus();
-      }
-    });
-  }
-}
-
-const ButtonSelectionGroupItemClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostDirection: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.hostDirection,
-      },
-      backgroundColor: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.backgroundColor,
-      },
-      labelTextColor: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.labelTextColor,
-      },
-      borderColor: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.borderColor,
-      },
-      borderWidth: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.borderWidth,
-      },
-      borderStyle: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.borderStyle,
-      },
-      borderRadius: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.borderRadius,
-      },
-      outlineColor: {
-        selector: () => ButtonClass.componentName,
-        property: ButtonClass.cssVarList.outlineColor,
-      },
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawSelectItem);
-
-customElements.define(componentName$_, ButtonSelectionGroupItemClass);
-
-customElements.define(componentName$$, ButtonSelectionGroupClass);
+customElements.define(componentName$_, ButtonSelectionGroupClass);
 
 const componentName$Z = getComponentName('button-multi-selection-group-internal');
 
@@ -25099,7 +25106,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 +25146,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 +25500,7 @@ const RecoveryCodesClass = compose$1(
   createDynamicDataMixin$1({
     itemRenderer: itemRenderer$4,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
+    targetSelector: '.codes-list',
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,
@@ -34330,6 +34348,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,
@@ -34378,6 +34397,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;