@descope/web-components-ui 1.120.0 → 1.121.0

package/dist/index.esm.js

@@ -16104,20 +16104,19 @@ class RawUserAttribute extends createBaseClass$1({
 
     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>
 		`;
 
@@ -16125,6 +16124,7 @@ class RawUserAttribute extends createBaseClass$1({
       `
       :host {
 					display: inline-flex;
+          container-type: inline-size;
 				}
 
         vaadin-icon {
@@ -16138,6 +16138,12 @@ class RawUserAttribute extends createBaseClass$1({
           align-items: center;
         }
 
+        @container (max-width: 529px) {
+          .root {
+            flex-wrap: wrap;
+          }
+        }
+
         .btn-wrapper {
           display: flex;
           justify-content: space-between;
@@ -16145,10 +16151,10 @@ class RawUserAttribute extends createBaseClass$1({
           flex-grow: 0;
         }
 
-        .text-wrapper {
+        .content-wrapper {
           display: flex;
-          align-items: center;
           flex-grow: 1;
+          align-items: center;
         }
 
         descope-text::part(text-wrapper) {
@@ -16160,10 +16166,13 @@ class RawUserAttribute extends createBaseClass$1({
 
         descope-text {
           display: inline-flex;
+          max-width: 100%;
+          min-width: 0;
         }
 
         .label {
-          flex-grow: 0;
+          flex-grow: 1;
+          width: 100%;
         }
 
         .value {
@@ -16309,14 +16318,13 @@ class RawUserAttribute extends createBaseClass$1({
   }
 }
 
-const { host: host$a, textFields, buttons: buttons$1, badge: badge$3, labelText, valueText, textWrapper: textWrapper$1 } = {
+const { host: host$a, textFields, buttons: buttons$1, badge: badge$3, 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(
@@ -16324,16 +16332,17 @@ const UserAttributeClass = compose$1(
     mappings: {
       hostWidth: { ...host$a, property: 'width' },
       hostMinWidth: { ...host$a, property: 'min-width' },
+      hostMaxWidth: { ...host$a, property: 'max-width' },
       hostDirection: [
         { ...host$a, property: 'direction' },
         { ...textFields, property: TextClass.cssVarList.hostDirection },
         { ...buttons$1, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$3, property: BadgeClass.cssVarList.hostDirection },
       ],
-      labelTextWidth: { ...labelText, property: 'width' },
-      valueTextWidth: { ...valueText, property: 'width' },
+      labelMinWidth: { ...labelText, property: 'min-width' },
+      contentMinWidth: { ...contentWrapper, property: 'min-width' },
       badgeMaxWidth: { ...badge$3, property: 'max-width' },
-      itemsGap: [{ property: 'gap' }, { ...textWrapper$1, property: 'gap' }],
+      itemsGap: [{ property: 'gap' }, { ...contentWrapper, property: 'gap' }],
     },
   }),
   draggableMixin$1,
@@ -16402,6 +16411,7 @@ class RawUserAuthMethod extends createBaseClass$1({
           display: flex;
           align-items: center;
           flex-grow: 1;
+          min-width: 0;
         }
 
         descope-text::part(text-wrapper) {
@@ -16413,6 +16423,7 @@ class RawUserAuthMethod extends createBaseClass$1({
 
         descope-text {
           display: inline-flex;
+          min-width: 0;
         }
 
         .status-indicator {
@@ -16576,13 +16587,13 @@ const UserAuthMethodClass = 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' },
         { ...textField$2, property: TextClass.cssVarList.hostDirection },
         { ...buttons, property: ButtonClass.cssVarList.hostDirection },
         { ...badge$2, property: BadgeClass.cssVarList.hostDirection },
       ],
-      labelTextWidth: { ...textField$2, property: 'width' },
       itemsGap: [{ property: 'gap' }, { ...textWrapper, property: 'gap' }],
       iconSize: [
         { ...methodIconSlot, property: 'width' },
@@ -21679,12 +21690,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%',
   },
@@ -21701,9 +21715,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: {