@descope/web-components-ui 2.2.0 → 2.2.2

package/dist/cjs/index.cjs.js

@@ -6530,8 +6530,10 @@ const CheckboxClass = compose$1(
       inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
       inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
       inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+      inputAlign: { ...checkboxElement, property: 'align-self' },
 
       inputContainerPadding: { ...component$1, property: 'padding' },
+      inputContainerBackgroundColor: { ...component$1, property: 'background-color' },
       inputContainerBorderRadius: { ...component$1, property: 'border-radius' },
       inputContainerBorderWidth: { ...component$1, property: 'border-width' },
       inputContainerBorderColor: { ...component$1, property: 'border-color' },
@@ -6581,6 +6583,10 @@ const CheckboxClass = compose$1(
         height: 100%;
       }
 
+      :host([full-width]) vaadin-checkbox {
+        flex-grow: 1;
+      }
+
       vaadin-checkbox::part(checkbox) {
         margin: 0;
       }
@@ -18400,11 +18406,13 @@ const componentName$l = getComponentName('apps-list');
 const itemRenderer$4 = ({ name, icon, url }, _, ref) => `
   <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
     <descope-list-item>
-    <descope-avatar
-      ${icon ? `img="${icon}"` : ''}
-      ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
-      size="${ref.logoSize || ref.size}"
-    ></descope-avatar>
+    <div class="avatar-wrapper">
+      <descope-avatar
+        ${icon ? `img="${icon}"` : ''}
+        ${name ? `display-name="${name}" abbr=${limitAbbreviation(name)}` : ''}
+        size="${ref.logoSize || ref.size}"
+      ></descope-avatar>
+    </div>
     <descope-text
       variant="${ref.itemTextVariant}"
       mode="primary"
@@ -18476,7 +18484,7 @@ const AppsListClass = compose(
         property: ListItemClass.cssVarList.horizontalPaddingOverride,
       },
       itemAlignment: [
-        { selector: ListItemClass.componentName, property: ListItemClass.cssVarList.alignItemsOverride },
+        { selector: () => '.avatar-wrapper', property: 'text-align' },
         { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
       ]
     },
@@ -18504,6 +18512,14 @@ const AppsListClass = compose(
         overflow: hidden;
       }
 
+      descope-list-item[variant="tile"] .avatar-wrapper {
+        width: 100%;
+      }
+
+      .avatar-wrapper {
+        line-height: 0;
+      }
+
       a {
         text-decoration: none;
       }
@@ -18511,6 +18527,7 @@ const AppsListClass = compose(
       descope-text {
         ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
         max-width: 100%;
+        width: 100%;
       }
     `,
   })