@descope/web-components-ui 1.0.161 → 1.0.163

package/dist/index.esm.js

@@ -919,7 +919,7 @@ const proxyInputMixin = (superclass) =>
     }
 
     get inputElement() {
-      if (this.#inputElement) return this.#inputElement
+      if (this.#inputElement) return this.#inputElement;
 
       this.warnIfInputElementIsMissing();
 
@@ -956,7 +956,7 @@ const proxyInputMixin = (superclass) =>
       // on some cases the base element is not ready so the inputElement is empty
       // we are deferring this section to make sure the base element is ready
       setTimeout(() => {
-        this.inputElement.addEventListener('input', (e) => {
+        this.inputElement?.addEventListener('input', (e) => {
           if (!this.inputElement.checkValidity()) {
             this.inputElement.setCustomValidity('');
             // after updating the input validity we want to trigger set validity on the wrapping element
@@ -1000,7 +1000,6 @@ const proxyInputMixin = (superclass) =>
         forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
       });
     }
-
   };
 
 const composedProxyInputMixin = compose(
@@ -2538,7 +2537,14 @@ class PasscodeInternal extends BaseInputClass$3 {
       input.onkeydown = ({ key }) => {
         // when user deletes a digit, we want to focus the previous digit
         if (key === 'Backspace') {
-          input.setSelectionRange(1, 1);
+          // if value is empty then the input element does not fire `input` event
+          // if this is the case, we focus the element here.
+          // otherwise, the focusElement occurs as part of the `input` event listener
+          if (!input.value) {
+            setTimeout(() => focusElement(this.getPrevInput(input)), 0);
+          } else {
+            input.setSelectionRange(1, 1);
+          }
         } else if (key.length === 1) {
           // we want only characters and not command keys
           input.value = ''; // we are clearing the previous value so we can override it with the new value
@@ -5934,7 +5940,7 @@ const globals = {
 const vars$o = getThemeVars(globals);
 
 const globalRefs$b = getThemeRefs(globals);
-const compVars$2 = ButtonClass.cssVarList;
+const compVars$3 = ButtonClass.cssVarList;
 
 const mode = {
   primary: globalRefs$b.colors.primary,
@@ -5944,7 +5950,7 @@ const mode = {
   surface: globalRefs$b.colors.surface,
 };
 
-const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$r);
+const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$r);
 
 const verticalPaddingRatio = 3;
 const horizontalPaddingRatio = 2;
@@ -5952,88 +5958,88 @@ const horizontalPaddingRatio = 2;
 const button = {
   ...helperTheme$3,
 
-  [compVars$2.fontFamily]: globalRefs$b.fonts.font1.family,
+  [compVars$3.fontFamily]: globalRefs$b.fonts.font1.family,
 
-  [compVars$2.cursor]: 'pointer',
-  [compVars$2.hostHeight]: '3em',
+  [compVars$3.cursor]: 'pointer',
+  [compVars$3.hostHeight]: '3em',
 
-  [compVars$2.borderRadius]: globalRefs$b.radius.sm,
-  [compVars$2.borderWidth]: globalRefs$b.border.xs,
-  [compVars$2.borderStyle]: 'solid',
-  [compVars$2.borderColor]: 'transparent',
+  [compVars$3.borderRadius]: globalRefs$b.radius.sm,
+  [compVars$3.borderWidth]: globalRefs$b.border.xs,
+  [compVars$3.borderStyle]: 'solid',
+  [compVars$3.borderColor]: 'transparent',
 
-  [compVars$2.labelSpacing]: '0.25em',
+  [compVars$3.labelSpacing]: '0.25em',
 
-  [compVars$2.verticalPadding]: `calc(var(${compVars$2.fontSize}) / ${verticalPaddingRatio})`,
-  [compVars$2.horizontalPadding]: `calc(var(${compVars$2.fontSize}) / ${horizontalPaddingRatio})`,
+  [compVars$3.verticalPadding]: `calc(var(${compVars$3.fontSize}) / ${verticalPaddingRatio})`,
+  [compVars$3.horizontalPadding]: `calc(var(${compVars$3.fontSize}) / ${horizontalPaddingRatio})`,
 
-  [compVars$2.outlineWidth]: globals.border.sm,
-  [compVars$2.outlineOffset]: '0px', // keep `px` unit for external calc
-  [compVars$2.outlineStyle]: 'solid',
-  [compVars$2.outlineColor]: 'transparent',
+  [compVars$3.outlineWidth]: globals.border.sm,
+  [compVars$3.outlineOffset]: '0px', // keep `px` unit for external calc
+  [compVars$3.outlineStyle]: 'solid',
+  [compVars$3.outlineColor]: 'transparent',
 
   size: {
-    xs: { [compVars$2.fontSize]: '12px' },
-    sm: { [compVars$2.fontSize]: '14px' },
-    md: { [compVars$2.fontSize]: '16px' },
-    lg: { [compVars$2.fontSize]: '18px' },
+    xs: { [compVars$3.fontSize]: '12px' },
+    sm: { [compVars$3.fontSize]: '14px' },
+    md: { [compVars$3.fontSize]: '16px' },
+    lg: { [compVars$3.fontSize]: '18px' },
   },
 
   _fullWidth: {
-    [compVars$2.hostWidth]: '100%',
+    [compVars$3.hostWidth]: '100%',
   },
 
   _loading: {
-    [compVars$2.cursor]: 'wait',
-    [compVars$2.labelTextColor]: helperRefs$3.main,
+    [compVars$3.cursor]: 'wait',
+    [compVars$3.labelTextColor]: helperRefs$3.main,
   },
 
   variant: {
     contained: {
-      [compVars$2.labelTextColor]: helperRefs$3.contrast,
-      [compVars$2.backgroundColor]: helperRefs$3.main,
+      [compVars$3.labelTextColor]: helperRefs$3.contrast,
+      [compVars$3.backgroundColor]: helperRefs$3.main,
       _hover: {
-        [compVars$2.backgroundColor]: helperRefs$3.dark,
+        [compVars$3.backgroundColor]: helperRefs$3.dark,
         _loading: {
-          [compVars$2.backgroundColor]: helperRefs$3.main,
+          [compVars$3.backgroundColor]: helperRefs$3.main,
         },
       },
       _active: {
-        [compVars$2.backgroundColor]: helperRefs$3.main,
+        [compVars$3.backgroundColor]: helperRefs$3.main,
       },
     },
 
     outline: {
-      [compVars$2.labelTextColor]: helperRefs$3.main,
-      [compVars$2.borderColor]: 'currentColor',
+      [compVars$3.labelTextColor]: helperRefs$3.main,
+      [compVars$3.borderColor]: 'currentColor',
       _hover: {
-        [compVars$2.labelTextColor]: helperRefs$3.dark,
+        [compVars$3.labelTextColor]: helperRefs$3.dark,
       },
       _active: {
-        [compVars$2.labelTextColor]: helperRefs$3.main,
+        [compVars$3.labelTextColor]: helperRefs$3.main,
       },
     },
 
     link: {
-      [compVars$2.labelTextColor]: helperRefs$3.main,
+      [compVars$3.labelTextColor]: helperRefs$3.main,
       _hover: {
-        [compVars$2.labelTextColor]: helperRefs$3.dark,
-        [compVars$2.labelTextDecoration]: 'underline',
+        [compVars$3.labelTextColor]: helperRefs$3.dark,
+        [compVars$3.labelTextDecoration]: 'underline',
       },
       _active: {
-        [compVars$2.labelTextColor]: helperRefs$3.dark,
+        [compVars$3.labelTextColor]: helperRefs$3.dark,
       },
     },
   },
 
   _focused: {
-    [compVars$2.outlineColor]: globalRefs$b.colors.surface.main,
+    [compVars$3.outlineColor]: globalRefs$b.colors.surface.main,
   },
 };
 
 const vars$n = {
-  ...compVars$2,
-  ...helperVars$2,
+  ...compVars$3,
+  ...helperVars$3,
 };
 
 var button$1 = /*#__PURE__*/Object.freeze({
@@ -6394,7 +6400,7 @@ var switchToggle$1 = /*#__PURE__*/Object.freeze({
 
 const globalRefs$6 = getThemeRefs(globals);
 
-const compVars$1 = ContainerClass.cssVarList;
+const compVars$2 = ContainerClass.cssVarList;
 
 const verticalAlignment = {
   start: { verticalAlignment: 'start' },
@@ -6408,7 +6414,7 @@ const horizontalAlignment = {
   end: { horizontalAlignment: 'end' },
 };
 
-const [helperTheme$2, helperRefs$2, helperVars$1] = createHelperVars(
+const [helperTheme$2, helperRefs$2, helperVars$2] = createHelperVars(
   {
     verticalAlignment,
     horizontalAlignment,
@@ -6422,85 +6428,85 @@ const { shadowColor } = helperRefs$2;
 const container = {
   ...helperTheme$2,
 
-  [compVars$1.hostWidth]: '100%',
-  [compVars$1.boxShadow]: 'none',
-  [compVars$1.backgroundColor]: globalRefs$6.colors.surface.light,
-  [compVars$1.color]: globalRefs$6.colors.surface.contrast,
+  [compVars$2.hostWidth]: '100%',
+  [compVars$2.boxShadow]: 'none',
+  [compVars$2.backgroundColor]: globalRefs$6.colors.surface.light,
+  [compVars$2.color]: globalRefs$6.colors.surface.contrast,
 
   verticalPadding: {
-    sm: { [compVars$1.verticalPadding]: '5px' },
-    md: { [compVars$1.verticalPadding]: '10px' },
-    lg: { [compVars$1.verticalPadding]: '20px' },
+    sm: { [compVars$2.verticalPadding]: '5px' },
+    md: { [compVars$2.verticalPadding]: '10px' },
+    lg: { [compVars$2.verticalPadding]: '20px' },
   },
 
   horizontalPadding: {
-    sm: { [compVars$1.horizontalPadding]: '5px' },
-    md: { [compVars$1.horizontalPadding]: '10px' },
-    lg: { [compVars$1.horizontalPadding]: '20px' },
+    sm: { [compVars$2.horizontalPadding]: '5px' },
+    md: { [compVars$2.horizontalPadding]: '10px' },
+    lg: { [compVars$2.horizontalPadding]: '20px' },
   },
 
   direction: {
     row: {
-      [compVars$1.flexDirection]: 'row',
-      [compVars$1.alignItems]: helperRefs$2.verticalAlignment,
-      [compVars$1.justifyContent]: helperRefs$2.horizontalAlignment,
-      [compVars$1.flexWrap]: 'wrap',
+      [compVars$2.flexDirection]: 'row',
+      [compVars$2.alignItems]: helperRefs$2.verticalAlignment,
+      [compVars$2.justifyContent]: helperRefs$2.horizontalAlignment,
+      [compVars$2.flexWrap]: 'wrap',
       horizontalAlignment: {
         spaceBetween: {
-          [helperVars$1.horizontalAlignment]: 'space-between',
+          [helperVars$2.horizontalAlignment]: 'space-between',
         },
       },
     },
     column: {
-      [compVars$1.flexDirection]: 'column',
-      [compVars$1.alignItems]: helperRefs$2.horizontalAlignment,
-      [compVars$1.justifyContent]: helperRefs$2.verticalAlignment,
+      [compVars$2.flexDirection]: 'column',
+      [compVars$2.alignItems]: helperRefs$2.horizontalAlignment,
+      [compVars$2.justifyContent]: helperRefs$2.verticalAlignment,
       verticalAlignment: {
         spaceBetween: {
-          [helperVars$1.verticalAlignment]: 'space-between',
+          [helperVars$2.verticalAlignment]: 'space-between',
         },
       },
     },
   },
 
   spaceBetween: {
-    sm: { [compVars$1.gap]: '10px' },
-    md: { [compVars$1.gap]: '20px' },
-    lg: { [compVars$1.gap]: '30px' },
+    sm: { [compVars$2.gap]: '10px' },
+    md: { [compVars$2.gap]: '20px' },
+    lg: { [compVars$2.gap]: '30px' },
   },
 
   shadow: {
     sm: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.sm} ${shadowColor}, ${globalRefs$6.shadow.narrow.sm} ${shadowColor}`,
     },
     md: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.md} ${shadowColor}, ${globalRefs$6.shadow.narrow.md} ${shadowColor}`,
     },
     lg: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.lg} ${shadowColor}, ${globalRefs$6.shadow.narrow.lg} ${shadowColor}`,
     },
     xl: {
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide.xl} ${shadowColor}, ${globalRefs$6.shadow.narrow.xl} ${shadowColor}`,
     },
     '2xl': {
-      [helperVars$1.shadowColor]: '#00000050', // mimic daisyUI shadow settings
-      [compVars$1.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
+      [helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
+      [compVars$2.boxShadow]: `${globalRefs$6.shadow.wide['2xl']} ${shadowColor}`,
     },
   },
 
   borderRadius: {
-    sm: { [compVars$1.borderRadius]: globalRefs$6.radius.sm },
-    md: { [compVars$1.borderRadius]: globalRefs$6.radius.md },
-    lg: { [compVars$1.borderRadius]: globalRefs$6.radius.lg },
-    xl: { [compVars$1.borderRadius]: globalRefs$6.radius.xl },
-    '2xl': { [compVars$1.borderRadius]: globalRefs$6.radius['2xl'] },
-    '3xl': { [compVars$1.borderRadius]: globalRefs$6.radius['3xl'] },
+    sm: { [compVars$2.borderRadius]: globalRefs$6.radius.sm },
+    md: { [compVars$2.borderRadius]: globalRefs$6.radius.md },
+    lg: { [compVars$2.borderRadius]: globalRefs$6.radius.lg },
+    xl: { [compVars$2.borderRadius]: globalRefs$6.radius.xl },
+    '2xl': { [compVars$2.borderRadius]: globalRefs$6.radius['2xl'] },
+    '3xl': { [compVars$2.borderRadius]: globalRefs$6.radius['3xl'] },
   },
 };
 
 const vars$e = {
-  ...compVars$1,
-  ...helperVars$1,
+  ...compVars$2,
+  ...helperVars$2,
 };
 
 var container$1 = /*#__PURE__*/Object.freeze({
@@ -6663,9 +6669,9 @@ var link$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$3 = getThemeRefs(globals);
-const compVars = DividerClass.cssVarList;
+const compVars$1 = DividerClass.cssVarList;
 
-const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
+const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
   {
     thickness: '2px',
     spacing: '10px',
@@ -6676,32 +6682,32 @@ const [helperTheme$1, helperRefs$1, helperVars] = createHelperVars(
 const divider = {
   ...helperTheme$1,
 
-  [compVars.alignItems]: 'center',
-  [compVars.flexDirection]: 'row',
-  [compVars.alignSelf]: 'stretch',
-  [compVars.hostWidth]: '100%',
-  [compVars.stripeColor]: globalRefs$3.colors.surface.main,
-  [compVars.stripeColorOpacity]: '0.5',
-  [compVars.stripeHorizontalThickness]: helperRefs$1.thickness,
-  [compVars.labelTextWidth]: 'fit-content',
-  [compVars.labelTextMaxWidth]: 'calc(100% - 100px)',
-  [compVars.labelTextHorizontalSpacing]: helperRefs$1.spacing,
+  [compVars$1.alignItems]: 'center',
+  [compVars$1.flexDirection]: 'row',
+  [compVars$1.alignSelf]: 'stretch',
+  [compVars$1.hostWidth]: '100%',
+  [compVars$1.stripeColor]: globalRefs$3.colors.surface.main,
+  [compVars$1.stripeColorOpacity]: '0.5',
+  [compVars$1.stripeHorizontalThickness]: helperRefs$1.thickness,
+  [compVars$1.labelTextWidth]: 'fit-content',
+  [compVars$1.labelTextMaxWidth]: 'calc(100% - 100px)',
+  [compVars$1.labelTextHorizontalSpacing]: helperRefs$1.spacing,
 
   _vertical: {
-    [compVars.minHeight]: '200px',
-    [compVars.flexDirection]: 'column',
-    [compVars.hostWidth]: 'fit-content',
-    [compVars.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
-    [compVars.stripeVerticalThickness]: helperRefs$1.thickness,
-    [compVars.labelTextWidth]: 'fit-content',
-    [compVars.labelTextMaxWidth]: '100%',
-    [compVars.labelTextVerticalSpacing]: helperRefs$1.spacing,
+    [compVars$1.minHeight]: '200px',
+    [compVars$1.flexDirection]: 'column',
+    [compVars$1.hostWidth]: 'fit-content',
+    [compVars$1.hostPadding]: `0 calc(${helperRefs$1.thickness} * 3)`,
+    [compVars$1.stripeVerticalThickness]: helperRefs$1.thickness,
+    [compVars$1.labelTextWidth]: 'fit-content',
+    [compVars$1.labelTextMaxWidth]: '100%',
+    [compVars$1.labelTextVerticalSpacing]: helperRefs$1.spacing,
   },
 };
 
 const vars$9 = {
-  ...compVars,
-  ...helperVars,
+  ...compVars$1,
+  ...helperVars$1,
 };
 
 var divider$1 = /*#__PURE__*/Object.freeze({
@@ -6785,9 +6791,9 @@ var loaderLinear$1 = /*#__PURE__*/Object.freeze({
 });
 
 const globalRefs$1 = getThemeRefs(globals);
-const vars$6 = LoaderRadialClass.cssVarList;
+const compVars = LoaderRadialClass.cssVarList;
 
-const [helperTheme, helperRefs] = createHelperVars(
+const [helperTheme, helperRefs, helperVars] = createHelperVars(
   {
     spinnerColor: globalRefs$1.colors.surface.contrast,
     mode: {
@@ -6805,29 +6811,33 @@ const [helperTheme, helperRefs] = createHelperVars(
 const loaderRadial = {
   ...helperTheme,
 
-  [vars$6.animationDuration]: '2s',
-  [vars$6.animationTimingFunction]: 'linear',
-  [vars$6.animationIterationCount]: 'infinite',
-  [vars$6.spinnerBorderStyle]: 'solid',
-  [vars$6.spinnerBorderWidth]: '0.2em',
-  [vars$6.spinnerBorderRadius]: '50%',
-  [vars$6.spinnerQuadrant1Color]: helperRefs.spinnerColor,
-  [vars$6.spinnerQuadrant2Color]: 'transparent',
-  [vars$6.spinnerQuadrant3Color]: helperRefs.spinnerColor,
-  [vars$6.spinnerQuadrant4Color]: 'transparent',
+  [compVars.animationDuration]: '2s',
+  [compVars.animationTimingFunction]: 'linear',
+  [compVars.animationIterationCount]: 'infinite',
+  [compVars.spinnerBorderStyle]: 'solid',
+  [compVars.spinnerBorderWidth]: '0.2em',
+  [compVars.spinnerBorderRadius]: '50%',
+  [compVars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
+  [compVars.spinnerQuadrant2Color]: 'transparent',
+  [compVars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
+  [compVars.spinnerQuadrant4Color]: 'transparent',
 
   size: {
-    xs: { [vars$6.spinnerSize]: '20px' },
-    sm: { [vars$6.spinnerSize]: '30px' },
-    md: { [vars$6.spinnerSize]: '40px' },
-    lg: { [vars$6.spinnerSize]: '60px' },
-    xl: { [vars$6.spinnerSize]: '80px' },
+    xs: { [compVars.spinnerSize]: '20px' },
+    sm: { [compVars.spinnerSize]: '30px' },
+    md: { [compVars.spinnerSize]: '40px' },
+    lg: { [compVars.spinnerSize]: '60px' },
+    xl: { [compVars.spinnerSize]: '80px' },
   },
 
   _hidden: {
-    [vars$6.hostDisplay]: 'none',
+    [compVars.hostDisplay]: 'none',
   },
 };
+const vars$6 = {
+  ...compVars,
+  ...helperVars,
+};
 
 var loaderRadial$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,