@descope/flow-components 2.1.17 → 2.2.0

package/dist/index.cjs.js

@@ -80964,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() {
@@ -81013,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;
@@ -81032,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' : '')
 	        );
 	      }
 	    );
@@ -81059,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])
 	    );
 	  }, {});
@@ -82969,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)
@@ -83018,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;
@@ -83037,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' : '')
 	        );
 	      }
 	    );
@@ -83064,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])
 	    );
 	  }, {});
@@ -85635,6 +85660,230 @@ function requireIndex_cjs () {
 	  vars: vars$Y
 	});
 
+	const disableRules = [
+	  'blockquote',
+	  'list',
+	  'image',
+	  'table',
+	  'code',
+	  'hr',
+	  'backticks',
+	  'fence',
+	  'reference',
+	  'heading',
+	  'lheading',
+	  'html_block',
+	];
+
+	const decodeHTML = (html) => {
+	  const textArea = document.createElement('textarea');
+	  textArea.innerHTML = html;
+	  return textArea.value;
+	};
+
+	/* eslint-disable no-param-reassign */
+
+
+	const componentName$16 = getComponentName('enriched-text');
+
+	class EnrichedText extends createBaseClass$1({ componentName: componentName$16, baseSelector: ':host > div' }) {
+	  #origLinkRenderer;
+
+	  #origEmRenderer;
+
+	  constructor() {
+	    super();
+
+	    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div class="content"></div>
+    `;
+
+	    injectStyle(
+	      `
+      :host {
+        line-height: 1em;
+        word-break: break-word;
+      }
+      :host > slot {
+        width: 100%;
+        display: inline-block;
+      }
+      *, *:last-child {
+        margin: 0;
+      }
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        margin-bottom: 1em;
+      }
+      a {
+        cursor: pointer;
+      }
+      blockquote {
+        padding: 0 2em;
+      }
+      u {
+        text-decoration: underline
+      }
+      s {
+        color: currentColor;
+      }
+        `,
+	      this
+	    );
+
+	    this.#initProcessor();
+
+	    observeChildren(this, this.#parseChildren.bind(this));
+	  }
+
+	  static get observedAttributes() {
+	    return ['readonly', 'link-target-blank'];
+	  }
+
+	  attributeChangedCallback(attrName, oldValue, newValue) {
+	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+	    if (newValue !== oldValue) {
+	      if (attrName === 'readonly') {
+	        this.onReadOnlyChange(newValue === 'true');
+	      }
+
+	      if (attrName === 'link-target-blank') {
+	        this.#initProcessor();
+	      }
+	    }
+	  }
+
+	  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
+	  customUnderlineRenderer() {
+	    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
+	      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+	      return this.#origEmRenderer(tokens, idx, options, env, self);
+	    };
+	    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
+	      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
+	      return this.#origEmRenderer(tokens, idx, options, env, self);
+	    };
+	  }
+
+	  #customizeLinkRenderer() {
+	    if (this.linkTargetBlank) {
+	      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+	        // Add a new `target` attribute, or replace the value of the existing one.
+	        tokens[idx].attrSet('target', '_blank');
+	        // Pass the token to the default renderer.
+	        return this.#origLinkRenderer(tokens, idx, options, env, self);
+	      };
+	    } else {
+	      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
+	    }
+	  }
+
+	  #disableCustomRules() {
+	    if (!this.processor) {
+	      return;
+	    }
+	    this.processor.disable(disableRules);
+	  }
+
+	  #updateProcessorRules() {
+	    this.#disableCustomRules();
+	  }
+
+	  #storeOrigRenderers() {
+	    const defaultLinkRenderer = (tokens, idx, options, _, self) =>
+	      self.renderToken(tokens, idx, options);
+	    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
+
+	    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
+	      self.renderToken(tokens, idx, options);
+	    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
+	  }
+
+	  #initProcessor() {
+	    this.processor = new MarkdownIt('commonmark', { html: true });
+	    this.#storeOrigRenderers();
+	    this.#updateProcessorRules();
+	    this.#customizeLinkRenderer();
+	    this.customUnderlineRenderer();
+	  }
+
+	  get linkTargetBlank() {
+	    return this.getAttribute('link-target-blank') === 'true';
+	  }
+
+	  get contentNode() {
+	    return this.shadowRoot.querySelector('.content');
+	  }
+
+	  #parseChildren() {
+	    if (!this.processor) {
+	      return;
+	    }
+
+	    let html = decodeHTML(this.innerHTML);
+
+	    if (!html?.trim() && this.isConnected) {
+	      this.setAttribute('empty', 'true');
+	    } else {
+	      this.removeAttribute('empty');
+	    }
+
+	    try {
+	      const tokens = this.processor.parse(html, { references: undefined });
+	      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
+	    } catch (e) {
+	      // eslint-disable-next-line no-console
+	      console.warn('Not parsing invalid markdown token');
+	    }
+
+	    this.contentNode.innerHTML = html;
+	    this.contentNode.firstChild?.setAttribute('part', 'content');
+	  }
+
+	  onReadOnlyChange(isReadOnly) {
+	    if (isReadOnly) {
+	      this.contentNode.setAttribute('inert', isReadOnly);
+	    } else {
+	      this.contentNode.removeAttribute('inert');
+	    }
+	  }
+	}
+
+	const EnrichedTextClass = compose(
+	  createStyleMixin$1({
+	    mappings: {
+	      hostWidth: { selector: () => ':host', property: 'width' },
+	      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
+	      hostDirection: { selector: () => ':host', property: 'direction' },
+	      fontSize: {},
+	      fontFamily: {},
+	      fontWeight: {},
+	      fontWeightBold: [
+	        { selector: () => ':host strong', property: 'font-weight' },
+	        { selector: () => ':host b', property: 'font-weight' },
+	      ],
+	      textColor: { property: 'color' },
+	      textLineHeight: { property: 'line-height' },
+	      textAlign: {},
+	      linkColor: { selector: 'a', property: 'color' },
+	      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
+	      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
+	      minHeight: {},
+	      minWidth: {},
+	    },
+	  }),
+	  createStyleMixin$1({ componentNameOverride: getComponentName('link') }),
+	  createStyleMixin$1({ componentNameOverride: getComponentName('text') }),
+	  draggableMixin$1,
+	  componentNameValidationMixin$1
+	)(EnrichedText);
+
 	const createBaseInputClass = (...args) =>
 	  compose$1(
 	    inputValidationMixin,
@@ -85643,9 +85892,9 @@ function requireIndex_cjs () {
 	    inputEventsDispatchingMixin
 	  )(createBaseClass(...args));
 
-	const componentName$16 = getComponentName$1('boolean-field-internal');
+	const componentName$15 = getComponentName$1('boolean-field-internal');
 
-	createBaseInputClass({ componentName: componentName$16, baseSelector: 'div' });
+	createBaseInputClass({ componentName: componentName$15, baseSelector: 'div' });
 
 	const booleanFieldMixin = (superclass) =>
 	  class BooleanFieldMixinClass extends superclass {
@@ -85654,14 +85903,14 @@ function requireIndex_cjs () {
 
 	      const template = document.createElement('template');
 	      template.innerHTML = `
-				<${componentName$16}
+				<${componentName$15}
 					tabindex="-1"
 					slot="input"
-				></${componentName$16}>
+				></${componentName$15}>
 			`;
 
 	      this.baseElement.appendChild(template.content.cloneNode(true));
-	      this.inputElement = this.shadowRoot.querySelector(componentName$16);
+	      this.inputElement = this.shadowRoot.querySelector(componentName$15);
 	      this.checkbox = this.inputElement.querySelector('vaadin-checkbox');
 
 	      forwardAttrs$1(this, this.inputElement, {
@@ -85681,7 +85930,7 @@ function requireIndex_cjs () {
 	    }
 	  };
 
-	var commonStyles = `
+	var commonStyles = (cssVarList) => `
 :host {
 	display: inline-flex;
 }
@@ -85728,9 +85977,18 @@ descope-boolean-field-internal {
   -webkit-mask-image: none;
   min-height: initial;
 }
+
+descope-enriched-text[empty] {
+	${EnrichedTextClass.cssVarList.hostDisplay}: none;
+}
+
+descope-enriched-text {
+	${EnrichedTextClass.cssVarList.hostDirection}: var(${cssVarList.hostDirection});
+}
+
 `;
 
-	const componentName$15 = getComponentName$1('checkbox');
+	const componentName$14 = getComponentName$1('checkbox');
 
 	const {
 	  host: host$s,
@@ -85743,7 +86001,9 @@ descope-boolean-field-internal {
 	  errorMessage: errorMessage$a,
 	} = {
 	  host: { selector: () => ':host' },
-	  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+	  requiredIndicator: {
+	    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
+	  },
 	  component: { selector: 'vaadin-checkbox' },
 	  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
 	  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
@@ -85789,6 +86049,16 @@ descope-boolean-field-internal {
 	      inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
 	      inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
 
+	      inputContainerPadding: { ...component$1, property: 'padding' },
+	      inputContainerBorderRadius: { ...component$1, property: 'border-radius' },
+	      inputContainerBorderWidth: { ...component$1, property: 'border-width' },
+	      inputContainerBorderColor: { ...component$1, property: 'border-color' },
+	      inputContainerBorderStyle: { ...component$1, property: 'border-style' },
+	      inputContainerOutlineWidth: { ...component$1, property: 'outline-width' },
+	      inputContainerOutlineOffset: { ...component$1, property: 'outline-offset' },
+	      inputContainerOutlineColor: { ...component$1, property: 'outline-color' },
+	      inputContainerOutlineStyle: { ...component$1, property: 'outline-style' },
+
 	      inputSize: [
 	        { ...checkboxElement, property: 'width' },
 	        { ...checkboxElement, property: 'height' },
@@ -85806,7 +86076,7 @@ descope-boolean-field-internal {
 	    slots: [],
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => `
-			${commonStyles}
+			${commonStyles(CheckboxClass.cssVarList)}
       ${useHostExternalPadding(CheckboxClass.cssVarList)}
 
       :host {
@@ -85848,7 +86118,7 @@ descope-boolean-field-internal {
       }
     `,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$15,
+	    componentName: componentName$14,
 	  })
 	);
 
@@ -85893,7 +86163,7 @@ descope-boolean-field-internal {
 	  vars: vars$X
 	});
 
-	const componentName$14 = getComponentName$1('switch-toggle');
+	const componentName$13 = getComponentName$1('switch-toggle');
 
 	const {
 	  host: host$r,
@@ -85906,7 +86176,9 @@ descope-boolean-field-internal {
 	  errorMessage: errorMessage$9,
 	} = {
 	  host: { selector: () => ':host' },
-	  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+	  requiredIndicator: {
+	    selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::part(content)::after',
+	  },
 	  component: { selector: 'vaadin-checkbox' },
 	  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
 	  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
@@ -85979,7 +86251,7 @@ descope-boolean-field-internal {
 	    slots: [],
 	    wrappedEleName: 'vaadin-text-field',
 	    style: () => `
-			${commonStyles}
+			${commonStyles(SwitchToggleClass.cssVarList)}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 
       :host {
@@ -86035,7 +86307,7 @@ descope-boolean-field-internal {
 			}
 		`,
 	    excludeAttrsSync: ['label', 'tabindex', 'style'],
-	    componentName: componentName$14,
+	    componentName: componentName$13,
 	  })
 	);
 
@@ -86116,9 +86388,9 @@ descope-boolean-field-internal {
 	  vars: vars$W
 	});
 
-	const componentName$13 = getComponentName$1('container');
+	const componentName$12 = getComponentName$1('container');
 
-	class RawContainer extends createBaseClass({ componentName: componentName$13, baseSelector: 'slot' }) {
+	class RawContainer extends createBaseClass({ componentName: componentName$12, baseSelector: 'slot' }) {
 	  constructor() {
 	    super();
 
@@ -86203,7 +86475,7 @@ descope-boolean-field-internal {
 	    horizontalAlignment,
 	    shadowColor: '#00000020', // if we want to support transparency vars, we should use different color format
 	  },
-	  componentName$13
+	  componentName$12
 	);
 
 	const { shadowColor: shadowColor$4 } = helperRefs$4;
@@ -86368,10 +86640,10 @@ descope-boolean-field-internal {
 	  return CssVarImageClass;
 	};
 
-	const componentName$12 = getComponentName$1('logo');
+	const componentName$11 = getComponentName$1('logo');
 
 	const LogoClass = createCssVarImageClass({
-	  componentName: componentName$12,
+	  componentName: componentName$11,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -86388,10 +86660,10 @@ descope-boolean-field-internal {
 	  vars: vars$U
 	});
 
-	const componentName$11 = getComponentName$1('totp-image');
+	const componentName$10 = getComponentName$1('totp-image');
 
 	const TotpImageClass = createCssVarImageClass({
-	  componentName: componentName$11,
+	  componentName: componentName$10,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -86408,10 +86680,10 @@ descope-boolean-field-internal {
 	  vars: vars$T
 	});
 
-	const componentName$10 = getComponentName$1('notp-image');
+	const componentName$$ = getComponentName$1('notp-image');
 
 	const NotpImageClass = createCssVarImageClass({
-	  componentName: componentName$10,
+	  componentName: componentName$$,
 	  varName: 'url',
 	  fallbackVarName: 'fallbackUrl',
 	});
@@ -86428,10 +86700,10 @@ descope-boolean-field-internal {
 	  vars: vars$S
 	});
 
-	const componentName$$ = getComponentName('text');
+	const componentName$_ = getComponentName('text');
 
 	class RawText extends createBaseClass$1({
-	  componentName: componentName$$,
+	  componentName: componentName$_,
 	  baseSelector: ':host > slot',
 	}) {
 	  constructor() {
@@ -86503,7 +86775,7 @@ descope-boolean-field-internal {
 	const text$3 = {
 	  [vars$R.hostDirection]: globalRefs$A.direction,
 	  [vars$R.textLineHeight]: '1.35em',
-	  [vars$R.textAlign]: 'left',
+	  [vars$R.textAlign]: 'start',
 	  [vars$R.textColor]: globalRefs$A.colors.surface.dark,
 
 	  variant: {
@@ -86600,229 +86872,6 @@ descope-boolean-field-internal {
 	  vars: vars$R
 	});
 
-	const disableRules = [
-	  'blockquote',
-	  'list',
-	  'image',
-	  'table',
-	  'code',
-	  'hr',
-	  'backticks',
-	  'fence',
-	  'reference',
-	  'heading',
-	  'lheading',
-	  'html_block',
-	];
-
-	const decodeHTML = (html) => {
-	  const textArea = document.createElement('textarea');
-	  textArea.innerHTML = html;
-	  return textArea.value;
-	};
-
-	/* eslint-disable no-param-reassign */
-
-
-	const componentName$_ = getComponentName('enriched-text');
-
-	class EnrichedText extends createBaseClass$1({ componentName: componentName$_, baseSelector: ':host > div' }) {
-	  #origLinkRenderer;
-
-	  #origEmRenderer;
-
-	  constructor() {
-	    super();
-
-	    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <div class="content"></div>
-    `;
-
-	    injectStyle(
-	      `
-      :host {
-        line-height: 1em;
-        word-break: break-word;
-      }
-      :host > slot {
-        width: 100%;
-        display: inline-block;
-      }
-      *, *:last-child {
-        margin: 0;
-      }
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6,
-      p {
-        margin-bottom: 1em;
-      }
-      a {
-        cursor: pointer;
-      }
-      blockquote {
-        padding: 0 2em;
-      }
-      u {
-        text-decoration: underline
-      }
-      s {
-        color: currentColor;
-      }
-        `,
-	      this
-	    );
-
-	    this.#initProcessor();
-
-	    observeChildren(this, this.#parseChildren.bind(this));
-	  }
-
-	  static get observedAttributes() {
-	    return ['readonly', 'link-target-blank'];
-	  }
-
-	  attributeChangedCallback(attrName, oldValue, newValue) {
-	    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-	    if (newValue !== oldValue) {
-	      if (attrName === 'readonly') {
-	        this.onReadOnlyChange(newValue === 'true');
-	      }
-
-	      if (attrName === 'link-target-blank') {
-	        this.#initProcessor();
-	      }
-	    }
-	  }
-
-	  // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
-	  customUnderlineRenderer() {
-	    this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
-	      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
-	      return this.#origEmRenderer(tokens, idx, options, env, self);
-	    };
-	    this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
-	      if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
-	      return this.#origEmRenderer(tokens, idx, options, env, self);
-	    };
-	  }
-
-	  #customizeLinkRenderer() {
-	    if (this.linkTargetBlank) {
-	      this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-	        // Add a new `target` attribute, or replace the value of the existing one.
-	        tokens[idx].attrSet('target', '_blank');
-	        // Pass the token to the default renderer.
-	        return this.#origLinkRenderer(tokens, idx, options, env, self);
-	      };
-	    } else {
-	      this.processor.renderer.rules.link_open = this.#origLinkRenderer;
-	    }
-	  }
-
-	  #disableCustomRules() {
-	    if (!this.processor) {
-	      return;
-	    }
-	    this.processor.disable(disableRules);
-	  }
-
-	  #updateProcessorRules() {
-	    this.#disableCustomRules();
-	  }
-
-	  #storeOrigRenderers() {
-	    const defaultLinkRenderer = (tokens, idx, options, _, self) =>
-	      self.renderToken(tokens, idx, options);
-	    this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
-
-	    const defaultStrongRenderer = (tokens, idx, options, _, self) =>
-	      self.renderToken(tokens, idx, options);
-	    this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
-	  }
-
-	  #initProcessor() {
-	    this.processor = new MarkdownIt('commonmark', { html: true });
-	    this.#storeOrigRenderers();
-	    this.#updateProcessorRules();
-	    this.#customizeLinkRenderer();
-	    this.customUnderlineRenderer();
-	  }
-
-	  get linkTargetBlank() {
-	    return this.getAttribute('link-target-blank') === 'true';
-	  }
-
-	  get contentNode() {
-	    return this.shadowRoot.querySelector('.content');
-	  }
-
-	  #parseChildren() {
-	    if (!this.processor) {
-	      return;
-	    }
-
-	    let html = decodeHTML(this.innerHTML);
-
-	    if (!html?.trim() && this.isConnected) {
-	      this.setAttribute('empty', 'true');
-	    } else {
-	      this.removeAttribute('empty');
-	    }
-
-	    try {
-	      const tokens = this.processor.parse(html, { references: undefined });
-	      html = this.processor.renderer.render(tokens, { html: true, breaks: true });
-	    } catch (e) {
-	      // eslint-disable-next-line no-console
-	      console.warn('Not parsing invalid markdown token');
-	    }
-
-	    this.contentNode.innerHTML = html;
-	  }
-
-	  onReadOnlyChange(isReadOnly) {
-	    if (isReadOnly) {
-	      this.contentNode.setAttribute('inert', isReadOnly);
-	    } else {
-	      this.contentNode.removeAttribute('inert');
-	    }
-	  }
-	}
-
-	const EnrichedTextClass = compose(
-	  createStyleMixin$1({
-	    mappings: {
-	      hostWidth: { selector: () => ':host', property: 'width' },
-	      hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
-	      hostDirection: { selector: () => ':host', property: 'direction' },
-	      fontSize: {},
-	      fontFamily: {},
-	      fontWeight: {},
-	      fontWeightBold: [
-	        { selector: () => ':host strong', property: 'font-weight' },
-	        { selector: () => ':host b', property: 'font-weight' },
-	      ],
-	      textColor: { property: 'color' },
-	      textLineHeight: { property: 'line-height' },
-	      textAlign: {},
-	      linkColor: { selector: 'a', property: 'color' },
-	      linkTextDecoration: { selector: 'a', property: 'text-decoration' },
-	      linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
-	      minHeight: {},
-	      minWidth: {},
-	    },
-	  }),
-	  createStyleMixin$1({ componentNameOverride: getComponentName('link') }),
-	  createStyleMixin$1({ componentNameOverride: getComponentName('text') }),
-	  draggableMixin$1,
-	  componentNameValidationMixin$1
-	)(EnrichedText);
-
 	const componentName$Z = getComponentName('link');
 
 	class RawLink extends createBaseClass$1({ componentName: componentName$Z, baseSelector: ':host a' }) {
@@ -97634,125 +97683,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();
@@ -97805,14 +97738,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() {
@@ -97980,13 +97913,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;
@@ -103486,7 +103600,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 })));