@descope/flow-components 2.1.16 → 2.1.18

package/dist/index.cjs.js

@@ -79869,6 +79869,10 @@ function requireIndex_cjs () {
 	    _ref.adoptedStyleSheets = adoptedStyleSheets;
 	  }
 
+	  if(cssString && !style.cssRules[0]?.style){
+	    console.warn(`No style rules were created, make sure the CSS is valid:\n "${cssString}"`);
+	  }
+
 	  return style;
 	};
 
@@ -80960,16 +80964,25 @@ function requireIndex_cjs () {
 	};
 	getThemeVars$1(globals);
 
-	const createCssVar$1 = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+	const getOverrideCssVarName$1 = (origVarName) => `${origVarName}__override`;
+
+	const createCssVar$1 = (varName, fallback, createOverride = false) => {
+	  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+	  if (!createOverride) return ret;
+
+	  // we are generating an override css var to allow override with fallback to the default var
+	  const overrideVarName = getOverrideCssVarName$1(varName);
+	  return `var(${overrideVarName}, ${ret})`;
+	};
 
 	const createCssSelector$1 = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
 	  isFunction(relativeSelectorOrSelectorFn)
 	    ? relativeSelectorOrSelectorFn(baseSelector)
-	    : `${baseSelector}${
-	        /^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
-	          ? ` ${relativeSelectorOrSelectorFn}`
-	          : relativeSelectorOrSelectorFn
-	      }`;
+	    : `${baseSelector}${/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
+	      ? ` ${relativeSelectorOrSelectorFn}`
+	      : relativeSelectorOrSelectorFn
+	    }`;
 
 	let StyleBuilder$1 = class StyleBuilder {
 	  constructor() {
@@ -81009,6 +81022,7 @@ function requireIndex_cjs () {
 
 	const createStyle$1 = (componentName, baseSelector, mappings) => {
 	  const style = new StyleBuilder$1();
+	  // we generate all the fallback vars recursively
 	  const createFallbackVar = (fallback, origVarName) => {
 	    if (!fallback) return '';
 	    if (typeof fallback === 'string') return fallback;
@@ -81028,7 +81042,7 @@ function requireIndex_cjs () {
 	        style.add(
 	          createCssSelector$1(baseSelector, relativeSelectorOrSelectorFn),
 	          isFunction(property) ? property() : property,
-	          createCssVar$1(cssVarName, fallbackValue) + (important ? '!important' : '')
+	          createCssVar$1(cssVarName, fallbackValue, true) + (important ? '!important' : '')
 	        );
 	      }
 	    );
@@ -81055,6 +81069,8 @@ function requireIndex_cjs () {
 	    return Object.assign(
 	      acc,
 	      { [attr]: varName },
+	      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+	      { [attr + 'Override']: getOverrideCssVarName$1(varName) },
 	      getFallbackVarsNames$1(attr, varName, mappings[attr])
 	    );
 	  }, {});
@@ -81156,7 +81172,7 @@ function requireIndex_cjs () {
 	          if (elementId) {
 	            // basically this is enough to make the selector more specific
 	            // but just in case there is no id, we will also add the class multiple times
-	            classSpecifier += `#${elementId}`;
+	            classSpecifier += `#${CSS.escape(elementId)}`;
 	          }
 
 	          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -81165,7 +81181,7 @@ function requireIndex_cjs () {
 
 
 	      #setAttrOverride(attrName, value) {
-	        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+	        const style = this.#overrideStyleEle.cssRules[0].style;
 
 	        if (!style) return;
 
@@ -82965,7 +82981,17 @@ function requireIndex_cjs () {
 	  vars: vars$12
 	});
 
-	const createCssVar = (varName, fallback) => `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+	const getOverrideCssVarName = (origVarName) => `${origVarName}__override`;
+
+	const createCssVar = (varName, fallback, createOverride = false) => {
+	  const ret = `var(${varName}${fallback ? `, ${fallback}` : ''})`;
+
+	  if (!createOverride) return ret;
+
+	  // we are generating an override css var to allow override with fallback to the default var
+	  const overrideVarName = getOverrideCssVarName(varName);
+	  return `var(${overrideVarName}, ${ret})`;
+	};
 
 	const createCssSelector = (baseSelector = '', relativeSelectorOrSelectorFn = '') =>
 	  isFunction$1(relativeSelectorOrSelectorFn)
@@ -83014,6 +83040,7 @@ function requireIndex_cjs () {
 
 	const createStyle = (componentName, baseSelector, mappings) => {
 	  const style = new StyleBuilder();
+	  // we generate all the fallback vars recursively
 	  const createFallbackVar = (fallback, origVarName) => {
 	    if (!fallback) return '';
 	    if (typeof fallback === 'string') return fallback;
@@ -83033,7 +83060,7 @@ function requireIndex_cjs () {
 	        style.add(
 	          createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
 	          isFunction$1(property) ? property() : property,
-	          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+	          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
 	        );
 	      }
 	    );
@@ -83060,6 +83087,8 @@ function requireIndex_cjs () {
 	    return Object.assign(
 	      acc,
 	      { [attr]: varName },
+	      // we are exposing the override css var names, the convention is to add 'Override' suffix to the attribute name
+	      { [attr + 'Override']: getOverrideCssVarName(varName) },
 	      getFallbackVarsNames(attr, varName, mappings[attr])
 	    );
 	  }, {});
@@ -83151,7 +83180,7 @@ function requireIndex_cjs () {
 	          if (elementId) {
 	            // basically this is enough to make the selector more specific
 	            // but just in case there is no id, we will also add the class multiple times
-	            classSpecifier += `#${elementId}`;
+	            classSpecifier += `#${CSS.escape(elementId)}`;
 	          }
 
 	          this.#overrideStyleEle = injectStyle(`:host(${classSpecifier}) {}`, this.#rootElement);
@@ -83159,7 +83188,7 @@ function requireIndex_cjs () {
 	      }
 
 	      #setAttrOverride(attrName, value) {
-	        const style = this.#overrideStyleEle?.cssRules[0]?.style;
+	        const style = this.#overrideStyleEle.cssRules[0].style;
 
 	        if (!style) return;
 
@@ -97630,125 +97659,9 @@ descope-boolean-field-internal {
 	  vars: vars$l
 	});
 
-	const componentName$n = 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.size}
-    ></descope-avatar>
-    <descope-text
-      variant="body1"
-      mode="primary"
-    >${name}</descope-text>
-    </descope-list-item>
-  </a>
-`;
+	const componentName$n = getComponentName('list-item');
 
 	const customMixin$3 = (superclass) =>
-	  class AppsListMixinClass extends superclass {
-	    get size() {
-	      return this.getAttribute('size') || 'sm';
-	    }
-	  };
-
-	const AppsListClass = compose(
-	  createStyleMixin$1({
-	    mappings: {
-	      maxHeight: { selector: () => ':host' },
-	      minHeight: { selector: () => ':host' },
-	      hostDirection: { selector: () => ':host', property: 'direction' },
-	      itemsFontWeight: {
-	        selector: TextClass.componentName,
-	        property: TextClass.cssVarList.fontWeight,
-	      },
-	      itemsFontSize: {
-	        selector: TextClass.componentName,
-	        property: TextClass.cssVarList.fontSize,
-	      },
-	      itemsTextAlign: {
-	        selector: TextClass.componentName,
-	        property: TextClass.cssVarList.textAlign,
-	      },
-	    },
-	  }),
-	  createDynamicDataMixin$1({ itemRenderer: itemRenderer$4, rerenderAttrsList: ['size'] }),
-	  draggableMixin$1,
-	  componentNameValidationMixin$1,
-	  customMixin$3
-	)(
-	  createProxy$1({
-	    slots: ['empty-state'],
-	    wrappedEleName: 'descope-list',
-	    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
-	    componentName: componentName$n,
-	    style: () => `
-      :host {
-        width: 100%;
-        display: inline-flex;
-      }
-
-      descope-text::part(text-wrapper) {
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-
-      a {
-        text-decoration: none;
-      }
-
-      descope-text {
-        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
-      }
-    `,
-	  })
-	);
-
-	const vars$k = AppsListClass.cssVarList;
-	const globalRefs$a = getThemeRefs$1(globals);
-
-	const defaultHeight = '400px';
-
-	const appsList = {
-	  [vars$k.itemsFontWeight]: 'normal',
-	  [vars$k.itemsTextAlign]: 'start',
-	  [vars$k.hostDirection]: globalRefs$a.direction,
-	  [vars$k.maxHeight]: defaultHeight,
-
-	  _empty: {
-	    [vars$k.minHeight]: defaultHeight,
-	  },
-
-	  size: {
-	    xs: {
-	      [vars$k.itemsFontSize]: '14px',
-	    },
-	    sm: {
-	      [vars$k.itemsFontSize]: '14px',
-	    },
-	    md: {
-	      [vars$k.itemsFontSize]: '16px',
-	    },
-	    lg: {
-	      [vars$k.itemsFontSize]: '20px',
-	    },
-	  },
-	};
-
-	var appsList$1 = /*#__PURE__*/Object.freeze({
-	  __proto__: null,
-	  default: appsList,
-	  vars: vars$k
-	});
-
-	const componentName$m = getComponentName('list-item');
-
-	const customMixin$2 = (superclass) =>
 	  class ListItemMixinClass extends superclass {
 	    constructor() {
 	      super();
@@ -97801,14 +97714,14 @@ descope-boolean-field-internal {
 	  }),
 	  draggableMixin$1,
 	  componentNameValidationMixin$1,
-	  customMixin$2,
+	  customMixin$3,
 	  activeableMixin,
-	)(createBaseClass$1({ componentName: componentName$m, baseSelector: 'slot' }));
+	)(createBaseClass$1({ componentName: componentName$n, baseSelector: 'slot' }));
 
-	const componentName$l = getComponentName('list');
+	const componentName$m = getComponentName('list');
 
 	class RawList extends createBaseClass$1({
-	  componentName: componentName$l,
+	  componentName: componentName$m,
 	  baseSelector: '.wrapper',
 	}) {
 	  static get observedAttributes() {
@@ -97976,13 +97889,194 @@ descope-boolean-field-internal {
 	  componentNameValidationMixin$1,
 	)(RawList);
 
+	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>
+    <descope-text
+      variant="${ref.itemTextVariant}"
+      mode="primary"
+    >${name}</descope-text>
+    </descope-list-item>
+  </a>
+`;
+
+	const customMixin$2 = (superclass) =>
+	  class AppsListMixinClass extends superclass {
+	    // size controls both item logo size and font size
+	    get size() {
+	      return this.getAttribute('size') || 'sm';
+	    }
+
+	    get itemTextVariant() {
+	      return this.getAttribute('item-text-variant') || 'body1';
+	    }
+
+	    get logoSize() {
+	      return this.getAttribute('logo-size');
+	    }
+	  };
+
+	const AppsListClass = compose(
+	  createStyleMixin$1({
+	    mappings: {
+	      maxHeight: { selector: () => ':host' },
+	      minHeight: { selector: () => ':host' },
+	      hostDirection: { selector: () => ':host', property: 'direction' },
+	      itemsFontWeight: {
+	        selector: TextClass.componentName,
+	        property: TextClass.cssVarList.fontWeightOverride,
+	      },
+	      itemsFontSize: {
+	        selector: TextClass.componentName,
+	        property: TextClass.cssVarList.fontSizeOverride,
+	      },
+	      itemsTextAlign: {
+	        selector: TextClass.componentName,
+	        property: TextClass.cssVarList.textAlign,
+	      },
+	      itemBackgroundColor: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.backgroundColor,
+	      },
+	      backgroundColor: {
+	        selector: ListClass.componentName,
+	        property: ListClass.cssVarList.backgroundColorOverride,
+	      },
+	      itemBorderStyle: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.borderStyleOverride,
+	      },
+	      itemBorderColor: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.borderColorOverride,
+	      },
+	      itemBorderWidth: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.borderWidthOverride,
+	      },
+	      itemVerticalPadding: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.verticalPaddingOverride,
+	      },
+	      itemHorizontalPadding: {
+	        selector: ListItemClass.componentName,
+	        property: ListItemClass.cssVarList.horizontalPaddingOverride,
+	      },
+	      itemAlignment: [
+	        { selector: ListItemClass.componentName, property: ListItemClass.cssVarList.alignItemsOverride },
+	        { selector: TextClass.componentName, property: TextClass.cssVarList.textAlign },
+	      ]
+	    },
+	  }),
+	  createDynamicDataMixin$1({ itemRenderer: itemRenderer$4, rerenderAttrsList: ['size', 'item-text-variant', 'logo-size'] }),
+	  draggableMixin$1,
+	  componentNameValidationMixin$1,
+	  customMixin$2
+	)(
+	  createProxy$1({
+	    slots: ['empty-state'],
+	    wrappedEleName: 'descope-list',
+	    excludeAttrsSync: ['tabindex', 'class', 'empty', 'style'],
+	    componentName: componentName$l,
+	    style: () => `
+      :host {
+        width: 100%;
+        display: inline-flex;
+      }
+
+      descope-text::part(text-wrapper) {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      descope-text {
+        ${TextClass.cssVarList.hostDirection}: var(${AppsListClass.cssVarList.hostDirection});
+        max-width: 100%;
+      }
+    `,
+	  })
+	);
+
+	const vars$k = AppsListClass.cssVarList;
+	const globalRefs$a = getThemeRefs$1(globals);
+
+	const defaultHeight = '400px';
+
+	const appsList = {
+	  [vars$k.itemsFontWeight]: 'normal',
+	  [vars$k.itemsTextAlign]: 'start',
+	  [vars$k.hostDirection]: globalRefs$a.direction,
+	  [vars$k.maxHeight]: defaultHeight,
+
+	  _empty: {
+	    [vars$k.minHeight]: defaultHeight,
+	  },
+
+	  size: {
+	    xs: {
+	      [vars$k.itemsFontSize]: '14px',
+	    },
+	    sm: {
+	      [vars$k.itemsFontSize]: '14px',
+	    },
+	    md: {
+	      [vars$k.itemsFontSize]: '16px',
+	    },
+	    lg: {
+	      [vars$k.itemsFontSize]: '20px',
+	    },
+	  },
+
+	  itemPadding: {
+	    xs: {
+	      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.xs,
+	      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.xs,
+	    },
+	    sm: {
+	      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.sm,
+	      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.sm,
+	    },
+	    md: {
+	      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.md,
+	      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.md,
+	    },
+	    lg: {
+	      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.lg,
+	      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.lg,
+	    },
+	    xl: {
+	      [vars$k.itemVerticalPadding]: globalRefs$a.spacing.xl,
+	      [vars$k.itemHorizontalPadding]: globalRefs$a.spacing.xl,
+	    },
+	  },
+	};
+
+	var appsList$1 = /*#__PURE__*/Object.freeze({
+	  __proto__: null,
+	  default: appsList,
+	  vars: vars$k
+	});
+
 	const globalRefs$9 = getThemeRefs$1(globals);
 
 	const compVars$3 = ListClass.cssVarList;
 
 	const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars$1(
 	  { shadowColor: '#00000020' },
-	  componentName$l
+	  componentName$m
 	);
 
 	const { shadowColor: shadowColor$1 } = helperRefs$1;
