@descope/web-components-ui 2.1.17 → 2.2.0

package/dist/cjs/index.cjs.js

@@ -1446,16 +1446,25 @@ const globals = {
 };
 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() {
@@ -1495,6 +1504,7 @@ const getFallbackVarName$1 = (origVarName, suffix = 'fallback') => kebabCaseJoin
 
 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;
@@ -1514,7 +1524,7 @@ const createStyle$1 = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector$1(baseSelector, relativeSelectorOrSelectorFn),
           isFunction(property) ? property() : property,
-          createCssVar$1(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar$1(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -1541,6 +1551,8 @@ const createCssVarsList$1 = (componentName, mappings) =>
     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])
     );
   }, {});
@@ -3451,7 +3463,17 @@ var button$1 = /*#__PURE__*/Object.freeze({
   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)
@@ -3500,6 +3522,7 @@ const getFallbackVarName = (origVarName, suffix = 'fallback') => kebabCaseJoin$1
 
 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;
@@ -3519,7 +3542,7 @@ const createStyle = (componentName, baseSelector, mappings) => {
         style.add(
           createCssSelector(baseSelector, relativeSelectorOrSelectorFn),
           isFunction$1(property) ? property() : property,
-          createCssVar(cssVarName, fallbackValue) + (important ? '!important' : '')
+          createCssVar(cssVarName, fallbackValue, true) + (important ? '!important' : '')
         );
       }
     );
@@ -3546,6 +3569,8 @@ const createCssVarsList = (componentName, mappings) =>
     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])
     );
   }, {});
@@ -6117,6 +6142,230 @@ var textArea$1 = /*#__PURE__*/Object.freeze({
   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,
@@ -6125,9 +6374,9 @@ const createBaseInputClass = (...args) =>
     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 {
@@ -6136,14 +6385,14 @@ const booleanFieldMixin = (superclass) =>
 
       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, {
@@ -6163,7 +6412,7 @@ const booleanFieldMixin = (superclass) =>
     }
   };
 
-var commonStyles = `
+var commonStyles = (cssVarList) => `
 :host {
 	display: inline-flex;
 }
@@ -6210,9 +6459,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,
@@ -6225,7 +6483,9 @@ const {
   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' },
@@ -6271,6 +6531,16 @@ const CheckboxClass = compose$1(
       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' },
@@ -6288,7 +6558,7 @@ const CheckboxClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
-			${commonStyles}
+			${commonStyles(CheckboxClass.cssVarList)}
       ${useHostExternalPadding(CheckboxClass.cssVarList)}
 
       :host {
@@ -6330,7 +6600,7 @@ const CheckboxClass = compose$1(
       }
     `,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$15,
+    componentName: componentName$14,
   })
 );
 
@@ -6375,7 +6645,7 @@ var checkbox$1 = /*#__PURE__*/Object.freeze({
   vars: vars$X
 });
 
-const componentName$14 = getComponentName$1('switch-toggle');
+const componentName$13 = getComponentName$1('switch-toggle');
 
 const {
   host: host$r,
@@ -6388,7 +6658,9 @@ const {
   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' },
@@ -6461,7 +6733,7 @@ const SwitchToggleClass = compose$1(
     slots: [],
     wrappedEleName: 'vaadin-text-field',
     style: () => `
-			${commonStyles}
+			${commonStyles(SwitchToggleClass.cssVarList)}
 			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
 
       :host {
@@ -6517,7 +6789,7 @@ const SwitchToggleClass = compose$1(
 			}
 		`,
     excludeAttrsSync: ['label', 'tabindex', 'style'],
-    componentName: componentName$14,
+    componentName: componentName$13,
   })
 );
 
@@ -6598,9 +6870,9 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
   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();
 
@@ -6685,7 +6957,7 @@ const [helperTheme$4, helperRefs$4, helperVars$4] = createHelperVars(
     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;
@@ -6850,10 +7122,10 @@ const createCssVarImageClass = ({ componentName, varName, fallbackVarName }) =>
   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',
 });
@@ -6870,10 +7142,10 @@ var logo$3 = /*#__PURE__*/Object.freeze({
   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',
 });
@@ -6890,10 +7162,10 @@ var totpImage = /*#__PURE__*/Object.freeze({
   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',
 });
@@ -6910,10 +7182,10 @@ var notpImage = /*#__PURE__*/Object.freeze({
   vars: vars$S
 });
 
-const componentName$$ = getComponentName('text');
+const componentName$_ = getComponentName('text');
 
 class RawText extends createBaseClass$1({
-  componentName: componentName$$,
+  componentName: componentName$_,
   baseSelector: ':host > slot',
 }) {
   constructor() {
@@ -6985,7 +7257,7 @@ const vars$R = TextClass.cssVarList;
 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: {
@@ -7082,229 +7354,6 @@ var text$4 = /*#__PURE__*/Object.freeze({
   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' }) {
@@ -18116,125 +18165,9 @@ var dateField$1 = /*#__PURE__*/Object.freeze({
   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();
@@ -18287,14 +18220,14 @@ const ListItemClass = compose(
   }),
   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() {
@@ -18462,13 +18395,194 @@ const ListClass = compose(
   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;