@descope/web-components-ui 1.120.0 → 1.121.0

package/dist/cjs/index.cjs.js

@@ -14428,20 +14428,19 @@ class RawUserAttribute extends createBaseClass({
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
       <div class="root">
-        <div class="text-wrapper">
-          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
+        <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
+        <div class="content-wrapper">
           <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
+          <div class="btn-wrapper">
+            <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
+            <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
+              <vaadin-icon src=${editIcon}></vaadin-icon>
+            </descope-button>
+            <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+              <vaadin-icon src=${deleteIcon}></vaadin-icon>
+            </descope-button>
+          </div>
         </div>
-
-        <div class="btn-wrapper">
-          <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
-          <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${editIcon}></vaadin-icon>
-          </descope-button>
-          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${deleteIcon}></vaadin-icon>
-          </descope-button>
-        </div
       </div>
 		`;
 
@@ -14449,6 +14448,7 @@ class RawUserAttribute extends createBaseClass({
       `
       :host {
 					display: inline-flex;
+          container-type: inline-size;
 				}
 
         vaadin-icon {
@@ -14462,6 +14462,12 @@ class RawUserAttribute extends createBaseClass({
           align-items: center;
         }
 
+        @container (max-width: 529px) {
+          .root {
+            flex-wrap: wrap;
+          }
+        }
+
         .btn-wrapper {
           display: flex;
           justify-content: space-between;
@@ -14469,10 +14475,10 @@ class RawUserAttribute extends createBaseClass({
           flex-grow: 0;
         }
 
-        .text-wrapper {
+        .content-wrapper {
           display: flex;
-          align-items: center;
           flex-grow: 1;
+          align-items: center;
         }
 
         descope-text::part(text-wrapper) {
@@ -14484,10 +14490,13 @@ class RawUserAttribute extends createBaseClass({
 
         descope-text {
           display: inline-flex;
+          max-width: 100%;
+          min-width: 0;
         }
 
         .label {
-          flex-grow: 0;
+          flex-grow: 1;
+          width: 100%;
         }
 
         .value {
@@ -14633,14 +14642,13 @@ class RawUserAttribute extends createBaseClass({
   }
 }
 
-const { host: host$9, textFields, buttons: buttons$1, badge: badge$1, labelText, valueText, textWrapper: textWrapper$1 } = {
+const { host: host$9, textFields, buttons: buttons$1, badge: badge$1, labelText, contentWrapper } = {
   host: { selector: () => ':host' },
   textFields: { selector: 'descope-text' },
-  valueText: { selector: 'descope-text[data-id="value-text"]' },
   labelText: { selector: 'descope-text[data-id="label-text"]' },
   buttons: { selector: 'descope-button' },
   badge: { selector: 'descope-badge' },
-  textWrapper: { selector: ' .text-wrapper' },
+  contentWrapper: { selector: ' .content-wrapper' },
 };
 
 const UserAttributeClass = compose$1(
@@ -14648,16 +14656,17 @@ const UserAttributeClass = compose$1(
     mappings: {
       hostWidth: { ...host$9, property: 'width' },
       hostMinWidth: { ...host$9, property: 'min-width' },
+      hostMaxWidth: { ...host$9, property: 'max-width' },
       hostDirection: [
         { ...host$9, property: 'direction' },
         { ...textFields, property: TextClass.cssVarList.hostDirection },
         { ...buttons$1, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$1, property: BadgeClass.cssVarList.hostDirection },
       ],
-      labelTextWidth: { ...labelText, property: 'width' },
-      valueTextWidth: { ...valueText, property: 'width' },
+      labelMinWidth: { ...labelText, property: 'min-width' },
+      contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge$1, property: 'max-width' },
-      itemsGap: [{ property: 'gap' }, { ...textWrapper$1, property: 'gap' }],
+      itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
     },
   }),
   draggableMixin,
@@ -14668,12 +14677,15 @@ const globalRefs$i = getThemeRefs(globals$1);
 const vars$t = UserAttributeClass.cssVarList;
 
 const userAttribute = {
+  [vars$t.labelMinWidth]: '150px',
   [vars$t.hostDirection]: globalRefs$i.direction,
-  [vars$t.labelTextWidth]: '150px',
-  [vars$t.valueTextWidth]: '200px',
+  [vars$t.contentMinWidth]: `calc(100% - ${useVar(vars$t.labelMinWidth)})`,
   [vars$t.badgeMaxWidth]: '85px',
-  [vars$t.itemsGap]: '16px',
-  [vars$t.hostMinWidth]: '530px',
+  [vars$t.itemsGap]: '4px',
+  [vars$t.hostMinWidth]: '310px',
+  [vars$t.hostWidth]: '530px',
+  [vars$t.hostMaxWidth]: '100%',
+
   _fullWidth: {
     [vars$t.hostWidth]: '100%',
   },
@@ -14745,6 +14757,7 @@ class RawUserAuthMethod extends createBaseClass({
           display: flex;
           align-items: center;
           flex-grow: 1;
+          min-width: 0;
         }
 
         descope-text::part(text-wrapper) {
@@ -14756,6 +14769,7 @@ class RawUserAuthMethod extends createBaseClass({
 
         descope-text {
           display: inline-flex;
+          min-width: 0;
         }
 
         .status-indicator {
@@ -14919,13 +14933,13 @@ const UserAuthMethodClass = compose$1(
     mappings: {
       hostWidth: { ...host$8, property: 'width' },
       hostMinWidth: { ...host$8, property: 'min-width' },
+      hostMaxWidth: { ...host$8, property: 'max-width' },
       hostDirection: [
         { ...host$8, property: 'direction' },
         { ...textField, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge, property: BadgeClass.cssVarList.hostDirection },
       ],
-      labelTextWidth: { ...textField, property: 'width' },
       itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
       iconSize: [
         { ...methodIconSlot, property: 'width' },
@@ -14943,9 +14957,10 @@ const vars$s = UserAuthMethodClass.cssVarList;
 
 const userAuthMethod = {
   [vars$s.hostDirection]: globalRefs$h.direction,
-  [vars$s.labelTextWidth]: '200px',
   [vars$s.itemsGap]: '16px',
-  [vars$s.hostMinWidth]: '530px',
+  [vars$s.hostMinWidth]: '310px',
+  [vars$s.hostWidth]: '530px',
+  [vars$s.hostMaxWidth]: '100%',
   [vars$s.iconSize]: '24px',
   [vars$s.iconColor]: 'currentcolor',
   _fullWidth: {