@descope/web-components-ui 1.0.359 → 1.0.361

package/dist/cjs/index.cjs.js

@@ -3923,9 +3923,7 @@ const customMixin$8 = (superclass) =>
     init() {
       super.init?.();
 
-      if (!this.getAttribute('pattern')) {
-        this.setAttribute('pattern', defaultPattern);
-      }
+      this.setAttribute('pattern', defaultPattern);
 
       if (!this.getAttribute('autocomplete')) {
         this.setAttribute('autocomplete', defaultAutocomplete);
@@ -4943,6 +4941,7 @@ const text$2 = {
   [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,
@@ -5050,7 +5049,7 @@ const decodeHTML = (html) => {
 
 const componentName$C = getComponentName('enriched-text');
 
-let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
+class EnrichedText extends createBaseClass({ componentName: componentName$C, baseSelector: ':host > div' }) {
   #origLinkRenderer;
 
   #origEmRenderer;
@@ -5210,7 +5209,7 @@ let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName:
       this.contentNode.removeAttribute('inert');
     }
   }
-};
+}
 
 const EnrichedTextClass = compose(
   createStyleMixin({
@@ -5235,9 +5234,10 @@ const EnrichedTextClass = compose(
     },
   }),
   createStyleMixin({ componentNameOverride: getComponentName('link') }),
+  createStyleMixin({ componentNameOverride: getComponentName('text') }),
   draggableMixin,
   componentNameValidationMixin
-)(EnrichedText$2);
+)(EnrichedText);
 
 const componentName$B = getComponentName('link');
 
@@ -5306,33 +5306,31 @@ const LinkClass = compose(
 )(RawLink);
 
 const globalRefs$l = getThemeRefs(globals);
-const vars$u = EnrichedTextClass.cssVarList;
+const vars$u = LinkClass.cssVarList;
 
-const EnrichedText = {
+const link$1 = {
   [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,
@@ -5341,101 +5339,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$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: EnrichedText,
+  default: link$1,
   vars: vars$u
 });
 
 const globalRefs$k = getThemeRefs(globals);
-const vars$t = LinkClass.cssVarList;
+const vars$t = EnrichedTextClass.cssVarList;
 
-const link$1 = {
+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$2 = /*#__PURE__*/Object.freeze({
+var enrichedText$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  default: link$1,
+  default: enrichedText,
   vars: vars$t
 });
 
@@ -13117,7 +13055,7 @@ const components = {
   totpImage,
   notpImage,
   text: text$3,
-  EnrichedText: EnrichedText$1,
+  enrichedText: enrichedText$1,
   link: link$2,
   divider: divider$1,
   passcode: passcode$1,
@@ -13555,4 +13493,5 @@ exports.globalsThemeToStyle = globalsThemeToStyle;
 exports.themeToCSSVarsObj = themeToCSSVarsObj;
 exports.themeToStyle = themeToStyle;
 exports.themeVars = themeVars;
+exports.useVar = useVar;
 //# sourceMappingURL=index.cjs.js.map