@descope/web-components-ui 2.2.14 → 2.2.16

package/dist/index.esm.js

@@ -18182,6 +18182,9 @@ const ListClass = compose$1(
         selector: () => '::slotted(:not([slot]))',
         property: 'min-width',
       },
+      maxRowItems: {
+        property: 'max-row-items',
+      },
       itemsHorizontalAlign: {
         selector: () => '::slotted(*)',
         property: 'justify-self',
@@ -21943,6 +21946,14 @@ const avatar = {
       [compVars$4.hostWidth]: '98px',
       [compVars$4.hostHeight]: '98px',
     },
+    xl: {
+      [compVars$4.hostWidth]: '120px',
+      [compVars$4.hostHeight]: '120px',
+    },
+    '2xl': {
+      [compVars$4.hostWidth]: '140px',
+      [compVars$4.hostHeight]: '140px',
+    },
   },
 };
 
@@ -22461,7 +22472,7 @@ var dateField$1 = /*#__PURE__*/Object.freeze({
 const componentName$d = getComponentName$1('apps-list');
 
 const itemRenderer$3 = ({ name, icon, url }, _, ref) => `
-  <a ${url ? `href="${url}" title="${url}"` : ''} target="_blank">
+  <a ${url ? `href="${url}" title="${url}"` : ''} ${ref.openInSameWindow ? '' : 'target="_blank"'}>
     <descope-list-item>
     <div class="avatar-wrapper">
       <descope-avatar
@@ -22492,6 +22503,10 @@ const customMixin$2 = (superclass) =>
     get logoSize() {
       return this.getAttribute('logo-size');
     }
+
+    get openInSameWindow() {
+      return this.getAttribute('open-in-same-window') === 'true';
+    }
   };
 
 const AppsListClass = compose$1(
@@ -22500,6 +22515,14 @@ const AppsListClass = compose$1(
       maxHeight: { selector: () => ':host' },
       minHeight: { selector: () => ':host' },
       hostDirection: { selector: () => ':host', property: 'direction' },
+      gap: {
+        selector: ListClass.componentName,
+        property: ListClass.cssVarList.gap,
+      },
+      maxRowItems: {
+        selector: ListClass.componentName,
+        property: ListClass.cssVarList.maxRowItems,
+      },
       itemsFontWeight: {
         selector: TextClass.componentName,
         property: TextClass.cssVarList.fontWeightOverride,
@@ -22516,6 +22539,10 @@ const AppsListClass = compose$1(
         selector: ListItemClass.componentName,
         property: ListItemClass.cssVarList.backgroundColor,
       },
+      itemHoverBackgroundColor: {
+        selector: `${ListItemClass.componentName}:hover`,
+        property: ListItemClass.cssVarList.backgroundColor,
+      },
       backgroundColor: {
         selector: ListClass.componentName,
         property: ListClass.cssVarList.backgroundColorOverride,
@@ -22542,14 +22569,25 @@ const AppsListClass = compose$1(
       },
       itemAlignment: [
         { selector: () => '.avatar-wrapper', property: 'text-align' },
-        { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
-      ]
+        {
+          selector: TextClass.componentName,
+          property: TextClass.cssVarList.textAlign,
+        },
+      ],
     },
   }),
-  createDynamicDataMixin$1({ itemRenderer: itemRenderer$3, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
+  createDynamicDataMixin$1({
+    itemRenderer: itemRenderer$3,
+    rerenderAttrsList: [
+      'size',
+      'item-text-variant',
+      'logo-size',
+      'open-in-same-window',
+    ],
+  }),
   draggableMixin$1,
   componentNameValidationMixin$1,
-  customMixin$2
+  customMixin$2,
 )(
   createProxy$1({
     slots: ['empty-state'],
@@ -22587,7 +22625,7 @@ const AppsListClass = compose$1(
         width: 100%;
       }
     `,
-  })
+  }),
 );
 
 const vars$l = AppsListClass.cssVarList;
@@ -22599,6 +22637,7 @@ const appsList = {
   [vars$l.itemsTextAlign]: 'start',
   [vars$l.hostDirection]: globalRefs$b.direction,
   [vars$l.maxHeight]: defaultHeight,
+  [vars$l.itemHoverBackgroundColor]: globalRefs$b.colors.surface.highlight,
 
   _empty: {
     [vars$l.minHeight]: defaultHeight,
@@ -22659,7 +22698,7 @@ const compVars$3 = ListClass.cssVarList;
 
 const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars$1(
   { shadowColor: '#00000020' },
-  componentName$n
+  componentName$n,
 );
 
 const { shadowColor: shadowColor$2 } = helperRefs$2;
@@ -22681,6 +22720,7 @@ const list = {
   [compVars$3.maxHeight]: '100%',
   [compVars$3.hostDirection]: globalRefs$a.direction,
   [compVars$3.minItemsWidth]: '150px',
+  [compVars$3.maxRowItems]: '1000', // effectively no limit
 
   _empty: {
     [compVars$3.minHeight]: '150px',
@@ -22690,13 +22730,33 @@ const list = {
 
   variant: {
     tiles: {
-      [compVars$3.gridTemplateColumns]: `repeat(auto-fit, minmax(min(${useVar$1(
-        compVars$3.minItemsWidth
-      )}, 100%), 1fr))`,
+      [compVars$3.gridTemplateColumns]: `repeat(auto-fit, minmax(
+        max(
+            min(${useVar$1(compVars$3.minItemsWidth)}, 100%),
+                calc((100% - (${useVar$1(compVars$3.maxRowItems)} - 1) * ${useVar$1(compVars$3.gap)}) / ${useVar$1(compVars$3.maxRowItems)})),
+        1fr))`,
       [compVars$3.maxItemsWidth]: '200px',
       [compVars$3.itemsHorizontalAlign]: 'center',
     },
   },
+
+  gap: {
+    xs: {
+      [compVars$3.gap]: globalRefs$a.spacing.xs,
+    },
+    sm: {
+      [compVars$3.gap]: globalRefs$a.spacing.sm,
+    },
+    md: {
+      [compVars$3.gap]: globalRefs$a.spacing.md,
+    },
+    lg: {
+      [compVars$3.gap]: globalRefs$a.spacing.lg,
+    },
+    xl: {
+      [compVars$3.gap]: globalRefs$a.spacing.xl,
+    },
+  },
 };
 
 const vars$k = {
@@ -26107,6 +26167,7 @@ const [helperTheme, helperRefs, helperVars] = createHelperVars$1(
 );
 
 const { shadowColor } = helperRefs;
+const defaultShadow = `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`;
 
 const tooltip = {
   ...helperTheme,
@@ -26122,10 +26183,11 @@ const tooltip = {
   [vars$1.borderRadius]: globalRefs.radius.xs,
   [vars$1.horizontalPadding]: globalRefs.spacing.md,
   [vars$1.verticalPadding]: globalRefs.spacing.sm,
+  [vars$1.boxShadow]: defaultShadow,
 
   shadow: {
     sm: {
-      [vars$1.boxShadow]: `${globalRefs.shadow.wide.sm} ${shadowColor}, ${globalRefs.shadow.narrow.sm} ${shadowColor}`,
+      [vars$1.boxShadow]: defaultShadow,
     },
     md: {
       [vars$1.boxShadow]: `${globalRefs.shadow.wide.md} ${shadowColor}, ${globalRefs.shadow.narrow.md} ${shadowColor}`,