@@ -103482,7 +103576,7 @@ const List = React__default.default.forwardRef(({ emptyState, children, ...props
 
 const ListItem = React__default.default.forwardRef((props, ref) => (React__default.default.createElement("descope-list-item", { ...props, ref: ref })));
 
-const AppsList = React__default.default.forwardRef(({ emptyState, data, ...props }, ref) => (React__default.default.createElement("descope-apps-list", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref },
+const AppsList = React__default.default.forwardRef(({ emptyState, data, variant, ...props }, ref) => (React__default.default.createElement("descope-apps-list", { data: data ? JSON.stringify(data) : undefined, variant: variant !== 'list' ? 'tiles' : 'list', ...props, ref: ref },
     React__default.default.createElement("div", { slot: "empty-state" }, emptyState))));
 
 const ScopesList = React__default.default.forwardRef(({ data, ...props }, ref) => (React__default.default.createElement("descope-scopes-list", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref })));

package/dist/index.d.ts

@@ -835,7 +835,7 @@ declare const ListItem: React.ForwardRefExoticComponent<Props$f & React.RefAttri
 
 type Props$e = {
     emptyState?: React.ReactNode;
-    variant?: 'list' | 'tiles';
+    variant?: 'list' | 'tiles' | 'custom';
     data?: any[];
     readonly?: boolean;
 };

package/dist/index.esm.js

@@ -490,7 +490,7 @@ const List = React.forwardRef(({ emptyState, children, ...props }, ref) => (Reac
 
 const ListItem = React.forwardRef((props, ref) => (React.createElement("descope-list-item", { ...props, ref: ref })));
 
-const AppsList = React.forwardRef(({ emptyState, data, ...props }, ref) => (React.createElement("descope-apps-list", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref },
+const AppsList = React.forwardRef(({ emptyState, data, variant, ...props }, ref) => (React.createElement("descope-apps-list", { data: data ? JSON.stringify(data) : undefined, variant: variant !== 'list' ? 'tiles' : 'list', ...props, ref: ref },
     React.createElement("div", { slot: "empty-state" }, emptyState))));
 
 const ScopesList = React.forwardRef(({ data, ...props }, ref) => (React.createElement("descope-scopes-list", { data: data ? JSON.stringify(data) : undefined, ...props, ref: ref })));

package/dist/types/AppsList/AppsList.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { PropsToAttrs } from '../types';
 type Props = {
     emptyState?: React.ReactNode;
-    variant?: 'list' | 'tiles';
+    variant?: 'list' | 'tiles' | 'custom';
     data?: any[];
     readonly?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/flow-components",
-  "version": "2.1.16",
+  "version": "2.1.18",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -93,10 +93,10 @@
     "typescript": "^5.7.2",
     "webpack": "^5.74.0",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "5.0.4"
+    "webpack-dev-server": "5.2.1"
   },
   "dependencies": {
-    "@descope/web-components-ui": "2.1.16"
+    "@descope/web-components-ui": "2.1.18"
   },
   "peerDependencies": {
     "react": ">= 18"
@@ -135,7 +135,8 @@
     "build:rollup": "rollup -c",
     "build:webpack": "webpack --mode production",
     "build": "npm run build:rollup && npm run build:webpack",
-    "dev": "FEDERATION_IP=127.0.0.1 NODE_ENV=development webpack serve --mode development --port 4444",
+    "dev": "nx dev flow-components",
+    "dev-server": "FEDERATION_IP=127.0.0.1 NODE_ENV=development webpack serve --mode development --port 4444",
     "test": "exit 0",
     "lint": "eslint src/**/*.* --fix",
     "format": "prettier . -w --ignore-path .gitignore",