@descope/web-components-ui 1.0.359 → 1.0.361

package/dist/index.esm.js

@@ -2634,9 +2634,7 @@ const customMixin$a = (superclass) =>
     init() {
       super.init?.();
 
-      if (!this.getAttribute('pattern')) {
-        this.setAttribute('pattern', defaultPattern);
-      }
+      this.setAttribute('pattern', defaultPattern);
 
       if (!this.getAttribute('autocomplete')) {
         this.setAttribute('autocomplete', defaultAutocomplete);
@@ -3767,7 +3765,7 @@ const decodeHTML = (html) => {
 
 const componentName$D = getComponentName('enriched-text');
 
-let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$D, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -3927,7 +3925,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       this.contentNode.removeAttribute('inert');
     }
   }
-};
+}
 
 const EnrichedTextClass = compose(
   createStyleMixin({
@@ -3952,9 +3950,10 @@ const EnrichedTextClass = compose(
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
   draggableMixin,
   componentNameValidationMixin
-)(EnrichedText$2);
+)(EnrichedText);
 
 customElements.define(componentName$D, EnrichedTextClass);
 
@@ -12990,6 +12989,7 @@ const text = {
   [vars$v.textLineHeight]: '1.35em',
   [vars$v.textAlign]: 'left',
   [vars$v.textColor]: globalRefs$m.colors.surface.dark,
+
   variant: {
     h1: {
       [vars$v.fontSize]: globalRefs$m.typography.h1.size,
@@ -13073,33 +13073,31 @@ var text$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$l = getThemeRefs(globals);
-const vars$u = EnrichedTextClass.cssVarList;
+const vars$u = LinkClass.cssVarList;
 
-const EnrichedText = {
+const link = {
   [vars$u.hostDirection]: globalRefs$l.direction,
+  [vars$u.cursor]: 'pointer',
 
-  [vars$u.fontSize]: globalRefs$l.typography.body1.size,
-  [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
-  [vars$u.fontWeightBold]: '900',
-  [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
+  [vars$u.textColor]: globalRefs$l.colors.primary.main,
 
-  [vars$u.textLineHeight]: '1.35em',
-  [vars$u.textAlign]: 'left',
-  [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+  textAlign: {
+    right: { [vars$u.textAlign]: 'right' },
+    left: { [vars$u.textAlign]: 'left' },
+    center: { [vars$u.textAlign]: 'center' },
+  },
 
-  [vars$u.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
-  [vars$u.linkTextDecoration]: 'none',
-  [vars$u.linkHoverTextDecoration]: 'underline',
+  _fullWidth: {
+    [vars$u.hostWidth]: '100%',
+  },
 
-  [vars$u.minWidth]: '0.25em',
-  [vars$u.minHeight]: '1.35em',
+  _hover: {
+    [vars$u.textDecoration]: 'underline',
+  },
 
   mode: {
-    primary: {
-      [vars$u.textColor]: globalRefs$l.colors.surface.contrast,
-    },
     secondary: {
-      [vars$u.textColor]: globalRefs$l.colors.surface.dark,
+      [vars$u.textColor]: globalRefs$l.colors.secondary.main,
     },
     error: {
       [vars$u.textColor]: globalRefs$l.colors.error.main,
@@ -13108,101 +13106,41 @@ const EnrichedText = {
       [vars$u.textColor]: globalRefs$l.colors.success.main,
     },
   },
-
-  variant: {
-    h1: {
-      [vars$u.fontSize]: globalRefs$l.typography.h1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h1.font,
-    },
-    h2: {
-      [vars$u.fontSize]: globalRefs$l.typography.h2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h2.font,
-    },
-    h3: {
-      [vars$u.fontSize]: globalRefs$l.typography.h3.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.h3.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.h3.font,
-    },
-    subtitle1: {
-      [vars$u.fontSize]: globalRefs$l.typography.subtitle1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.subtitle1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.subtitle1.font,
-    },
-    subtitle2: {
-      [vars$u.fontSize]: globalRefs$l.typography.subtitle2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.subtitle2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.subtitle2.font,
-    },
-    body1: {
-      [vars$u.fontSize]: globalRefs$l.typography.body1.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.body1.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.body1.font,
-    },
-    body2: {
-      [vars$u.fontSize]: globalRefs$l.typography.body2.size,
-      [vars$u.fontWeight]: globalRefs$l.typography.body2.weight,
-      [vars$u.fontFamily]: globalRefs$l.typography.body2.font,
-    },
-  },
-
-  textAlign: {
-    right: { [vars$u.textAlign]: 'right' },
-    left: { [vars$u.textAlign]: 'left' },
-    center: { [vars$u.textAlign]: 'center' },
-  },
-
-  _fullWidth: {
-    [vars$u.hostWidth]: '100%',
-  },
 };
 
-var EnrichedText$1 = /*#__PURE__*/Object.freeze({
+var link$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: EnrichedText,
+  default: link,
   vars: vars$u
 });
 
 const globalRefs$k = getThemeRefs(globals);
-const vars$t = LinkClass.cssVarList;
+const vars$t = EnrichedTextClass.cssVarList;
 
-const link = {
+const enrichedText = {
   [vars$t.hostDirection]: globalRefs$k.direction,
-  [vars$t.cursor]: 'pointer',
-
-  [vars$t.textColor]: globalRefs$k.colors.primary.main,
+  [vars$t.hostWidth]: useVar(vars$v.hostWidth),
 
-  textAlign: {
-    right: { [vars$t.textAlign]: 'right' },
-    left: { [vars$t.textAlign]: 'left' },
-    center: { [vars$t.textAlign]: 'center' },
-  },
+  [vars$t.textLineHeight]: useVar(vars$v.textLineHeight),
+  [vars$t.textColor]: useVar(vars$v.textColor),
+  [vars$t.textAlign]: useVar(vars$v.textAlign),
 
-  _fullWidth: {
-    [vars$t.hostWidth]: '100%',
-  },
+  [vars$t.fontSize]: useVar(vars$v.fontSize),
+  [vars$t.fontWeight]: useVar(vars$v.fontWeight),
+  [vars$t.fontFamily]: useVar(vars$v.fontFamily),
 
-  _hover: {
-    [vars$t.textDecoration]: 'underline',
-  },
+  [vars$t.linkColor]: useVar(vars$u.textColor),
+  [vars$t.linkTextDecoration]: 'none',
+  [vars$t.linkHoverTextDecoration]: 'underline',
 
-  mode: {
-    secondary: {
-      [vars$t.textColor]: globalRefs$k.colors.secondary.main,
-    },
-    error: {
-      [vars$t.textColor]: globalRefs$k.colors.error.main,
-    },
-    success: {
-      [vars$t.textColor]: globalRefs$k.colors.success.main,
-    },
-  },
+  [vars$t.fontWeightBold]: '900',
+  [vars$t.minWidth]: '0.25em',
+  [vars$t.minHeight]: '1.35em',
 };
 
-var link$1 = /*#__PURE__*/Object.freeze({
+var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: link,
+  default: enrichedText,
   vars: vars$t
 });
 
@@ -14412,7 +14350,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$1,
-  EnrichedText: EnrichedText$1,
+  enrichedText: enrichedText$1,
   link: link$1,
   divider: divider$1,
   passcode: passcode$1,